Implement Facebook Pixel in Default Carts through Google Tag Manager

A. Create a tag for Facebook Pixel Page View Initialization

Create this tag if you don’t already have a Facebook Pixel tag on your website that fires on all pages where you have the Google Tag Manager code.

1

Create Page View tag

• Click to create a new tag.
• As Tag Type select Custom HTML. In the script below, under '{your-pixel-id-goes-here}' type your Facebook pixel ID. The script below is the Pixel Base Code and can be found in the Facebook/Meta Pixel documentation.

Facebook Pixel Base Code

<!-- Facebook Pixel Code -->
<script>
     !function(f,b,e,v,n,t,s)
     {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
     n.callMethod.apply(n,arguments):n.queue.push(arguments)};
     if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
     n.queue=[];t=b.createElement(e);t.async=!0;
     t.src=v;s=b.getElementsByTagName(e)[0];
     s.parentNode.insertBefore(t,s)}(window, document,'script',
     'https://connect.facebook.net/en_US/fbevents.js');
     fbq('init', '{your-pixel-id-goes-here}');
     fbq('track', 'PageView');
</script>

• As Triggering select All Pages.

All Pages

B. Configure dataLayer variables in Google Tag Manager

Configure dataLayer variables in Google Tag Manager to further use them in the Facebook implementation.

2checkout shopping carts contain a dataLayer with eCommerce information on the Google Analytics 4 structure. You can view this by typing dataLayer into the browser console and under gtag4 you can see the eCommerce information on Google Analytics 4 structure both at checkout and at purchase on the order Finish page.

dataLayer variables

1

Configure dataLayer variables in Google Tag Manager

To capture the eCommerce information from the dataLayer, create the following User-Defined Variables in Google Tag Manager. For each variable:

• Click to create a new User-Defined Variable.
• As Variable Type select Data Layer Variable.
• Under Data Layer Variable Name use the name below.
• Under Data Layer Version select Version 2.

Create the following variables:

• Name: gtag4.event — Data Layer Variable Name: gtag4.event.
• Name: gtag4.currency — Data Layer Variable Name: gtag4.currency.
• Name: gtag4.items — Data Layer Variable Name: gtag4.items.
• Name: gtag4.tax — Data Layer Variable Name: gtag4.tax.
• Name: gtag4.transaction_id — Data Layer Variable Name: gtag4.transaction_id.
• Name: gtag4.value — Data Layer Variable Name: gtag4.value (captures total order value, including tax).

C. Create a User-defined variable in Google Tag Manager for Facebook called FacebookEventsScript

1

Create the FacebookEventsScript variable

1. Click on New to create a new user-defined-variable.

FacebookEventsScript

1. As Variable Type select Custom JavaScript.
2. In the Custom JavaScript section paste the code below. This code will capture product, transaction id and transaction value data, using the dataLayer variables previously created.

FacebookEventsScript (Custom JavaScript variable)

function(){
     var attr = {};
     attr.currency = {{gtag4.currency}};
     attr.content_type = "product";
     var fbContents = [];
     var fbIds = [];
     var fbNames = [];
//function fbData
var fbData = function() {
       attr.num_items = {{gtag4.items}}.length;
       for(var i=0;i<{{gtag4.items}}.length;i++){
         fbContents.push({
          'id':{{gtag4.items}}[i].item_id,
          'name':{{gtag4.items}}[i].item_name,
          'quantity':{{gtag4.items}}[i].quantity
         });
        	fbIds.push({{gtag4.items}}[i].item_id);
         fbNames.push({{gtag4.items}}[i].item_name);
      	 }
       attr.contents = fbContents;
       attr.content_ids = fbIds;
       attr.content_name = fbNames;
   	};
if ({{gtag4.event}} === 'begin_checkout' && window.omniture_vars && window.omniture_vars.CART_PRODUCTS){
   	var checkoutValue=0;
   	var checkoutCartProducts = omniture_vars.CART_PRODUCTS;
   	for (var i=0; i<checkoutCartProducts.length;i++){
   	checkoutValue += Number(checkoutCartProducts[i].ProductTotalPriceWithTaxAndDiscount * checkoutCartProducts[i].ProductQuantity);
   	}
       checkoutValue = parseFloat(checkoutValue.toFixed(2))
       attr.value=checkoutValue;
   	fbData();
}
     if({{gtag4.event}} === 'purchase'){
      attr.value = {{gtag4.value}};
       fbData();
     }
     return attr;
}

D. Create a trigger specifically for the purchase event

Create a new trigger which is restricted only to the purchase event and name it Purchase Event Only.

1

Configure Purchase Event trigger

• As Trigger Type select Custom Event.
• As Event name type 2checkout event.
• For this trigger to fire on, select Some Custom Events.
• Add the condition that variable gtag4.event equals purchase.

Purchase event only

E. Create a tag for the Facebook Pixel for the purchase event

1

Create Facebook Purchase tag

1. Create a new tag (for example: Facebook Purchase).
2. As Tag Type select Custom HTML.
3. In the HTML section, paste the following code (this code will send product, transaction id and transaction value data to Meta when a purchase takes place).

Facebook Purchase tag (Custom HTML)

<script>
     fbq('track', 'Purchase', {{FacebookEventsScript}}, {eventID: {{gtag4.transaction_id}}});
</script>

1. For Triggering, select the trigger restricted to the purchase event (Purchase Event Only).

Create a tag for the Facebook Pixel for the purchase event

Optional — send information with the Facebook Pixel at checkout if needed

Create a trigger specifically for the checkout event

1

Create Checkout Event trigger

Create a new trigger named Checkout Event Only.

• As Trigger Type select Custom Event.
• As Event name type 2checkout event.
• For this trigger to fire on, select Some Custom Events.
• Add the condition that variable gtag4.event equals checkout.

Checkout Event Only.

2

Create Facebook Checkout tag

1. Create a new tag (for example: Facebook Checkout).
2. As Tag Type select Custom HTML.
3. In the HTML section, paste the following code:

Facebook Checkout tag (Custom HTML)

<script>
     fbq('track', 'InitiateCheckout', {{FacebookEventsScript}});
</script>

1. For Triggering, select the trigger restricted to the checkout event (Checkout Event Only).

Facebook Checkout.

Privacy/consent note

The tags for Facebook Pixel need to be based on consent. Adjust the tags described above to condition them based on your method of collecting consent.