Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Updated: May 20th, 2017. If you’re already using Facebook for marketing, you want to measure the results and be more efficient, right? But how can you track interactions such as LIKE button clicks? What about conversions? Everything used to work like this – you send an email to the developer with requirements of what should be tracked and it takes him weeks complete the task. But not anymore! I present to you a complete Google Tag Manager Facebook guide.

This blog post assumes you have a working knowledge of Google Tag Manager tags, triggers, variables, and data layer. If you’re a beginner – I recommend checking out these free Google Tag Manager courses.

 

IN THIS BLOG POST I’LL COVER THREE MAIN TOPICS:

  1. How to track Facebook LIKE button clicks with Google Tag Manager.
  2. How to implement Facebook Pixel with Google Tag Manager
  3. Facebook Conversion Tracking with Google Tag Manager.

 

1. TRACK Facebook LIKES WITH GOOGLE TAG MANAGER

Facebook button click

In this chapter I’ll show you how to track clicks of LIKE button on your website and automatically send this data to Google Analytics as Social Interactions.

BEFORE WE CONTINUE

Here are several things to keep in mind, before we dive into this Google Tag Manager Facebook guide:

  • This tracking method supports only those buttons, which are embedded on your website. It’s impossible to track all likes and shares that happen on other websites. You are able to track only those interactions, that happen within boundaries of your own website which has Google Tag Manager installed.
  • This tracking method supports only default Facebook button. Sumo or any other social sharing plugins will not be tracked. In case of custom social buttons, you should either try tracking standard button/link clicks or check if social buttons vendor offers built-in Google Analytics integration.
  • The tracking method I’ve described in this blog post sends the data to Google Analytics as Social Interactions. You won’t see these events in Google Analytics Real-time reports. They will appear in your Social reports (Acquisition > Social > Plugins) after 24-48 hours. If you wish send data as events, I’ll explain that option too. 

CUSTOM HTML TAG – FACEBOOK LISTENER

In order to track clicks of Facebook buttons, we’ll need to create a custom HTML tag in GTM – Facebook listener. As you can guess from its title, it will listen to Facebook LIKE button’s interactions that occur on a website. After listener spots a click, it will fire a dataLayer event.

That dataLayer event is really important – we’ll use it as a trigger to fire Google Analytics tag.

By the way, I have published a ready-made Facebook Tracking Recipe for GTM. Feel free to download it and import to your Google Tag Manager container in no time.

Now, I will explain how Facebook tracking works in detail. Let’s create a Facebook Listener tag in GTM.

Facebook Listener for Google Tag Manager

  • Tag type – Custom HTML
  • Tag title – cHTML – Facebook Listener. cHTML stands for Custom HTML (I like to keep all my tags in order).
  • In HTML field paste the following code (it observes Facebook LIKE button on a page and fires dataLayer event socialInteraction in case of a click):
  • In Triggering section, click the entire block:
    Add trigger to Twitter Listener for GTM
    … and choose Window Loaded trigger. If you don’t have one – create it. A trigger’s configuration should look like this:
    Window Loaded TriggerAssign it to a newly created Facebook Listener’s custom HTML tag.

Why didn’t I choose a regular Pageview trigger? I have noticed that listener occasionally does not work properly if it’s launched in very early stage of page load (when Facebook buttons did not complete loading).

I chose Window Loaded event for a reason. It fires our Facebook listener only when all other scripts on the page (including Facebook LIKE button) are loaded. That way I can be assured that all buttons will be tracked correctly.

However, there’s one but. If your page takes 10 seconds to load all scripts and visitor clicks LIKE button on the 8th second of his/her visit, that interaction will not tracked, because Facebook Listener is not launched yet.

But I chose to live with this drawback, because I don’ expect my visitors to start Liking my content like crazy right after he/she landed on a page.

 

LET’S TEST OUR FACEBOOK LISTENER

Now, let’s use Google Tag Manager’s Preview and Debug mode to find out whether Facebook listener works for us. At the top-right corner of your GTM account, expand Publish button’s options and click “Preview”.

Google Tag Manager Publish Container

Once the preview mode is enabled, navigate to the site where the form is published and you will see a debug console at the bottom of your browser showing detailed information about your tags, including their firing status and what data is being processed.

