Facebook Pixel – Manual Integration

ByReid Walley
Table Of Contents
  1. Notes on: Facebook Pixel Code
  2. Notes on: Pixel Event Scripts, Dynamic Variables, Hooks, PHP, and Conditional Logic
  3. Get and use the product type in WooCommerce – Stack Overflow
  4. Notes on: Microdata Tags
  5. Notes on: WooCommerce Variables for JSON-LD
  6. Notes on: APIs and Webhooks

Notes on: Facebook Pixel Code

About Facebook Pixel Standard and Custom Events – Facebook

Here’s what your website code will look like with standard or custom events installed:

Facebook pixel base code – Facebook Business Help Center
  1. Your website’s original code.
  2. Your Facebook pixel base code.
  3. Your standard or custom event code. The example above shows an add to cart event, which is a standard event. Learn more about how to set up standard and custom events in your website’s code.

Add events on the pages that matter to your business to understand your customers’ journey.

What I didn’t initially understand (when looking at the above diagram) was that the #3 section is showing that “standard or custom event code” can be added in this part of the code – in addition to the default PageView code in the #2 section.

I mistakenly thought I didn’t have to add any extra code beyond the Facebook pixel base code.

Specifications for Facebook Pixel Standard Events – Facebook

A list of Facebook Pixel Standard events, Standard event example, and important details regarding the Facebook Pixel base code options. See full page of info.

Article also includes Standard Event Code, like ViewContent:

fbq('track', 'ViewContent');
Facebook pixel base code – Facebook Business Help Center
  1. Your website’s original code: Paste the Facebook pixel code between the <head> and </head> tags of your web page. You may already have other existing code between the head tags, so just place the pixel code underneath that, but above </head>.
  2. Your Facebook pixel base code: Your Facebook pixel code will look like the diagram above, except your pixel ID will be different from 1234567890.
  3. Your standard event code: Within your Facebook pixel code, above the </script> tag, paste the standard event code that’s relevant to your page, such as the Add To Cart code. You’ll need to do this for every page you want to track.

(See example below) The key here is that every page of your website should have everything that’s enclosed in section 2 (the base code), but different pages will have different snippets of code for section 3 (standard event code).

Base Code vs Standard Event code – Facebook Business Help Center

Notes on: Pixel Event Scripts, Dynamic Variables, Hooks, PHP, and Conditional Logic

How To Set Up Facebook Pixel Events For Your E-commerce Site – AdShark Marketing

AdShark Marketing’s article, How To Set Up Facebook Pixel Events For Your E-commerce Site, details the 3 main Facebook e-commerce pixel events you can track:

  • ViewContent (Very important! Content Type: Product Group Vs. Product)
  • AddToCart
  • Purchase

Content Type: Product Group Vs. Product: I sell t-shirts in different sizes (WooCommerce Product Variations), which means I gotta use the Product Group content type in the script instead of the Product content type.

Excerpt from article: When the events fires on your product page the value in the content ID field should be the actual product ID. You can do this by using dynamic variable and adding the events script to your product pages.

Below is an example of the events script (value and currency are optional):

<script>
fbq('track', 'ViewContent', {
   content_ids: {{Product ID Variable Here}},
   content_type: 'product_group', 
   value: {{Product Price Variable Here}},
   currency: 'USD'
});
</script>

More example event scripts can be seen in the AdShark Marketing article.

> PIT STOP <

I didn’t know how to use dynamic variable in the script or how to add the events script to product pages as recommended in the “How To Set Up Facebook Pixel Events For Your E-commerce Site – AdShark Marketing” example above.

Two articles, listed below, helped me figure it out:

WooCommerce: Add Different Facebook Pixels to Different Pages – Business Bloomer

PHP snippet: Use WooCommerce conditional logic (Business Bloomer), like is_checkout to target only the Checkout page (“user has initiated checkout”) and is_wc_endpoint_url to target only the Thank-you page (“user has purchased”).

/**
 * @snippet       Add Different Facebook Pixels to Different WooCommerce Pages
 * @how-to        Get CustomizeWoo.com FREE
 * @sourcecode    https://businessbloomer.com/?p=21309
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 2.6.8
 */
 
add_action( 'wp_head', 'bbloomer_head_conditional_fb_pixel' );
 
