💡 In Part 1, we covered how to Install the Meta Pixel using Google Tag Manager (GTM). In this article you will learn how to install the Pixel modifications to successfully run Dynamic Ads campaigns. If your website has a dataLayer, this will take around 10-20 minutes.

Part 2: Installing the Pixel modifications for Dynamic Ads

This is what we are going to do:

Find the variables in your dataLayer
Define your dataLayer variables on GTM
Create triggers on GTM to fire the Pixel events
Add the Pixel modifications for Dynamic Ads

1) Find your Variables Names

Every website uses different names for the variables defining product id, price, category, currency and the stage of the funnel. So first we need to find the names used in your website.
You can:

Ask your developers or tech team to help you
Do it yourself

How to do it yourself

Open your website using the Chrome browser
Browse to your Search page, Category page, Product page, Add to cart page or Thank you page
Right-click anywhere on the page and select Inspect
Switch to the Console tab and type "dataLayer"
Browse all the Objects to find the names of your variables

Screen_Shot_2016-06-08_at_16.38.25.png

In our example

dataLayer	Google Tag Manager
(you might have different names)	(these are the official Facebook parameters)
pid	content_ids*
price	value
category	content_category
currency	currency
pageType	funnel_step
keyword	search_string

ℹ️ Note: You need at least to run Dynamic Ads Campaigns. The other variables will let you run more sophisticated retargeting, but they are optional. Currency can also be defined as a static value.

What if I have nested variables in my dataLayer?

In case the variable in the dataLayer is nested, you should call it in Google Tag Manager in the following form:

content_ids = articles.0

2) Connect dataLayer variables to Google Tag Manager

Now that you have identified your dataLayer variables, we need to define them in GTM.

Let's start by creating on GTM a new variable called content_ids and assign the value from your dataLayer variable (pid in our example).

Go to Google Tag Manager
Go to Variables
Create a new variable (User-Defined Variables)
Rename it content_ids (case sensitive)
Select Data Layer Variable
Copy paste the name of the variable you found on your dataLayer (pid in our example)
Keep Version 2
Create the variable

Repeat these steps for all the variables in your dataLayer to send more information to the Pixel (price, category currency, purchase funnel stage), paying attention to point 4 and 6 and changing variable name and variable value.

content_category
value
currency
funnel_step (stage of the client in the funnel, search, product, cart....this should be different and unique on every stage of the funnel)
keyword (you should find this on your search results page)

About the funnel: this is optional but also very useful variables indicating the stage in the purchase funnel. Open all object of the dataLayer and try to find one that could indicate this.

You will end up with this

Can I preview the changes before publishing them?

Before publishing your changes you can always decide to preview the changes. GTM lets you preview any change you make so that you can check that everything is all right before publishing it on the website.

On GTM, click on Preview and Debug
Go back to your website
Close the Inspector
Refresh the browser to see the Google Tag Manager preview
Variables should have the value assigned

3) Create Triggers to fire the Pixel events at the right time

Go to Google Tag Manager
Triggers
New
Rename to "Trigger - ViewContent"
Choose *Page view*
Configure trigger type = Window Loaded (this is to make sure it loads after the variables)
Fire on = SomePage View
You have three main possibilities for fire the trigger
a) Page Path → contains → /product/ (change this based on your website structure)
b) Funnel_step : If you can find the Data Layer variable related to the funnel, select it funnel_step → contains → thankyoupage
c) If your shopping cart doesn't open on a separate page you can use Click Classes to fire the right event.
Create Trigger

If you can identify pages with a different path:

if your dataLayer passes a "funnel stage" variables.

If you need to deal with a cart that doesn't open in a new window

Enable Click Classes in the GTM variables

Find the class in your Add to card button Right click on the Add To Cart button and select Inspect. Now look at the HTML code and find the name of the class. In our example class="AddToCart" so AddToCart is the value we are looking for.

Build the trigger

Now do the same for the two remaining triggers

4. Rename to "Trigger - AddToCart"
7. Identify the right condition

4. Rename to "Smartly Dynamic Ads - Purchase"
7. Identify the right condition

You should end up with following triggers (Search and ViewCategory are optional)

Trigger - Search
Trigger - ViewCategory
Trigger - ViewContent
Trigger - AddToCart
or Trigger - AddToCart on Click
Trigger - Purchase

4) Add the Pixel events

This is going to be the easiest part.

Screenshot_2016-06-09_14.27.21.png Screenshot_2016-06-09_14.27.30.png

Go to GTM
New tag
Rename it Dynamic Ads - ViewContent
Select Custom html
Paste this code

<!-- Facebook Dynamic Ads Modification Pixel Code by Smartly  -->
<script>  
fbq('track', 'ViewContent', {
  content_ids: ['{{content_ids}}'],
  content_category: ['{{content_category}}'],
  value: {{value}},
  currency: '{{currency}}',
  content_type: 'product'
});
</script>
<!-- End Pixel Code -->

Click Continue
Fire on // Select More
Select the trigger called Trigger - ViewContent (you created it in section 3 of this article)
Create Tag

Same for Dynamic Ads - AddToCart

<!-- Facebook Dynamic Ads Modification Pixel Code by Smartly  -->
<script>  
fbq('track', 'AddToCart', {
  content_ids: ['{{content_ids}}'],
  content_category: ['{{content_category}}'],
  value: {{value}},
  currency: '{{currency}}',
  content_type: 'product'
});
</script>
<!-- End Pixel Code -->

Same for Dynamic Ads - Purchase

<!-- Facebook Dynamic Ads Modification Pixel Code by Smartly  -->
<script>  
fbq('track', 'Purchase', {
  content_ids: ['{{content_ids}}'],
  content_category: ['{{content_category}}'],
  value: {{value}},
  currency: '{{currency}}',
  content_type: 'product'
});
</script>
<!-- End Pixel Code -->

If you want to also add Search and ViewCategory

Dynamic Ads - Search

<!-- Facebook Dynamic Ads Modification Pixel Code by Smartly  -->
<script>  
fbq('track', 'Search', {
  search_string: ['{{search_string}}'],
  content_ids: ['{{content_ids}}'],
  content_category: ['{{content_category}}'],
  value: {{value}},
  currency: '{{currency}}',
  content_type: 'product'
});
</script>
<!-- End Pixel Code -->

Dynamic Ads - ViewCategory

<!-- Facebook Dynamic Ads Modification Pixel Code by Smartly  -->
<script>  
fbq('track', 'ViewCategory', {
  content_ids: ['{{content_ids}}'],
  content_category: ['{{content_category}}'],
  value: {{value}},
  currency: '{{currency}}',
  content_type: 'product'
});
</script>
<!-- End Pixel Code -->

Does it all work?

Preview and Debug
Open your website with Chrome browser
Reload the page
From the GTM preview, check Tags
Tags Fired on This page
Check with Pixel Helper that the Pixel's events are in place

The error only tells that you don't have any Dynamic Ads campaign running at the moment connected to this product catalogue. Just go to Smartly and start your first Dynamic AdsDPA campaign!

What if it doesn't work?

PRO TIP: Share the preview link with us so we can help you to debug it