Upgrade your Facebook Custom Audience Pixel to the new version with Google Tag Manager?

Recently Facebook has upgraded their custom audience pixels and conversion tracking pixels which are used by a lot of businesses. Businesses use these pixels to track their users and do a better targeted marketing. Now with the update, a single Audience pixel is enough to do both your tasks. The blog post of Facebook says the new facebook custom audience pixel is 3 times faster and the server response time should be less.

In this post let us see how to upgrade your old pixels to new pixel with the use of Google Tag Manager. If you are not using Google Tag Manager, that’s okay. You can still follow this guide to understand the process involved in upgrading the pixel.

Find your Facebook Custom Audience Pixel ID

To upgrade your pixel all we need to know is your Pixel ID. There are two ways you can do this. You can go to your Ads Manager, open the Audiences section and open your custom audience pixel. You can note down your Pixel ID from the panel. You can see the below pictures to know how to get the Pixel ID.

facebook-ads-manager-location

facebook-ads-audiences-location

facebook-audience-pixel

facebook-pixel-id-ads-manager

 

You can get your Pixel ID in the above mentioned way. The other way to get your Pixel ID is by installing Facebook Pixel Helper extension on your Chrome browser. This is the easiest of both the methods. Once you have added the extension, open your website. The FB Pixel Helper extension will identify the Facebook pixels that are present on your website as shown below.

facebook-pixel-helper

 

Upgraded code for your Facebook Custom Audience Pixel

The below code is the upgraded version of the facebook custom audience pixel you need to place on your website. Replace the Pixel ID with yours.

Implementing the Pixel using Google Tag Manager

Create a custom HTML Tag. Paste the above code into it and select All pages as your firing rules. Save and Publish the changes. That’s all, you are done.

facebook custom audience pixel google tag manager custom html tag

 

You have successfully implemented the Base tag on all your pages. Now you can remove the old code present on your website.  Using the FB Pixel Helper extension you can check whether the pixel is firing or not.

Conversion Event Tracking

With the upgrade we can now track 9 different events on the page mainly catering e commerce businesses needs.

  1. ViewContent – used to track key page views like Product Detail page, a custom landing page etc.
  2. Search – to track the search events happening
  3. AddToCart – when a product is added to the shopping cart, you can use this method to track the event
  4. AddToWishlist – when a product is added to wishlist you can use this method
  5. InitiateCheckout – when the user has initiated the checkout process by clicking the checkout button
  6. AddPaymentInfo – when the payment information is added in the checkout process
  7. Purchase – when a successful order is placed
  8. Lead – any kind of lead that happens on the site
  9. CompleteRegistration – when a successful registration is completed. eg: newsletter sign up or a new user sign up etc.

You can read more about the above events and the attributes that can be passed for each of these events here in the Facebook documentation.

Example for how to track this event using Google Tag Manager

Once the base tag is placed on all the pages of the website, it will create a window level object called “fbq”. To do any kind of custom event tracking we will be accessing this object and send the necessary data. Since storygag is a normal content website, I will take the example of a search event.

Create a custom HTML Tag with the below code

Let’s dissect the code line by line. In the first line we are defining a variable called “searchString” which takes up the value of Input box used for Search. The second line starts with “fbq”, the Facebook object. Inside this object the first parameter asks the facebook object to make a call. The second parameter says the kind of event it has to trigger. In this case, it’s a Search event. The third parameter is an object where you can pass Search parameters. Value and Currency are passed to calculate the Cost per action which is useful to calculate your ROI of facebook ads. The parameter search_string is where you pass the search term.

So, the tag looks like this. For triggers, we will be using Form option as shown in the below picture

facebook custom audience pixel search event google tag manager custom html tag

 

And configure the form trigger as required. In present scenario, the form on Storygag doesn’t have a unique id. So, I used the class name to configure the trigger. This needs to be configured based on your website.

google tag manager form submit trigger - 2

 

Save the trigger. Save the tag and publish it. You are done.

Now, you can test your website to check whether the event is firing or not, when you perform a search. I use Chrome in built Developer tools for this purpose. To open Chrome developer tools, press F12. Navigate to Network tab and enter the filter as facebook.com/tr. Don’t forget to check “Preserve Log” option.

facebook custom audience pixel search event

 

You can see the tag firing properly and sending the data as expected. You can try out this for other events as well. The best thing about this implementation is you can separate the base tag pixel and the event tracking. Also you can Fire these events only on the desired pages which will remove overhead on other pages where it is not needed.

So, that’s all folks. Let me know if you are facing any problems implementing this.

You can read this guide to implement the Standarad Events on top of the above Facebook custom audience pixel base tag.

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!