function bbloomer_head_conditional_fb_pixel() {
 
if ( is_checkout() && !is_wc_endpoint_url( 'order-received' ) ) {
    
// FIRST WE TARGET THE CHECKOUT PAGE WITH is_checkout()
// AND WE MAKE SURE TO EXCLUDE THE THANK YOU PAGE
 
   ?>
      <!-- Facebook Pixel Code for Initiated Checkout -->
      <!-- End Facebook Pixel Code -->
   <?php } elseif ( is_wc_endpoint_url( 'order-received' ) ) { // THEN WE TARGET THE THANK YOU PAGE ONLY ?>
      <!-- Facebook Pixel Code for Conversions -->
      <!-- End Facebook Pixel Code -->
   <?php } else { // FINALLY WE TARGET ALL THE OTHER PAGES ?>
      <!-- Facebook Pixel Code for Rest of Website -->
      <!-- End Facebook Pixel Code -->
   <?php }
         
}

PHP snippet example from Business Bloomer

Read full article

Traditionally, I’ve learned to place the above PHP code in the Child Theme’s functions.php file. But I’ve recently learned to place it in a plugin like Code Snippets (so I don’t lose the code if/when I switch themes).

WooCommerce Conditional Logic – Tags, Examples & PHP – Business Bloomer

Section 3, Are you working on WooCommerce Pages?, may be helpful.

How does the PHP snippet get placed on the WordPress site?

In the Child Theme’s functions.php file? Nope. Use the Code Snippets WordPress plugin, instead.

Code Snippets is an easy, clean and simple way to run PHP code snippets on your site. It removes the need to add custom snippets to your theme’s functions.php file.

How does the Facebook Pixel Base code get placed on the WordPress site?

Insert Headers and Footers is a simple WordPress plugin that lets you insert code like Facebook Pixel, Google Analytics, custom CSS, and more to your WordPress site header and footer. No need to edit your theme files!

The simple interface of the Insert Headers and Footers plugin gives you one place where you can insert scripts, rather than dealing with dozens of different plugins.

How to properly implement marketing Pixels without Plugins (Facebook, Pinterest, WooCommerce) – Eveel Media

Code examples of PHP functions + Facebook Pixel scripts + WooCommerce Hooks for View Product, Purchase, and Add to Cart events.

Facebook Pixel Event: ViewContent
Conditional tag: is user on WooCommerce Product Page

<?php
function eveel_facebook_product_view()
{
if( is_product() ) //Check if user on product page
{
$product = new WC_Product( get_the_ID() );
$sku = $product->get_sku();
$name = $product->get_title();
$cat = $product->get_categories();
?>
<script>
fbq('track', 'ViewContent',
{
content_ids: '<?php echo $sku ?>',
content_name: '<?php echo $name ?>',
content_category: '<?php echo $cat ?>'
});
</script>
<?
}
}
add_action( 'wp_footer', 'eveel_pint_product_view' );

PHP snippet example from Eveel Media

Read full article

$product = new WC_Product( get_the_ID() ); in the above code might need to be updated to:

$product = wc_get_product( $post->ID ); (source WooCommerce.com), or

$id = product->get_id (); (source, source), or

$product_id = $this->get_product_id( $product_id ); (source)

Traditionally, I’ve learned to place the above PHP code in the Child Theme’s functions.php file. But I’ve recently learned to place it in a plugin like Code Snippets (so I don’t lose the code if/when I switch themes).

Get variations IDs from a variable product in Woocommerce 3 – Stack Overflow

To get the children variation Ids for a variable product, use WC_product get_children() method (that doesn’t have/allow any arguments):

// (if needed) Get an instance of the WC_product object (from a dynamic product ID)
$product = wc_get_product($product_id);
// Get children product variation IDs in an array
$children_ids = $product->get_children();
// Get the first ID value
$children_id = reset($children_ids); 
// or 
$children_id = $children_ids[0];

Note: In my WooCommerce site, all products have various sizes (Variations). I think I need $product->get_type() or $product->get_type('variable') somewhere somehow, not sure yet.

Read full thread

Get and use the product type in WooCommerce – Stack Overflow

  • To get the product type you will use get_type() method
  • To check the product type inside an IF statement you will use is_type() method

Sometimes you can’t get the product type globally… as it depends on the WC_Product object.

1) From a dynamic product id variable (when you don’t have the $product object):