This console window will appear only on your computer as you preview the site, and is not visible to your other website visitors. It should look like this:

preview and debug console

First, check whether Facebook Listener fired on Window Loaded event. On the left side, click Window Loaded. It should look like this:

Facebook listener fired in GTM

Then click LIKE button on that very same page and look for socialInteraction event in Preview and debug panel, like in the screenshot below:

Social Interaction Preview and Debug Mode in GTM

That’s it! Our Facebook listener in Google Tag Manager works! Now proceed to the next step.

 

CUSTOM TRIGGER

Now we should create a GTM trigger which recognizes dataLayer event socialInteraction. It’s crucial for our Google Analytics tag to work.

In Google Tag Manager, go to Triggers and hit New. Create a trigger with the following settings:

Social Interaction Custom Trigger in GTM

THREE VARIABLES

As you already know, when Facebook button is clicked, Facebook Listener creates dataLayer event. What you might not know, that it also provides additional data:

socialInteraction dataLayer event in GTM preview and debug mode

See socialNetwork, socialAction and socialTarget? We can pass that data to Google Analytics. But first we need to create 3 variables in GTM (otherwise Google Tag Manager won’t recognize these data points).

Open Variables in GTM account and create 3 variables with the following settings:

Twitter Listener dlv

In case you’re wondering what does dlv mean in title of every variable – it’s Data Layer Variable. I like to keep my tags, triggers and variables in order. It makes work with GTM much easier.

 

GOOGLE ANALYTICS TAG

Final step – create Google Analytics tag. It will fire only when the following sequence is complete:

  1. Window Loaded event occurs.
  2. Custom HTML Facebook Listener tag fires.
  3. Visitor clicks LIKE button.
  4. Facebook Listener spots the click and creates socialInteraction dataLayer event.
  5. Trigger socialInteraction fires and launches Google Analytics tag.

All steps are required and must be completed in this exact order.

Go to Tags in GTM and hit New button. Choose Universal Analytics Tag type and add the following settings:

Google Analytics Social Interaction

As you can see, all three variables are used as Network, Action and Action Target values in Google Analytics Event tag. Since I used Social track type, all LIKE button’s interactions will appear not in Events reports, but rather in Acquisition > Social > Plugins.

Feel free to change track type to Event, if you wish. In that case you’ll be able to see events in GA Real-time reports.

If you’re wondering why I entered {{Constant – GA UA}} in Tracking ID field, read this post by Google about user-defined constant variables and why you should always use them.

 

FINAL TEST

If you chose Social as Google Analytics Track Type, the data will appear within 24-48 hours in Social Plugins report (Acquisition > Social > Plugins).

If you chose Event as Google Analytics Track Type, then use Google Analytics Real-time reports to see whether Facebook LIKE button clicks are passed correctly to GA.

 

DID YOU KNOW?

In addition to this Google Tag Manager Facebook guide, I have also prepared ready-made GTM templates which allow you to track Twitter Tweets, Pinterest Pins and Linked In shares on your website. Give them a try as well!

2. FAcebook Pixel + GOOGLE TAG MANAGER

Facebook pixel Googe Tag Manager

The 2nd chapter of this Google Tag Manager Facebook guide is dedicated to remarketing. And that’s where Facebook Pixel comes in handy.

If you have used Twitter or Google ads, then you’re probably already familiar with how remarketing works. If not, here’s a quick overview:

Once you place a snippet of Facebook’s code on your website, visitors will get a 3rd party cookie (from FB). That very same cookie is used in Facebook’s ad engine to recognize people who have visited your site and retarget them with your ads.

Moreover, you can pass additional events (for example “Visitor added products to cart”) and this way target ads according to those actions/conversions). More about this – in the next chapter.

It’s April, 2017,  and there is no ready-made Facebook tag template in Google Tag Manager yet, so you’ll need to use Custom HTML tag in order to place the code on your website. But first, make sure you create Facebook Business Manager account (if you don’t have one).

After you’ve created it, click menu icon in top left corner and choose Pixels (under Assets).
Facebook ads manager menu

