💡 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:

1. Find the variables in your dataLayer
2. Define your dataLayer variables on GTM
3. Create triggers on GTM to fire the Pixel events
4. 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

In our example

ℹ️ 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).

1. Go to Google Tag Manager
2. Go to Variables
3. Create a new variable (User-Defined Variables)
4. Rename it content_ids (case sensitive)
5. Select Data Layer Variable
6. Copy paste the name of the variable you found on your dataLayer (pid in our example)
7. Keep Version 2
8. 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.

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

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

1. Go to Google Tag Manager
2. Triggers
3. New
4. Rename to "Trigger - ViewContent"
5. Choose *Page view*
6. Configure trigger type = Window Loaded (this is to make sure it loads after the variables)
7. 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.
8. 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

1. Enable Click Classes in the GTM variables

2. 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.

   Add to Cart

3. 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.io 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.

1. Go to GTM
2. New tag
3. Rename it Dynamic Ads - ViewContent
4. Select Custom html
5. Paste this code

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

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

Same for Dynamic Ads - AddToCart

<!-- Facebook Dynamic Ads Modification Pixel Code by Smartly.io  -->
<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.io  -->
<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.io  -->
<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.io  -->
<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?

1. Preview and Debug
2. Open your website with Chrome browser
3. Reload the page
4. From the GTM preview, check Tags
5. Tags Fired on This page
6. 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.io 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