$product = wc_get_product( $product_id );

or

$product = wc_get_product( get_the_id() );

2) From $product global variable on single product pages (and on product archive pages inside the loop):

global $product;
// Check that WC_Product instance $product variable is defined and accessible
if ( ! is_a( $product, 'WC_Product' ) ) {
    $product = wc_get_product( get_the_id() );

Read full thread

> PIT STOP <

It seems that the following methods are important:

global $product; // before code below
$product->get_id();
$product = wc_get_product();
$product->get_type();

Source: Product Types Tutorial > See section: How to Create a WooCommerce Product Type

Notes on: Microdata Tags

Manually installing Facebook Pixel for tracking WooCommerce events includes adding Microdata Tags (via OpenGraph, Scheme.org, or JSON-LD for Schema.org) to my WooCommerce site. From Facebook: Microdata is an HTML specification used to nest metadata within existing content on webpages.

How to view which Microdata tags are missing

Discovering which Microdata tags are missing can be done through the Facebook Microdata Debug tool. Enter a WooCommerce product URL and see results. This is what my product’s results look like:

Facebook Microdata Debug tool results

Theres are the tags that I’ll need to add to my WooCommerce site via JSON-LD script (which I’ll add via Code Snippets WordPress plugin).

All of the JSON-LD formatted examples were for single products with pre-set title, SKU, and price. I needed a way to dynamically add that information into the JSON-LD script. And so began the search for what the hell WooCommerce dynamic variables even are!

Turns out, this is what WooCommerce dynamic variables look like. At least I’m pretty sure. And I think this is what I need to add to the JSON-LD script: $product->get_sku() and $product->get_price()

When Googling “WC_Product vs wc_get_product” (because WC_Product is deprecated), I ran across the following 3 articles to help with OpenGraph, and getting Product IDs, name, SKU, prices for the JSON Microdata Tags.

How to Get Product Price or SKU – WordPress.org Support, WooCommerce

Comment excerpt: I’m trying to manually add Open Graph Meta info in the functions.php of my child theme, but I’m having trouble adding the product price and sku in there.

Read full thread

WooCommerce: Get Product Info (ID, SKU, $) From $product Object – Business Bloomer

“How to get ________ if I have the $product variable/object?” For example, “How can I get the product SKU“? Or “How can I get the product short description“?

Read full article

Accessing WC_Product protected data in Woocommerce 3 – Stackoverflow

$product_id    = $product->get_id(); // product ID
$product_name  = $product->get_name(); // product name
$product_sku   = $product->get_sku(); // product SKU
$product_price = $product->get_price(); // product price

Even though the answer relates to WooCommerce 3.0, it helps me see how WooCommerce Class Variables are written, so I can eventually apply them to JSON-LD for Schema.org Microdata Tags. From Facebook: you can use microdata tags on your website to provide information about your products.

Read full thread

How to Get the Product ID in WooCommerce and Use It – James Kemp, IconicWP

A WooCommerce product is essentially a WordPress post, therefore, any product that you create in WooCommerce is stored in the corresponding posts database table. The SKU name and product ID are stored in the posts metadata table in WordPress.

Additionally, you can use PHP to get the Product ID of a specific product. If you are at a product page, the following snippet of code saves the product ID in your $id variable, which you can then use to display the ID on the page.

global $product;
$id = $product->get_id();

This helps me see how a WooCommerce Product variable is literally generated. This may/may not be everything I need to add dynamic variables to JSON-LD code, but it’s a start. I’m still not sure where to place the global $product; portion of the code relative to the JSON-LD script.

Read full article

Advanced SEO – MOZ

JSON-LD generator & Schema.org

Notes on: WooCommerce Variables for JSON-LD

Within the JSON-LD script, I think these are the WooCommerce variables that I’ll need in order to have zero errors on the Facebook Microdata Debug tool. Which will allow my WooCommerce products to be included in Facebook Shops.

  • $product->get_id();
  • $product->get_name();
  • $product->get_sku();
  • $product->get_price();

Notes on: APIs and Webhooks

I think I need to learn about WordPress REST API and WooCommerce Webhooks to use the Facebook Conversions API. As I’m learning, APIs mean my WooCommerce site can talk to Facebook’s servers.

WordPress REST API: What It Is and How to Get Started Using It – CodeInWP

This is where I experiment with the Facebook Conversions API, since I know NOTHING about APIs. The WordPress REST API: What It Is and How to Get Started Using It article is the best I’ve found so far to explain to a noob like me what the hell a REST API is all about.

From the article: As long as you have a WordPress site set up, you can start experimenting with the REST API right away. You can perform various GET requests to retrieve data directly, simply by using your browser. To access the WordPress REST API, you’ll need to start with the following route:

yoursite.com/wp-json/wp/v2

Then, you can add onto this URL to access various types of data. For instance, you could see a list of all the users on your site:

yoursite.com/wp-json/wp/v2/users

This article will help lead the way to understanding how to implement the Facebook Conversions API and start making POST requests.

Using Webhooks – WooComerce Docs

A Webhook is an event notification sent to a URL of your choice. Users can configure them to trigger events on one site to invoke behavior on another. Webhooks are useful for integrating with third-party services and other external API that support them.

WooCommerce Webhooks: How to set them up and make sure they are working – Daniel Espinoza, Grow Development

Article includes:

  • Setting up WooCommerce Webhooks
  • Test WooCommerce Webhooks using RequestBin

Read full article

How to Test WooCommerce Webhooks – Robot Ninja

Webhooks in WooCommerce are basically one way that you can send data to an URL when something happens in your store. It’s good to know how to use Webhooks if you want to automatically push data from one app to another when customizing your WooCommerce site.

Article includes:

  • Creating WooCommerce Webhooks
  • Testing WooCommerce Webhooks using RequestBin
  • Tools for Testing WooCommerce Webhooks
  • Debugging Common WooCommerce Webhook Issues

A Webhook is an event notification—known as a payload—sent to a URL you specify. You can configure Webhooks to trigger events on one website to invoke behavior on another. WooCommerce Webhooks are useful for integrating the platform with third-party services and other external API that support them.

Read full article

Share this post:

Share on Pinterest Share on LinkedIn
Reid Walley June 10 2022

Graphic designer since before the Internet. Started with newspaper paste-up; then art director for advertising agency in Reno, NV; and now freelancer designing marketing materials, print-on-demand t-shirt art, websites, and social media graphics.

Similar Posts

Facebook – Add and Update Catalog Items With a Pixel

ByReid Walley

(Source: Facebook) One way to manage your catalog inventory is to use the Facebook pixel. The pixel can add new items to your catalog and update inventory details automatically from your website. After you connect your pixel as a data source, you don’t need to update your catalog anymore. This is a good option if…

Kadence Theme – Display 2 Different Menus On Different Pages Using Element Hook, PHP & Plugins

ByReid Walley

Show Widget Area Using Hooked Element In Kadence Create a PHP function that adds a Widget area to the Kadence “Above All Content” Hook. Step-by-step instructions to register a custom [widget_area] shortcode so it can be used anywhere shortcodes are accepted in WordPress including in Kadence Elements. Add the PHP to site via Code Snippets WordPress plugin Kadence Element…

Switch Image Background Color On WooCommerce Variation Image Gallery

ByReid Walley

Goal: Display an enlarged version of t-shirt artwork on 9 different garment color options. Approach: Instead of generating and uploading 9 different artwork files with 9 different color backgrounds, we’re doing the following: This keeps everything lightweight. Switch Image Background (using CSS) On Color Variation Selection – Business Bloomer Share this post: Share on Twitter…

WooCommerce Shop – Remove “This is where you can add new products to your store”

WooCommerce Shop – Remove “This is where you can add new products to your store”

ByReid Walley

Remove “This is where you can add new products to your store” Remove the description text from just below the “Shop” title on the WooCommerce Shop page. I have no idea why this description text even exists! Note: This will NOT remove the description text from other Product Category Pages. Source: https://wordpress.org/support/topic/remove-text-this-is-where-you-can-add-products-to-your-store/#post-11548982 I use the…

Add New Menu to WordPress Site Using Code

ByReid Walley

1. Register a new menu in WordPress admin Use WordPress’s register_nav_menus to register the menu so it appears in Appearance > Menus > Menu Locations. Place the below PHP code in Code Snippets plugin: Important: In the Code Snippet plugin, right below the PHP code, make sure and choose Run snippet everywhere. Otherwise the newly-registered…

Leave a Reply

Your email address will not be published. Required fields are marked *