One function to rule them all: easily send events to Facebook through Google Tag Manager

Google+Tweet about this on TwitterShare on FacebookShare on LinkedIn

In this post I will show you how to handle and send event data to other analytics services using a single JS function. With this solution you can easily send events to Facebook through Google Tag Manager with Universal Analytics event tags (the event data can be sent anywhere you like, ex. Yandex.Metrika).

send events to facebook through google tag manager using UA parameters: banner

Before we begin

Since I’m going to use Facebook pixel here for demonstration purposes, I’d strongly recommend that you read the official documentation for its usage. Plus, Yehoshua Coren wrote an awesome post explaining some peculiarities of the pixel’s functioning. Be sure to check it!

In my previous post I showed how useful custom JS modules can be for transferring your data to 3rd party services through GTM. So, probably, that guide can also be of value for you.

One event = one custom HTML tag

Yes, you can send events to Facebook through Google Tag Manager by creating a custom HTML tag for each event. In this case the tag may look like this.

Or like this

OK, that is somewhat fine if you have no more than 5-6 events. But what if you want to track 20 different events in order to thoroughly tailor your marketing audience? From a personal perspective, creating 20 custom HTML tags for each event you want to track definitely would not be an option. This is where the approach offered here can stand in good stead for you.

How it works

If you have UA tags firing on those events you want to track in Facebook, you can leverage the hitCallback field and send event data anywhere you like once the your UA tag is finished processing. Thus, there’s no need in creating custom HTML tags and/or additional triggers and/or additional variables since you can use UA event parameters to enrich your event data.

Further in this post I’ll show how you can attach your e-commerce parameters to Facebook event you want to track in GTM.

Implementation guide

Without more ado, let me flesh out the solution.

Step 1

Make sure you’ve correctly implemented Facebook pixel. The code snippet you’ve probably implemented through a custom HTML tag should look something like this:

send events to facebook through google tag manager using UA parameters: pxl1

Please remember that the noscript part won’t fire if the a user has javascript disabled in his/her browser. However, if you really want to track those visitors, you’ll have to use a custom image tag (check Yehoshua Coren’s article for details).

Step 2

Create a custom JS variable with the following content.

Give this variable a descriptive name. It can be something like “sendFBQevent”.

The code above contains extensive comments on each block. I hope this provides enough information on how the function works. However, feel free to drop your questions in the comment section below in case you need even more details.

As you can see, this is simply a JS module making use of fbq global function. One additional note here. There’s actually no need in convertToFBQEvent function as you can track all you events as custom events. But in this case you won’t be able to track conversions in Facebook. So, I guess this one won’t go amiss.

If you want to know how you can add custom parameters to the event (ex. ecommerce products), hop right to this chapter.

Step 3

Add the hitCallback field to each UA event tag that fires on an event you want to track in Facebook and use the variable we’ve just created on step 2 as a value for it.

send events to facebook through google tag manager using UA parameters: hitCallback

Step 4

Preview and debug. If you’ve gone through previous steps correctly, this is the result you should see once your UA event tag fires.

send-events-to-facebook-through-google-tag-manager-hitCallback: example1

I’d recommend testing the solution with different e-commerce funnel steps like productClick, addToCart/removeFromCart, checkOut etc.

Send events to Facebook through Google Tag Manager with UA parameters

Here’s what Facebook dev documentation says about event parameters:

send-events-to-facebook-through-google-tag-manager-hitCallback - fbq dox

Obviously, you can attach any parameters you like. This is how you can utilize enhanced e-commerce parameters with the fbq function

The getEcommerceProducts function is used here for retrieving the content of the e-commerce products array and attaching it to Facebook event. It will return undefined if the event does not contain the products array. You can safely use it for attaching parameters to the event because in case the third argument of the fbq function is undefined it will be ignored.

Naturally, you can attach any parameters you like and send events with this parameters to Facebook through Google Tag Manager (or wherever you like, ex. Yandex.Metrika). Use this code for your sendFBQevent variable (step 2) if you want to send enhanced e-commerce parameters with the event.

If you implement this correctly, this is how you Facebook hit should look like

send-events-to-facebook-through-google-tag-manager-hitCallback- example2

Please note that in case you attach your e-commerce parameters to the event, you should use customTrack argument like this:

Solution’s strengths and weaknesses

Certainly, the solution has its strong and weak points you should be aware of. Let us start the weaknesses.

Weaknesses

1. Obviously, if the UA event tag fails to fire, the event won’t be sent to other services either. However, you can try attaching a custom HTML tag containing the fbq event code as a clean-up tag to your UA tag. Please mind that in this case you’d need to check if the UA event tag has been fired. In not, then you should run the code in the HTML tag.

2. You need to have a UA tag firing for each event you want to track.

3. The approach described in this post works best with custom dataLayer events (addToCart, productClick, cartView etc), so if you want to get most of it, use it with these kind of events.

Now, let’s review solution’s strong points that, in my opinion, overweight the weaknesses above.

Strengths

1. No need to create a bunch of HTML tags

2. Easy to implement/use

3. An opportunity to automate event tracking process for services like Facebook

4. This solution will work for ANY service you choose (since it’s a JS-based solution)

5. You can view your analytics data elsewhere in case you’re having problems accessing/giving access to your GA property.

Summary

As always, feel free to ask your questions on the method in the comment section below or drop me a line on Google+ or write me a letter to info[at]dmitriilin.com.

Google+Tweet about this on TwitterShare on FacebookShare on LinkedIn