#GTMTips: Use an e-commerce data layer optimized with the Facebook Pixel

A frequently asked question in Google Tag Manager communities (such as product forums) is How to use Enhanced E-Commerce dataLayer Object with Facebook pixel icon? It’s a common question because running a Facebook conversion pixel on a site that also collects data from the store to Google Analytics optimized e-commerce reports is probably a very typical scenario.

Side note: Since Google+ is about to go down the dodo’s way, I’ve created an archive for the entire community that you can browse and perform text searches against.

I’ve shared a tip about this before, but I think I need to be more specific and give concrete examples of how to populate the different properties of the Facebook pixel object.

For a guide on how to implement a Facebook pixel, check out Yehoshua’s amazing guide to Facebook Pixel with Google Tag Manager guide.

X

Simmer . Newsletter

Subscribe to the Simmer newsletter to get the latest news and content from Simo Ahava right in your inbox!

Tip 95: Use the Facebook Pixel with the Enhanced Ecommerce Data Layer

The solution here is to create a file API That you can pass the optimized e-commerce product suite to , and it will return the entire array reduced and converted to the various formats required by the Facebook Pixel.

First things first, you need to Create a custom JavaScript variable.

1. create a file custom javascript variable in the GTM user interface.

2. give him a name EECFB API (or something less than abomination, if you wish).

3. Add the following code inside:

function() 
  return function(products) 
    if (!Array.isArray(products)) 
      return;
    
    
    var idList = products.map(function(prod) 
      return !!prod.id && prod.id.toString();
    );
    
    var totalValue = products.reduce(function(acc, cur) 
      return !!cur.price && !!cur.quantity ? acc + (cur.price * cur.quantity) : acc;
    , 0);
    
    var totalQuantity = products.reduce(function(acc, cur) 
      return !!cur.quantity ? acc + parseInt(cur.quantity) : acc;
    , 0);
    
    var contentsArray = products.map(function(prod) 
      return 
        id: !!prod.id ? prod.id.toString() : undefined,
        item_price: !!prod.price ? parseFloat(prod.price) : undefined,
        quantity: !!prod.quantity ? parseInt(prod.quantity) : undefined
      ;
    );
    
    return 
      content_ids: idList,
      value: totalValue,
      num_items: totalQuantity,
      contents: contentsArray
    ;
  ;

This code is actually yields function, so it’s basically a wrapper for ending, which you can then call in your other tags with a parameter.

When calling this API in a custom HTML tag, for example, you must have a variable reference to a file products An array in hand to pass to this API as a parameter (I’ll show you an example soon).

The API returns an object with four properties:

How do we put it all together?

Let’s take Facebook Purchase Happened as an example. Here’s what you need to do.

First, let’s say that’s what Enhanced E-Commerce means shopping The object looks like:

ecommerce: 
  purchase: 
    products: 
	  actionField: ...,
	  products: [
        id: 'shirt1', 
        name: 'T-Shirt', 
        price: '15.99', 
        quantity: 2
      ,
        id: 'pants2', 
        name: 'Pants', 
        price: '9.99', 
        quantity: 3
      ]
    
  

1. First, create a data layer variable for the variable name ecommerce.purchase.products tag it ecommerce.purchase.products. This is the reference for the products in the Enhanced Ecommerce Purchase element.

2. Create a custom HTML tag that activates after the Facebook pixel is configured.

3. This is what the contents might look like:

<script>
  (function() 
    // Get reference to the Enhanced Ecommerce products
	var prods = ecommerce.purchase.products;
	
	// Poll the custom Facebook API with this array
	var fbObj = EECFB API(prods);
	
	// Create the FB pixel call
	if (typeof window.fbq === 'function') 
	  window.fbq('track', 'Purchase', 
        value: fbObj.value,
        content_ids: fbObj.content_ids,
        contents: fbObj.contents,
        num_items: fbObj.num_items
	  );
	
  )();
</script>

It’s a fancy situation – you wouldn’t normally send a Facebook buy event with that payload.

Anyway, what happens here is that you first fetch a reference to a file products An array in the enhanced e-commerce purchase object. Then you call EECFB API Pass this matrix as a parameter. The API returns the object you store in a file fbObj local variable.

Then, you can simply access the properties of that object (listed in the table earlier in this article) in a file fbq() a call. This is how you create the required pixel call with all necessary parameters.

So window.fbq() method In fact These values ​​are called:

window.fbq('track', 'Purchase', 
  value: 61.95,
  content_ids: ['shirt1', 'pants2'],
  contents: [
    id: 'shirt1', 
    item_price: 15.99, 
    quantity: 2
  ,
    id: 'pants2', 
    item_price: 9.99, 
    quantity: 3
  ],
  num_items: 5
);

summary

What you create here is a file the assistant A function that automatically chews optimized e-commerce products and broadcasts values ​​in the format required by the Facebook pixel.

You can freely extend the variable with other properties, and adapting it to other source object formats should be pretty simple as well.

Anyway, let me know in the comments if you think the API needs some other properties, or if you need help extending it!