Setting Up Dynamic Remarketing in GTM Without a Developer
Often, to attract traffic, an online store uses several remarketing systems at once, such as Google Ads, the Facebook pixel, VK, myTarget, and so on.
For dynamic retargeting to work, you have to set up the transfer of data from the site to each system about product page visits, add-to-cart actions, completed checkouts, and other actions.
I’ll show you how to do this without involving a developer every time. As an example, we’ll set up dynamic retargeting in myTarget.
We’ll need Google Tag Manager (hereinafter GTM) with the transfer of enhanced ecommerce data to Google Analytics (hereinafter GA) already configured. If you haven’t set up enhanced ecommerce yet, you’ll easily find plenty of articles on this topic online.
Why all this?
You may already have a question: “Why is this needed? Let the developer figure it out…”
Yes, a developer can set everything up themselves, but that comes with downsides:
- You’ll have to give the developer a separate task for each remarketing system and wait for it to be implemented.
- If you don’t have your own developer, then every task for an external developer will require additional payment.
- Each individual counter code will receive its own data about products and orders. And it’s far from guaranteed that the developers will set everything up identically for all systems. You’ll have to spend a fair amount of time monitoring the data being transferred.
These are exactly the problems we’ll avoid with GTM. We’ll take the data passed to GA and send it to the remarketing system counters we need.
Let’s dig a little deeper into how GTM collects data, so we can implement this.
dataLayer in GTM
All data about page visits, viewed products, and any user actions on the site is placed in the GTM code into a data layer variable named dataLayer.
For example, on a product page with enhanced ecommerce configured, the dataLayer variable contains:
dataLayer.push({
'ecommerce': {
'detail': {
'actionField': {'list': 'Apparel Gallery'},
'products': [{
'name': 'Triblend Android T-Shirt',
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray'
}]
}
}
});As you can see, in this example dataLayer includes the product properties passed to GTM: product name (name), product ID (id), price (price), and so on, as well as information about the user’s action: in our case, this is viewing the product page (detail). For more details about the contents of dataLayer, see the GTM guide.
It’s precisely from dataLayer that we’ll pull data about products and orders in order to pass it to myTarget.
Setting up retargeting in myTarget
According to the myTarget documentation for dynamic retargeting, you need to implement the transfer of the product id and product price into its counter when a product page is viewed.
To do this, we’ll create two new variables in GTM, in which we’ll separately collect the product ID and its price. Then we’ll add references to these variables in the myTarget counter code and specify the triggers that fire the counter.
Now in more detail.
First, in Tag Manager, go to the “Variables” section and create a new variable (the “New” button).
In the variable configuration, we specify the “Data Layer Variable” type and name this variable. In this case we’re configuring the transfer of ID data, so we name the variable ProductID.
The Data Layer Variable type means that we’re accessing the contents of dataLayer (pulling the product id out of it).
In the “Data Layer Variable Name” field we write the string “ecommerce.detail.products.0.id” and click Save:
So, now in the list of variables we have one additional variable, ProductID:
Using this technique, you can simply replace “id” with the name of any other variable from the code above (name, variant, etc.) to write the value of that variable into the variable created in GTM.
For example, to get the price I’ll use the string “ecommerce.detail.products.0.price”.
Similarly, I add a variable with the price and name it ProductPrice.
Step 2. Adding the variables to the counter code
Now we can use the variables in the myTarget remarketing code to pass data about viewed products.
To do this, let’s go to the tags and add a new tag for myTarget. We take the counter code from the myTarget usage instructions and substitute the variables we created into the appropriate lines of code (see below).
Note that when adding variables, you must add two curly braces — both before and after the variable name:
{{ProductID}}{{ProductPrice}}
Step 3. Adding a trigger for myTarget
As the trigger, we choose the Custom Event type and then perform the following actions:
- in the Event name field we specify gtm-ee-event,
- in the trigger activation condition we choose Some custom events,
- and below we choose which specific event — GTM EE Event Action equals Product Details.
We save the trigger and the created tag.
These settings mean that our code will fire only when data about a detailed product page view is sent to dataLayer in GTM. This way, we’re guaranteed to pass data to myTarget only if we’ve received product data in GTM.
Excellent! The data passed about a product to GA will automatically be sent to the myTarget remarketing counter as well.
If there are many products…
We’ve successfully passed the data about viewing a product page. But by myTarget’s requirements, we must, at a minimum, also pass data about a placed order (product IDs and order total). An order may contain more than one product, which complicates the task.
Let’s look at what the dataLayer code looks like for a placed order with several products:
dataLayer.push({
'ecommerce': {
'purchase': {
'actionField': {
'id': 'T12345',
'affiliation': 'Online Store',
'revenue': '35.43',
'tax':'4.90',
'shipping': '5.99',
'coupon': 'SUMMER_SALE'
},
'products': [{
'name': 'Triblend Android T-Shirt',
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'quantity': 1,
'coupon': ''
},
{
'name': 'Donut Friday Scented T-Shirt',
'id': '67890',
'price': '33.75',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Black',
'quantity': 1
}]
}
}
});
</script>In this case, there are two products in the order (inside the products block). We must collect the ID and amount of all products.
To do this, let’s create one more data layer variable where we’ll store information about the products in the order. Then we’ll write two small JavaScript handlers for this variable (to collect the IDs and the order total) and pass the results to the new myTarget remarketing counter.
Step 1. Creating a data layer variable
We go back into GTM to the “Variables” section and create a new data layer variable — Allproducts_purchase. In the “Data Layer Variable Name” property, we need to substitute the string “ecommerce.purchase.products”.
By doing so, we’ve passed all the data about the purchased products (from the products block) into a single GTM variable. And now we need to extract all the necessary product data from it.
Step 2. Getting the products total
Let’s create one more variable — ProductsPrices_purchase, but this time we’ll choose the “Custom JavaScript” configuration:
We’ll write the following code into the “Custom JavaScript” field:
function() {
a = {{Allproducts_purchase}};
var prod_value = 0;
for (var i=0; i<a.length; i++) {
prod_value += +a[i].price * +a[i].quantity;
}
return prod_value;
}This simple code accesses the previously created “Allproducts_purchase” variable, collects all the product prices from it, and sums them up. Let’s save this variable and move on. We’ll come back to this data later.
Step 3. Collecting product IDs
In the same way, we need to collect all the product IDs in the order, and we must account for the format in which product IDs are passed to myTarget:
[ID1,ID2…]
We create one more variable with the “Custom JavaScript” configuration and the name “ProductIDlist_purchase”. We add the code to it and save:
function() {
a = {{Allproducts_purchase}};
var lst = '[';
for (var i=0; i<a.length; i++) {
var prod = a[i].id;
if (i==a.length-1) {
lst += prod;
}
else {
lst += prod + ',';
}
}
lst += ']';
return lst;
}So, we’ve saved the IDs of all products into the ProductIDlist_purchase variable and the order total into the ProductsPrices_purchase variable. All that’s left is to pass all the obtained data into the right tag and set up a trigger.
Step 3. Sending the data to the myTarget counter
We go to the “Tags” section, create a new tag, and add the myTarget remarketing code for the purchase page to it. Into the appropriate lines of code, we include the names of the variables with our product data — {{ProductIDlist_purchase}} and {{ProductsPrices_purchase}}:
Step 4. Adding a placed-order trigger
As the trigger, we again choose the “Custom Event” type and then perform the following actions:
- in the “Event name” field we specify “gtm-ee-event”,
- in the trigger activation condition we choose “Some custom events”,
- below we choose the event — be careful! — GTM EE Event Action equals Purchase.
We save the trigger and the created tag.
In this trigger, we specified that the code should fire only when GTM receives data about a placed order for Google Analytics.
To meet myTarget’s minimum requirements, all that’s left is to add a tag with the myTarget code for the “Cart” page.
You can do this by repeating all the steps for transferring data about a placed order (from the “If there are many products…” section). The only difference is that in the data layer variable you should specify “ecommerce.checkout.products”, and in the trigger’s event — choose “equals Checkout”.
References: