Facebook Pixels build Custom Audiences from your website traffic. But, what does the Facebook Pixel enable? What is it really? And how do I set it up in Google Tag Manager?
Problems with pixels are one of the most common issues in our customer support chats and most searched for issues in our Support Center, so we thought we’d share this guide for non-developers with a broader audience.
It’s useful to add Facebook Pixels to your site even if you don’t yet plan to use retargeting or Dynamic Product Ads, because the old conversion tracking pixels will removed in the second half of 2016 and you can start building Custom Audiences for future use.
This guide is in two parts. First, we’ll go over how to set up your Facebook Pixel in Google Tag Manager so that it’s tracking traffic from all the pages of your website. Then, we’ll dive into how to do more sophisticated retargeting by building audiences based on user behavior along your shopping funnel. This will enable you to cross-sell and upsell with Dynamic Product Ads.
Note: This guide presumes that you have Google Tag Manager installed and that you have a dataLayer on your website. A dataLayer is a container for the data that you want to process and pass on from your website to outside applications such as, in this case, Google Tag Manager. If your site doesn’t have one yet, you should talk to your developers. You can find answers to the most frequently asked questions about Google Tag Manager here and a guide for developers here.
Part 1: Installing the Facebook Pixel
Once you’ve found your pixel code or pixel ID:
- Open Google Tag Manager
- From the left menu, click on Tag and Create a new tag
- Rename the tag from Untitled Tag to "Facebook Pixel"
- Choose product: Select Custom HTML tag
- Configure Tag: Click on Configure Tag and paste your Facebook pixel code
- Fire On: Select all Pages
- Create Tag
Now, all you need to do is to click on Publish on the top right to publish your Facebook pixel in all the pages of your website. You can use the Facebook Pixel Helper Chrome Plugin to check that the Pixel is working correctly. You’re now all set to start collecting website custom audiences and lookalikes.
Part 2: Adding Dynamic Product Ad Modifications
If you want to create more sophisticated audiences, such as “people who added products to their cart in the last 7 days but didn't buy”, you need to create three more tags in your Google Tag Manager. These three new tags will let you track when people on your site view a product, add products to a cart and purchases products.
Adding these DPA pixel modifications is a four step process:
- Find the variables on your site
- Connect variables to Google Tag Manager
- Create Google Tag Manager triggers
- Add the pixel modifications
1. Find the Variable Names
First, you need to find the variable names used on your website. We’re looking specifically for which names your developers have used to identify:
- Product ID
- Product price
- Product category
- Product currency
- Phase of the funnel i.e. which phase of the purchase funnel the customer is in: product page, add to cart or purchase
Open your website using Google Chrome and browse to any page with product details. Then right click anywhere on the page and select "Inspect". Switch to the Console tab and type "dataLayer". Browse around the Objects to find variables names. It will look something like this:
Your variables will probably have different names. But in our example case:
- Product ID = productId
- Product price = productValue
- Product category = productCategory
- Product currency = productCurrency
Note: You must find at least the product ID in order to run DPA. The other variables are optional, but they will let you do more sophisticated retargeting.
2. Connect Your dataLayer Variables to Google Tag Manager
Now that you’ve identified your dataLayer variables using Google Chrome, you need to connect them to Google Tag Manager. This matching is done in the Variables section.
This example uses Smartly.io’s naming convention, where smartly_id = productId from the dataLayer, but you can of course map them using any convention you like.
- Go to Google Tag Manager
- Go to the Variables section
- Create a new Variable (User-Defined Variables)
- Rename it smartly_id
- Select Data Layer Variable
- Copy-paste the name of the variables used in your dataLayer (productId in our example)
- Keep Version 2, which is the default option
- Create the variable
Repeat these steps for all the variables to send more information to the pixel about product prices, categories, currencies and which step of the purchase funnel status users are in. Pay attention to steps 4 and 6 to change the values for every variable.
- smartly_category → Product category
- smartly_value → Product price
- smartly_currency → Product currency
- smartly_funnel → Phase of the sales funnel the customer is, this value is in the dataLayer)
You will end up with a list of user-defined variables:
Test: You can select ‘Preview and Debug’ the changes in just your browser before your publish to make sure everything works fine. Go back to your website and close the Inspect-tool. Refresh your browser to see the Google Tag Manager preview. The variables should now have values from your website assigned.
3. Create Triggers Based on Path and Variables Names
Now that you’ve matched the variables on your website with the ones in Google Tag Manager, you can create triggers based on the point in the "path" i.e. sales funnel (1: viewed a product, 2: added to the cart, 3: purchased).
- Go to Google Tag Manager and select Triggers > New
- Rename the trigger "Smartly DPA - ViewContent"
- Choose "Page view"
- Configure the trigger type = Window Loaded (this is to make sure it loads after everything else)
- Fire on = Some Page View
You have 3 main options for how to fire the trigger. Choose between a. (easier) b. (advanced) c. (if you can't use a or b)
- Page Path contains /product/ (change this based on your website URL structure)
- If you can find the dataLayer variable related to purchase funnel, select it
- If you can't select the first two options, try using a CSS selector (advanced)
- Create Trigger
Repeat this process for the other two triggers, renaming the triggers in step 2 as "Smartly DPA - AddToCart" and "Smartly DPA - Purchase" and changing which page they fire on in step 5 accordingly.
You should end up with three triggers in Google Tag Manager, like in the screenshot below:
4. Add the Pixel Modifications
If you’ve done everything right so far, this is going to be the easiest part.
- Create a new tag
- Rename it "DPA - ViewContent"
- Select Custom HTML
- Paste this modified pixel code
<!-- Facebook DPA Modification Pixel Code by Smartly.io -->
<!-- End Pixel Code -->
- Fire on: Select ‘More’
- Select the trigger called "Smartly DPA - ViewContent" from the triggers you implemented in section 3 of this article
- Create Tag
Repeat this process with the other two steps in the funnel, replacing 'ViewContent' in the in steps 2, 4 and 6 with ‘AddToCart’ and ‘Purchase’ respectively.
Test: You can test you did this correctly with Preview and Debug in Tag Manager. Open your website with Chrome and reload the page. Then from the Google Tag Manager preview, look at Tags → Tags Fired on This Page. Check from the Facebook Pixel Helper plugin that pixels events are in place.
Your audiences will be updated in almost real-time once a visitor to your site matches an Audience rule. So you can start to dynamically retarget your website visitors using DPA in a matter of minutes.