The solution I’m describing in this blog post started with several cases where Enhanced Ecommerce Product Values (Product Name, Category etc.), had to be tracked in DoubleClick as Custom Variables. This means that the data had to be tracked as a string, and data had to be tracked for the following Enhanced Ecommerce actions: Product Detail View, Add to Cart, Checkout and Purchase.
Getting the data as a string can be done in many ways, but a good solution has (of course) been described by Simo Ahava. But, I needed a more generic method, if not I would end up with 1 GTM Variable for each Enhanced Ecommerce Action, and 1 GTM DoubleClick Tag per Action as well. In total, 4 Variables for tracking Product Names, and 4 DoubleClick Tags.
With other words, in this blog post I just take what someone else have done before, and make the solution more generic.
The method I’m describing here means that you only need ex. 1 Product Name Variable, and it will cover all these Enhanced Ecommerce Actions:
- Product Details View
- Product Click
- Adding a Product to a Shopping Cart
- Removing a Product from a Shopping Cart
- Checkout
- Purchase
Here are some examples of where this generic variable can be used:
- DoubleClick: Track Product Name (and other values) in Custom Variables as a string
- Google Analytcis Events: Track Product Name as Google Analytics Event Labels in the following scenarios
- Add to Cart
- Remove from Cart
- Product Click
- Facebook: Facebook Pixel Events
- ViewContent
- AddToCart
- InitiateCheckout
- Purchase
- Other Remarketing Advertising solutions
Google Tag Manager Setup & Implementation
To make this solution work, the following things must be done:
- Google Tag Manager Events must be implemented for all your Enhanced Ecommerce Actions
- Create a Data Layer Variable in GTM that holds the ecommerce object
- Create a Lookup Table Variable in GTM that matches GTM Events to Enhanced Ecommerce Actions
Create a Data Layer Variable in GTM that holds the ecommerce object
Create a Data Layer Variable as shown below. Notice that I’m using Data Layer Version 1.
Suggested GTM Variable name: ecom – ecommerce.
Create a Lookup Table Variable in GTM
Create a Lookup Table Variable in GTM that matches GTM Events to Enhanced Ecommerce Actions. You may have to change the Input based on how you have named your GTM Events.
Suggested GTM Variable name: ecom – enhancedEcomAction.
Below is a table with the same values as in the image above, if you want to copy/paste.
Enhanced Action | Input | Output |
---|---|---|
Product Details View | productView | detail |
Product Click | productClick | click |
Adding a Product to a Shopping Cart | addToCart | add |
Removing a Product from a Shopping Cart | removeFromCart | remove |
Checkout | checkout | checkout |
Purchase | purchase | purchase |
Now that we have created the fundament for creating Generic Strings of Enhanced Ecommerce Product Values in GTM, let’s create those strings.
Product Value Strings
String with Product Names Comma Separated
This script should go into a Custom Javascript Variable in GTM. The {{ecom – enhancedEcomAction}} part of the code is doing the “magic” here, since it will return the Enhanced Ecommerce Action value mapped to the GTM Event. The script below would create a String with Product Names comma separated.
1 2 3 4 5 6 7 |
function() { var ecomArray = {{ecom - ecommerce}}[{{ecom - enhancedEcomAction}}]['products'] if (ecomArray) { ecomArray = ecomArray.map(function(product){return product.name}).join() return ecomArray || undefined } } |
Suggested GTM Variable name: ecom – productName – string.
String with Product Categories Pipe Separated
Since Product Names and Categories can contain commas, a comma separated string is probably not the best solution. It’s better to separate with something that will not be found in your Product Names or Categories, for example a | (pipe). The code below demonstrates how to do this.
1 2 3 4 5 6 7 |
function() { var ecomArray = {{ecom - ecommerce}}[{{ecom - enhancedEcomAction}}]['products'] if (ecomArray) { ecomArray = ecomArray.map(function(product){return product.category}).join('|') return ecomArray || undefined } } |
Suggested GTM Variable name: ecom – productCategory – string.
Sum Product Prices
In some cases you would like the sum of the product prices. This could be useful for Facebook Pixel Events, Adwords Dynamic Remarketing and more.
The script below takes the price of the product(s), and mulitplies it with product quantity for each product. If quantity is missing, the script defaults to 1. This means that this script will cover ex. Facebook Pixel Events for ViewContent. AddToCart, InitiateCheckout and Purchase.
1 2 3 4 5 6 7 |
function() { var ecomArray = {{ecom - ecommerce}}[{{ecom - enhancedEcomAction}}]['products'] if (ecomArray) { ecomArray = ecomArray.reduce(function(memo, product){return memo + parseFloat(product.price*(product.quantity||1))}, 0) return ecomArray || undefined } } |
Suggested GTM Variable name: ecom – productPriceSum.
Sum Product Quantity
Some advertising script would like to track number of products bought or number of products in the cart/checkout. This script will give you that. Ex. you could use this to send num_items for the Facebook Pixel Events InitiateCheckout and Purchase.
1 2 3 4 5 6 7 |
function() { var ecomArray = {{ecom - ecommerce}}[{{ecom - enhancedEcomAction}}]['products'] if (ecomArray) { ecomArray = ecomArray.reduce(function(memo, product){return memo + parseInt(product.quantity)}, 0) return ecomArray || undefined } } |
Suggested GTM Variable name: ecom – productQuantitySum.
Wrapping it up with a Facebook Pixel Event example
The example below demonstrates how we can use Generic Strings of Enhanced Ecommerce Product Values with Facebook Pixel Event for Single Products. I will not go into detail about the different Pixel Events, see the Facebook Pixel Events documentation for more information.
The Facebook Pixel Event example below for Single Products would be added to a Custom HTML Tag in GTM. This script will cover all these Events:
ViewContent. AddToCart, InitiateCheckout and Purchase.
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> (function() { fbq('track', '{{Facebook - Events}}', { content_name: {{ecom - productName - string}}, content_category: {{ecom - productCategory - string}}, content_ids: {{ecom - productId - array}}, value: {{ecom - productPriceSum}}, currency: {{ecom - currencyCode}}, content_type: 'product' }); })(); </script> |
I will not explain this setup further, instead I recommend that you head over and read the Facebook Pixel Guide for GTM written by Yehoshua Coren. This is the most comprehensive guide for setting up Facebook tracking in Google Tag Manager.
Some closing thoughts about Variable Naming in GTM
Although this haven’t anything to do with the content of this blog post, Variable Naming in GTM are often something that is debated. Many use a structure like this: VariableType – VariableName, which would translate to ex. DLV – visitorType.
In this blog post I’m not using this structure, instead I’m structuring the Variables by what they are tracking. All the Variables in this blog post are tracking ecommerce, and therefor I start their naming with ecom, ex. ecom – productCategory – string. Since Variables are listed alphabetically, this means that all my ecommerce variables are listed together, which makes it quicker to work in GTM (me thinks).
Anyway, whatever naming structure you prefer, they can all be used for Creating Generic Strings of Enhanced Ecommerce Product Values.
And – a thank you goes to my colleague Jørn Reidel for pointing me in the right direction initially.
Happy tracking!
Thanks for such an info dense post, gonna have to bookmark this so I can refer back to it!