You’ll be prompted to create a pixel. A page should look like this (remember, Facebook often updates Business Manager’s user interface, so there’s a chance you’ll see a slightly different view. But do not panic and follow Facebook’s instructions):

Create Facebook pixel

After Pixel is created, you’ll get a piece of code, like this one (except XXXXXXXXXX part which contains your unique Pixel ID):

That’s Facebook Pixel (a.k.a. Facebook Remarketing) code which needs to be added to every page of your website.

Quick side note: Facebook Pixel code includes a “noscript” component. Noscript means that if Javascript is disabled in the browser, an image pixel would be loaded directly via GTM’s noscript iframe. However, noscript tags will not fire within a GTM Custom HTML tag.

If you REALLY want to fire Facebook Pixel in browser with disabled Javascript, you’ll need to load this within a custom image tag. Just take the URL from <noscript> part’s src attribute, e.g. https://www.facebook.com/tr?id=XXXXXXXXXXXXX&ev=PageView&noscript=1 and paste it in Custom Image tag (in Google Tag Manager).

custom image tag - Google Tag Manager Facebook

You’ll need to create a separate Custom Image tag for every Facebook event you want to track. But remember, this is optional. You can simply ignore browsers with disabled Javascript and skip <noscript> parts. Keep in mind, that people with Javascript disabled can’t properly use the majority of websites. End of Quick side note.

Anyway, let’s get back to our our Facebook Pixel’s Tag. First, you’ll need to create a constant variable for Facebook Pixel ID (because we’ll need to use it in multiple tags within GTM). In my blog post Google Tag Manager Best Practices, check tip No. 6 – it explains why it’s necessary to utilize constant variables in every GTM container.

In your Pixel code snippet, look for the following line of code:

See that XXXXXXXXX? That’s your Pixel ID. Keep in mind that your ID will be a string of random numbers (I’m just replacing real ID with X letters).

Now, open GTM account, go to variables and create a new user-defined variable with the following settings:

Constant variable Facebook Pixel ID

After that, let’s get back to our Pixel tag. In Google Tag Manager account, go to Tags and create new tag with the following settings:

  • Type – Custom HTML.
  • Title – Facebook Pixel.
  • In HTML field paste Pixel’s code.
  • In Triggering section, choose All pages.
  • Hit Save.

Don’t forget to enable Preview and Debug mode in GTM and check whether Facebook Pixel tag has fired. In P&D panel (at the bottom of the screen) click Page view event and look for Pixel tag there (in case you didn’t know, All Pages trigger means All Page View Events).

Facebook Pixel in Google Tag Manager Preview and Debug mode

 

The best way to check whether data was successfully passed from Pixel to Facebook’s servers is to use Chrome extension – Facebook Pixel Helper. You can read more about it in the official Facebook knowledge base.

Done! You have installed Facebook Pixel with Google Tag Manager. From now on, all visitors of your website will receive a 3rd party cookie from Facebook, thus your remarketing audiences will grow. When those visitors with cookies browse Facebook, they’ll see your ads.

What I really like about Facebook audiences, is that you can easily share your audiences with others. This way you can get access to your partners’ lists and target them with your ads.

No personal data is shared so there’s no need to be worried about privacy issues.

 

Track Single Page Applications/Websites with Facebook Pixel

If you’re working with a single-page app/website, chances are website’s URL contains a hash mark #. As a result, all your page view events are pretty much useless because everything after the # is lost. I have published a guide which tackles this problem and offers a pretty robust solution, How to track single page apps with Facebook Pixel and GTM.

As I have mentioned in the beginning of this chapter, you can take Facebook marketing even further by implementing Facebook conversion tracking with Google Tag Manager. Learn more about it in the next chapter.

3. Facebook CONVERSION TRACKING WITH GOOGLE TAG MANAGER

Facebook Conversion Tracking Googe Tag Manager

The 3rd and final chapter of the Google Tag Manager Facebook guide will cover conversion tracking. If you’re familiar with Twitter conversion tracking setup process via Google Tag Manager, with FB it is pretty similar. All you need to do is:

  1. In Facebook Business Manager, create a Facebook Pixel, copy its code (Done! – It’s described in the previous chapter).
  2. In Google Tag Manager, create Custom HTML tag and paste Facebook Pixel’s code (Done! – I have described it in the previous chapter).
  3. Create additional event tags which send interaction data to Facebook. That data will be used to create more precise remarketing audiences.

