Facebook Conversion Tracking via Google Tag Manager

Facebook Conversion Tracking via Google Tag Manager

In this article, you will learn about Facebook Conversion Tracking with Google Tag Manager.

1. What is Facebook Pixel?

Facebook Pixel is an analytics tool that is used to measure the effectiveness of your advertising by understanding the actions people take on your website. In order to do this, Facebook Pixel provides a piece of code that is to be placed on your website.

There are mainly three purposes of Facebook Pixel:

  1. To ensure that your ads are being displayed to the right people

  2. Build advertising audience based on Pixel data

  3. Access additional advertising tools

But how exactly does it do that? Having the largest social media audience, Facebook allows you to target billions of users. When a user logs in to Facebook, their ID is associated with a unique signature. This signature links them to the different devices, browsers, as well as IP addresses they use  to login and identify them all as a single user. This helps massively in retargeting and displaying ads to those users on Facebook, regarding websites they had visited earlier or would like to visit, judging by their activities on social media.

2. What are Conversions in Facebook Pixel?

Conversions are specific actions visitors take on your website. It can be a pageview, a product purchase or a form submit. A conversion will be credited to Facebook ads if a person visits your website via Facebook ads and carries out a specific action.

To measure a conversion, you will have to add a piece of code to particular actions or pageviews. These codes are known as Facebook Pixel event codes because they are executed  upon certain actions.

There are two kinds of snippets you can add to track conversions. First is by adding standard events codes and the second is by adding custom event codes.

3. Setting up Facebook Base Pixel via Google Tag Manager

There are at least two ways to install the Facebook Pixel on a website. The first method is to manually add the Pixel code by accessing your website dashboard. You will have to add this on all pages of your website.

If you are using a CMS website like Weebly, it will be difficult to add conversion codes so the better choice is to use tag manager with Weebly.

The second method we will use is by adding Facebook base pixel with Google Tag Manager. Follow the steps below to do this:

  1. Copy your facebook base pixel code

  2. Create a new tag in Tag Manager

  3. Name the tag as “FB - Base Pixel”

  4. Select the tag type as “Custom HTML”

  5. Paste the pixel code in HTML field.

  6. Click on advanced settings and select the tag firing options as “Once per page”.

  7. Set the trigger on “All Pages”.

  8. Save, preview and publish changes.

facebook base pixel setup

If you are unable to do with above steps you can follow a step by step method on How to Install Facebook Pixel in Google Tag Manager.

4. How to Add Facebook Pixel Conversion Tracking with Tag Manager

Facebook provides nine standard events for tracking conversions. These events generally executes upon a specific pageview (i.e. purchase), a form submission (i.e thank you page) or a button click (i.e. add to cart).

If these nine standard events don’t meet your business needs, you can also create your own custom event. Adding events codes to specific pageviews or actions can be intimidating if you are not familiar with modifying codes.

Fortunately, Google Tag Manager makes this process a whole lot easier without having to change any website code. Let’s move on to see how to add standard Facebook events with Google Tag Manager.

i. Adding Facebook Standard Events via Google Tag Manager

If you have successfully installed Fb Pixel code on your website, you will now be able to create audience and create conversions buttons in your ads manager under Pixel.

Below is a screenshot of how your Pixel manager will look like after adding Pixel code to your website.

facebook pixel manager status

Now you will know that with Facebook Pixel code you can build audiences and create conversions. By setting up conversions you can create more targeted audiences for remarketing.

Let’s move on to create conversions with Google Tag Manager. As we are discussing standard events so will be adding standard events here.

Click on the ‘Create Conversions’ button as seen in the image above.

Choose the tracking method as ‘Track Conversions with Standard Events’.

track facebook pixel standard events

Our purpose of using Tag Manager is to pass the additional parameters along with dynamic values. In the table below, you can see what parameters we can pass to each event.

 

Event Name

Event Description

Parameter

Required Parameters

View Content

When a key page is viewed such as a product page e.g landing on a product detail page

Value, currency, content_name, content_type, content_ids

None. For dynamic product Ads content_ids and content_types are required

Search

When a search is made e.g when a product search query is made

Value, currency, content_category, content_ids, search_string

None

AddToCart

When a product is added to the shopping cart e.g click on add to cart button

Value, currency, content_name, content_type, content_ids

None. For dynamic product Ads content_ids and content_types are required

AddToWishlist

When a product is added to wishlist e.g click on add to wishlist button

Value, currency, content_name, content_category, content_ids

None

InitiateCheckout

When a person enters the checkout flow prior to completing the checkout flow e.g click on checkout button

Value, currency, content_name, content_category, content_ids, num_items

None

AddPaymentInfo

When a product information is added in the checkout flow

Value, currency, content_category, content_ids,

None



Purchase

When a purchase is made or checkout flow is completed e.g landing on thank you/confirmation page

Value, currency, content_name, content_category, content_ids, num_items

Value, currency. For dynamic product ads content ids and content type are also required.

Lead

When a signup is completed e.g click on pricing or signup for trial

