Facebook Pixels build Custom Audiences from the traffic on your website. But what is the Facebook Pixel that makes it possible? And how can you set it up in Google Tag Manager?

Pixel problems are among the most common issues in our customer support chats and the most searched for topics in our support center, so we thought we’d share this guide with a broader audience for non-developers.

It’s useful to add Facebook Pixels to your site even if you’re not planning to use Retargeting or Dynamic Product Ads.

This guide is in two parts of it. First, we’ll go over how to set up your Facebook Pixel in the Google Tag Manager to track traffic from all pages of your website. 

Then we’ll explain how you can conduct sophisticated re-targeting by building audiences based on user behavior along your shopping funnel. It will allow you to sell and upsell Dynamic Product Ads.

This guide assumes that you have Google Tag Manager installed and that you have a DataLayer on your website. DataLayer is a container for data that you want to process and forward from your website to external applications, such as Google Tag Manager

If your site doesn’t have one yet, you need to talk to your developers. You can find answers to the most frequently asked questions about the Google Tag Manager and a developer guide.

Installing the Pixel on Facebook

The Facebook Pixel code is a short JavaScript with an advertiser-specific pixel ID. If you don’t already have a unique pixel ID, you can find it in Ads Manager. Check out the Facebook Pixel Implementation Guide for more information on the pixel.

Once you have found your pixel or pixel ID:

Facebook Pixel process

Now, all you need to do is click Publish to the top right to publish your Facebook pixel on all pages of your website. You can use the Chrome Plugin Facebook Pixel Helper to check that the pixel is working correctly. Now you’re all set to start collecting custom audiences and lookalike websites.

Adding Dynamic Product Modifications

You need to create three more tags in your Google Tag Manager if you want to create more sophisticated audiences, such as “people who’ve added products to their cart for the last seven days but haven’t bought them.” These three new tags will allow you to track when people on your site view a product, add products to your cart, and purchase products.

Adding these DPA pixel changes is a four-step process:

Dynamic Product Modifications

Find variable name

First, you need to find the names of the variables used on your website. We’re looking specifically for the names that your developers used to identify:

google tag manager classes in Facebook pixel

Open your site using Google Chrome and browse any product details page. Right-click anywhere on the page, then select “Inspect.” Switch to the Console tab; type “DataLayer” Browse the Objects to find names for variables. 

Your variables are likely to have different names. 

Connect your data layer variable to the Google Tag Manager

Now that you have identified your dataLayer variables using Google Chrome, you need to connect them to the Google Tag Manager. The matching is done in the Variables section.

This example uses the Mountainise naming convention, where click id = productId from the dataLayer, but you can map it using any protocol you like.

Creating variable in google tag managerVARIABLES IN Google tag manager

Repeat these steps for all variables to send more information to the pixel about product prices, categories, currencies, and the stage of the purchase of the active status of users. 

You’ll end up with a list of user-defined variables:

Google tag manager classes

Test: You can select ‘Preview and Debug’ to change your browser to make sure everything works fine before you publish it. Go back to your website and close the Inspection Tool. Please refresh your browser to see the Google Tag Manager preview. Variables should now be assigned values from your website.

Create Triggers Based on Path and Variables Names

  • View Content
  • Add To Cart
  • Purchase
Create Triggers Based on Path and Variables Names

Now that you have matched the variables on your website to those in the Google Tag Manager, you can create triggers based on the point in the “path” i.e., the sales funnel (1: viewed product, 2: added to the cart, 3: purchased).

Repeat this process for the other two triggers, rename the triggers in Step 2 as “AddToCart” and “Purchase” and change which page they fire on in Step 5 accordingly.

You should end up with three triggers in the Google Tag Manager, 

Add the Pixel Modifications

If you’ve done everything right so far, this will be the most natural part of it

facebook Pixel code

Repeat this process with the other two steps in the funnel, replacing ‘ViewContent’ in steps 2, 4, and 6 with ‘AddToCart’ and ‘Purchase.’

You can test that you did this correctly with Preview and Debug in Tag Manager. Open your Chrome website and reload your page. Then, from the Google Tag Manager preview, take a look at Tags Fired on this page. Check from the Facebook Pixel Helper plugin that pixel events are in place.

Your audiences will be updated in almost real-time once a visitor to your site matches the rules of the Audience. So you can start redirecting your website visitors dynamically using DPA in a matter of minutes.

If you have any queries or questions regarding anything. Mountainise is a digital marketing agency. Equipped with decades of experience and AI-based marketing tools, we are building optimal campaigns and putting our customers ahead of their competition. Please feel free to contact us