Facebook custom audience pixel Standard Events implementation using Google Tag Manager!

Previously I have written a post on how to upgrade your Facebook Custom Audience Pixel using Google Tag Manager. The blog post talked mostly about the Base pixel that needs to be placed on all the pages. It included a small example about the standard event “Search”. In this post I would be explaining in detail about the other standard events (ViewContent, AddToCart and Purchase) based on Facebook custom audience pixel. We will see how to fire these on the website using Google Tag Manager (GTM).

The simple way to do this is by creating a Custom HTML tag. Place the necessary code related to the event. Fire the tag at necessary places.

Facebook follows a common syntax to fire the events and pass the parameters associated to it. It looks like this

Understanding the Facebook Custom Audience Pixel Parameters

value: Any price you assign for that particular event. If a product is being viewed this would be the product price. If an user adds a product with 2 quantity to the cart this would be 2 times your product price. If it is an order confirmation this would be the total value of the order. You can assign a value of your liking if it’s a subjective event something like Newsletter confirmation or a successful sign up.

currency: This is self explanatory. Based on your geographic location or location of your business, you can assign the respective value.

content_ids: Unique ids of Products.

content_type: Either a “product’ or ‘product_group’ depending upon content_ids being passed. If the content_ids have the values related to products then we need to use ‘product’. If it has product groups then the value should be ‘product_group’

content_name: Name of the page or product

ViewContent Event

This event needs to be fired when a product page is viewed.

Sample Code that needs to be placed

Required Parameters: content_ids, content_type
Even though Facebook says value and currency are not required it’s a good practice to pass them for all the events.

Implemeting this using GTM

Before implementing, identify the DIV id or classname of the required elements. In this case they are Product Name, Product ID, Product Price and Product Category. Ask your developer to pass in a unique id value to these elements which will make your life easy. You can also use other combinations to get to the elements though. In fact the better way would be implementing a Data Layer and pass these values.

1. Create a new Custom HTML Tag

2. Paste the above mentioned code

3. This is the most important step. Since this a page view event. We need to make sure that our base pixel tag is available by the time we fire this code. The reason is the object ‘fbq’ we use is created by the Facebook Base Pixel which we have implemented already. To make this happen we use the Tag Firing Priority feature of GTM. Assign a bigger number like 3 to the Base Pixel tag which you have implemented and a lower number to the present pixel tag. This makes sure that base pixel fires first and our code fires next.

custom html tag firing priority

 

4. Create a trigger which identifies all your Product pages. If all your product pages’ URLs have ‘/product/’ in them, you can create a new trigger with this value

custom html tag product pages

4. Assign the trigger and save the tag. Publish the changes. You are done!

AddToCart Event

This is an event which is fired when a product is added to the shopping cart.

Sample Code that needs to be placed

1. Create a new Custom HTML Tag

2. Paste the above code

3. Create a Click Trigger which identifies the click on Add to Cart button

add to cart trigger facebook custom audience pixel

add to cart trigger facebook custom audience pixel

4. Save the tag. Publish the changes.

facebook custom audience pixel add to cart event

 

Purchase Event

This event needs to be fired on the order confirmation page.

Sample code for this event looks like this

1. Create a new Custom HTML Tag

2. Paste the above mentioned code

3. This is the most important step. Since this a page view event. We need to make sure that our base pixel tag is available by the time we fire this code. The reason is the object ‘fbq’ we use is created by the Facebook Base Pixel which we have implemented already. To make this happen we use the Tag Firing Priority feature of GTM. Assign a bigger number like 3 to the Base Pixel tag which you have implemented and a lower number to the present pixel tag. This makes sure that base pixel fires first and our code fires next.

4. Configure the trigger to fire on Order confirmation page

5. Save the tag and Publish the changes.

The other standard events mentioned in the Facebook Documentation follows similar procedure depending upon the kind of event it is i.e., whether it is a page load event or a click event.

Note: All the above implementation contains pseudo code. These elements differ from site to site. If you want me to provide the code for your particular site, please leave a comment below with your site details.

Ram Manohar

Author: Ram Manohar

Independent Digital Analytics and Tag Management Consultant. Web Analytics Expert with 8+ years of experience. Well versed in Digital Analytics, Web Programming, WordPress and Digital marketing. Contact me for consulting!