Value, currency, content_name, content_category

None

CompleteRegistration

When a registration form is completed e.g complete subscription / signup for a service

Value, currency, content_name, status

None

Note: Before adding any tag make sure to enable all click and form built-in variables in Google Tag Manager. To do this, open tag manager and navigate to variables, click on ‘Configure’ button under built-in variables and from the list enable the required variables.

Inside the Pixel window, click the ‘Create Conversion’ button and then ‘Track Conversions with Standard Events’. You will then see the list of standard events along with event codes.

To help you understand, we are going to implement the ‘ViewContent’ standard event.

1). ViewContent:- fbq(‘track’, ‘ViewContent’ );

I will show you how you can add the ‘ViewContent’ standard event and how to pass parameters.

Step1: Create a new tag

Step2: Enter the tag name as ‘FB - Event - ViewContent’

Step3: Choose the tag type as custom html

Step4: Paste the event code inside the html box surrounded by <script></script> tags.

facebook viewcontent tag

Step5:  click on advanced settings and change the tag firing option to ‘Once Per Page’ because this is pageview tag.

Step6: click on the tag sequencing option

Step7: check the ‘Fire a tag before FB - Event - ViewContent’ box

Step8: click the select tag field and select the ‘FB - Base - Pixel’ tag.

facebook pixel tag sequencing

Note: The FB base Pixel should fire before the conversion event. That is why we instructed tag manager to fire the base pixel first and then the event pixel.

Now we need to create the trigger for this tag. If you have an ecommerce site, the ‘ViewContent’ tag will fire on products page and for any other website, it will fire on the specific pages you want to track. In my case, I am running this tag on an ecommerce site.

Step9: Click on the triggering option and create a new trigger. Enter a name for the trigger and select the trigger type as pageview and set the condition to according to your content type. For an ecommerce site, I will fire the event when someone views a product.

facebook event trigger

Step10: once you are done, save the trigger tag and open preview mode. In a new tab open the specific page on which you set up the ‘ViewContent’ tag. If you followed the above steps carefully you will see the tag fired in preview mode.

Otherwise you can also verify using Facebook Pixel helper or check your ads manager Pixel data.

You can setup the other 8 standard events using the above method very easily. Now we will look into how we can pass parameter values to the conversion tag.

we can pass the following parameters in the ‘ViewContent’ event.

Value, currency, content_name, content_type, content_ids

This is how the code will look like:

<script>
fbq(‘track’,’ViewContent’. {
    content_name: ‘Nike shoes’,
    content_category: ‘ladies wear’,
    content_ids: [‘1234’],
    content_type: ‘product’,
    Value: 300,
    Currency: ‘USD’
});
</script>

Note: For passing parameters you will have to add the above code to FB - Events - ViewContent tag we created earlier.

This code would be for a single product. But if you have multiple products on your ecommerce site, you would have to pass the dynamic variables. If the product details are not available on the page, you can pass them through the dataLayer method otherwise you can get the product details after the page load and send them to ads manager.

If you have a product page that displays all the required details, we can simply write a jQuery code to save them in a variable. Below is an example of how it would look like:

<script>
jQuery(document).ready(function(){
    var title = jQuery('h1.title').text().trim();
    var price = jQuery('.product-information meta[itemProp="price"]').attr('content');
    var skuId = jQuery('.product-information .sku_wrapper .sku').text().trim();
    var categories = jQuery('.product-information .posted_in').text().replace(/categories:/ig, '').trim().split(',');

    fbq('track','ViewContent',{
        content_type: 'product',
        content_ids:skuId,
    content_name:title,
        content_category:categories,
    value:price,
    currency: 'Rand'
    });
});
</script>

Do not just copy and paste this code because it will not work and this is not the same for every ecommerce store on the internet. You can use the above code for other standard events where the parameters are same like, AddToCart and AddToWishlist.

Check the below infographic for setting up the rest of event tags. 

facebook pixel standard events with tag manager

5. Why do we use standard and custom events?

There are mainly three benefits of using standard and custom events. By using them you can:

  1. Build audiences

  2. Build custom conversions

  3. Setup dynamic product re-marketing

One of the most important things to understand here is about the parameters you add to the events. Although the parameter values are not displayed in the ads manager but you can use them while building audiences, custom conversions or product re-marketing.

6. Verifying Facebook Pixel Conversions

Once you have added all the relevant conversion events, you will have to verify if the data is passing through it correctly. There are two ways to reassure which I explained comprehensively earlier in the post, how to see Pixel data is showing up in Facebook.
 

Need Help??

If you have any trouble implementing the Facebook conversion tracking or managing your ad campaigns, you can get in touch with us. Furthermore, you can use the comments section below to share your experience and thoughts about this topic.

Noman Karim

Hey, I am Noman, Content Marketer at MarketLytics conducting in-depth analysis of latest marketing trends and aligning them with my personal prospects to produce stage-managed and engaging content. I am a passionate blogger, a cat hoarder and an enthusiastic writer when it comes to analytics, online marketing, and SEO.