To optimize and measure Facebook ad campaigns, you need to track important events on your website and send that data to Facebook.

Those “important events” (in Facebook documentation and interface) are called Standard events. Currently there are 9 supported types of events:

List of Standard Facebook Events

When important event occurs on your website, you have to fire a separate piece of code in addition to your Facebook Pixel tag, so that you can measure when someone submits a form, clicks a button or makes a purchase.

You can later use those events to build audiences with custom combinations, e.g. “Show ads to those people who Added product to their cart in last 30 days. 

Create custom combination Facebook Conversion Tracking

You can even go one step further by mixing several events in one remarketing audience, e.g. show my ads to those who added product to cart and visited certain pages but did not make a purchase.

The sky is the limit.

 

Adding Standard Facebook Pixel Events with Google Tag Manager

For every interaction you want to track with Facebook, you’ll need to create a separate GTM Custom HTML tag with few lines of code. For example:

Few things I’d like to mention:

  • Make sure that Facebook Pixel tag (mentioned in chapter No. 2 of this blog post) fires before any Facebook event tag. The best way to do that is to set higher priority to Pixel tag.
  • With Google Tag Manager, I can easily insert any variables which transfer information from your website (depending on context) to Facebook. As you can see in the code example above, with Lead type of event (when visitor subscribes to newsletter) I also transfer form’s position which is dynamically inserted via Data Layer variable {{dlv – formPosition}}.
    Very useful: check out this list of all available data attributes that can be passed along with Standard Facebook Events.
  • Content_name, content_category and other attributes are not required in event code, but they give you better understanding which lead generation forms perform better. If you don’t want to track such specific data, basic event code will do just fine:

To give a better understanding of Facebook Standard events, I’ll give you brief explanation of each one of them.

 

Facebook Standard EVENT – VIEW CONTENT

If you’re tracking visitors on a blog, ViewContent Facebook event should fire when visitor navigates to a blog post page. If you’re the owner of e-commerce business, then your content is a product page. Sample tag could look like this:

Viewed content Facebook Pixel Tag In Google Tag Manager
Trigger’s (that I used for this Custom HTML Facebook tag) settings are:

  • Title – Pageview – Viewed Blog Post.
  • Type – Pageview.
  • This trigger fires on – Some Page Views
  • Rule – Page Path starts with /post/, because all posts in my blog contain “/post/” in URL., e.g. https://www.analyticsmania.com/post/google-tag-manager-facebook/.

 

Facebook Standard EVENT – SEARCH

When a visitor uses search on my blog, page’s URL changes to analyticsmania.com/?s=search_query. So for Facebook Search Tag I’ll use trigger with the following settings:

  • Title – Pageview – Used Search.
  • Type – Pageview.
  • This trigger fires on – Some Page Views
  • Rule – Page Path starts with /?s=

Keep in mind, additional parameters (i.e. search_string) are optional. This applies to all Facebook events.

 

FAcebook Standard EVENT – ADD TO CART

If you own an online store, then this event is pretty important in order to measure sales funnel. Every e-commerce platform is really different, so it’s impossible to describe a standard method how to track Added to cart  event.

The most robust solution would be to ask developer to send this interaction as a dataLayer event. Then you could catch that event with Google Tag Manager and use it as a trigger which launches AddToCart Facebook Event.

Read this blog post to find out how you can use Data Layer Events as Triggers.

 

Facebook Standard EVENT – ADD TO WISHLIST

The issue is pretty similar to Add To Cart events – it’s impossible to write a solution that fits all online stores. The most robust solution is to ask developer to send this interaction as a dataLayer event.

 

Facebook Standard EVENT – INITIATE CHECKOUT

If your checkout process consists of more than one step, then usually step 1 has some unique string in the URL, e.g. sampleshop.com/checkout/step1/some_other_stuff. In that case you can use Pageview Trigger with the following rules (remember – it’s only an example. In your case Page Path might be different):

  • Title – Pageview – Initiated Checkout.
  • Type – Pageview.
  • This trigger fires on – Some Page Views.
  • Rule – Page Pats contains /checkout/step1/

 

