Implement Facebook Pixel in ConvertPlus and Inline 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

Click to create a new tag.

2

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

3

<!-- 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>

4

As Triggering select All Pages.

All Pages

B. Create a User-defined variable in Google Tag manager called “ecommerce”

1

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

User-defined variable ecommerce”

2

As Variable Type, select Data Layer Variable.

3

As Data Layer Variable Name, add ecommerce in the field.

4

As Data Layer Version select Version 2.

Data Layer Variable ecommerce

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

1

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

a new user-defined-variable

2

As Variable Type select Custom JavaScript.

3

In the Custom JavaScript section paste the below code.

4

function(){
     var attr = {};
     attr.currency = "USD";
     attr.content_type = "product";
     var fbContents,fbIds,fbNames,i;
//function fbData
var fbData = function() {
fbContents = [];
       fbIds = [];
       fbNames = [];
       attr.num_items = {{ecommerce}}.items.length;
       for(i=0;i<{{ecommerce}}.items.length;i++){
         fbContents.push({
          'id':{{ecommerce}}.items[i].item_id,
          'name':{{ecommerce}}.items[i].item_name,
          'quantity':{{ecommerce}}.items[i].quantity
         });
        	fbIds.push({{ecommerce}}.items[i].item_id);
         fbNames.push({{ecommerce}}.items[i].item_name);
      	 }
       attr.contents = fbContents;
       attr.content_ids = fbIds;
       attr.content_name = fbNames;
   	};
     if({{Event}} === 'begin_checkout'){
       attr.value = {{ecommerce}}.actionField.checkout_valueUSD;
       fbData();
     }
     if({{Event}} === 'purchase'){
      attr.value = {{ecommerce}}.actionField.valueUSD;
       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 Event Ecommerce Purchase Only.

1

As Trigger Type, select Custom Event.

2

As Event name, type purchase.

3

For this trigger to fire on, select All Custom Events.

Event Ecommerce Purchase Only

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

1

Create a new tag named for example Facebook Purchase ConvertPlus.

2

As Tag Type select Custom HTML.

3

In the HTML section, paste the following code:

4

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

5

For Triggering, select the Trigger for Event Ecommerce Purchase only, the trigger that is only restricted to the purchase event.

Event Ecommerce Purchase Only

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

Create a trigger specifically for the checkout event

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

1

As Trigger Type, select Custom Event.

2

As Event name, type begin_checkout.

3

For this trigger to fire on, select All Custom Events.

Event Ecommerce Checkout Only

Create a tag for the Facebook Pixel for the checkout event

1

Create a new tag named for example Facebook Checkout ConvertPlus.

2

As Tag Type select Custom HTML.

3

In the HTML section, paste the following code:

4

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

5

For Triggering, select the Trigger for Event Ecommerce Checkout only, the trigger that is only restricted to the checkout event.

Facebook Checkout ConvertPlus