Facebook Standard EVENT – ADDED PAYMENT INFO

There are two most common scenarios how we can identify that visitor entered payment information:

  • Either he/she visited a particular page with unique URL. Then, you should use Pageview trigger (like I have described InitiateCheckout tag).
  • Or the URL does not change when payment info is entered. In that case – ask developer to send dataLayer event, whenpayment information was successfully saved. Actually, I’d ask to add two events: 1. User started entering payment information. 2. User successfully entered information. This way I could see how many people bounced off my checkout process in this step.

The same principle (Pageview or Data Layer event) can be also applied to the following Facebook Standard events:

  • Purchase.
  • Lead (a.k.a. signup).
  • CompleteRegistration.

It’s important to mention that Purchase Facebook event requires additional data (Currency and Value). Here’s a sample code:

Very useful information:  I highly recommend reading my guide of 5 form tracking methods with Google Tag Manager. It will be especially useful if you’re want to track Lead or CompleteRegistration Facebook events. Chances are you won’t need developer’s input at all when it comes to tracking form submissions.

When you set up all Facebook tags, do not forget to test them:

  • Utilize GTM’s Preview and Debug mode to see if tags fire when they suppose to.
  • Also use Chrome plugin – Facebook Pixel Helper.

 

Facebook Custom Events

Also, Facebook lets you send any event name you want and any number of key/value combinations you want. Basically, they created an ability to push your entire dataLayer to their platform.

Do you want to create a Facebook audience based on user’s pricing plan or amount of the last payment? No problem. Just use trackCustom method. It works the same way as aforementioned methods, expect you can define your own title, parameters and values.

Say, I own a website a SaaS business and my website contains a pricing form. Visitors can enter their number of subscribers (because pricing of my SaaS depends on the size of subscribers list) and then the form calculates the price.

When the price is calculated, the form GTM fires a custom HTML tag with Facebook Custom Event called usedPricingForm with 2 parameters: pricingRange and numberOfContacts. 

 

If a visitor used my pricing form (calculator), he is probably interested in my SaaS’ services, right? I could then create a FB remarketing audience based on usedPricingForm event and even create different ads based on visitors’ pricing range.

If you wish, you can add 5 or even 10 additional parameters to your custom events. To be honest, I am not aware of the actual limit of custom parameters. Surely, there is one, but I was a bit lazy to test 🙂

 

Facebook CONVERSION TRACKING: THINGS TO KEEP IN MIND

  • It may take up to 24 hours for data to appear in Facebook Business Manager dashboard (but usually it’s processed faster).
  • Minimum size of an audience is 20. So you can start remarketing much faster, compared to Google Adwords, where minimum list size is 100 for Google Display Network and 1000 for Google Search.
  • Before you start tagging, prepare a measurement plan – a list of what you really need to track. It will bring more transparency, help you plan ahead and avoid inconsistency problems.
  • Test, test, test before publishing – devil is in the detail. One tiny mistake can lead to huge problems.

I will not go into details how to setup the actual ad campaign in Facebook. So if you’re new to this, go check out Impact’s blog post.

Other useful resource to keep in mind is Facebook Pixel Implementation Guide (by Facebook).

 

GOOGLE TAG MANAGER Facebook GUIDE: CONCLUSION

You can do a lot of awesome stuff with Facebook and Google Tag Manager.

In this Google Tag Manager Facebook guide I have explained how you can take your Facebook marketing to the next level:

  • Track clicks of Facebook’s LIKE button and send these events to Google Analytics. This way you’ll see your best performing content.
  • How to add Facebook Pixel to a website with help of Google Tag Manager.
  • How to track various events and send conversion data with Custom HTML tag in Google Tag Manager. You can later show ads based on visitors’ actions on your website – just like in Google Adwords or Twitter Ads.

Did I miss something in this blog post? If yes, let me know in the comments!

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Julius Fed

Head of Developer Operations at Omnisend. I am highly interested in Google Tag Manager, Google Analytics, Adwords, Email marketing, Email Deliverability, Digital Marketing in general. You can follow me on Twitter.