Setting up Enhanced Ecommerce tracking via Google Tag Manager & Google Analytics generally involves creating a data layer that contains all the relevant values, as described here: https://developers.google.com/tag-manager/enhanced-ecommerce#purchases
These same values are often required to set up other marketing and analytics tags. For example, the Facebook conversion pixel looks like this:
<script>
fbq('track', 'Purchase', {currency: "USD", value: 30.00});
</script>If you wanted to use Google Tag Manager to substitute in the actual conversion amount where it reads 30.00, you can grab that value from the Enhanced Ecommerce data layer, push it into a Variable, and then replace that fixed value with a dynamic variable, like this:
<script>
fbq('track', 'Purchase', {currency: "USD", value: {{DL - Transaction Revenue}});
</script>This post will show how to retrieve all the values from the Enhanced Ecommerce data layer into GTM Data Layer Variables, where they can be re-used.
DATA LAYER VARIABLE SETUP
Note that this requires that you have already set up your Enhanced Ecommerce data layer on the transaction page.
To create a Data Layer variable, navigate in GTM to Variables > User-Defined Variables > New > Data Layer Variable, and fill in the appropriate Data Layer Variable Name, as listed below. This screenshot shows an example of what the completed Variable will look like:
ENHANCED ECOMMERCE DATA LAYER VARIABLE NAMES
- Transaction Revenue
ecommerce.purchase.actionField.revenue - Transaction ID
ecommerce.purchase.actionField.id - Transaction Affiliation
ecommerce.purchase.actionField.affiliation - Transaction Tax
ecommerce.purchase.actionField.tax - Transaction Shipping
ecommerce.purchase.actionField.shipping - Transaction Coupon
ecommerce.purchase.actionField.coupon - Transaction Currency
ecommerce.currencyCode
DATA LAYER PRODUCT INFO
The above can be simply accessed via data layer variables because they are all transaction-level information, with just a single value per transaction. It's a little more complicated to retrieve product-level information because a single order contains multiple products. If you want to get product information, you'll need to create a custom JavaScript variable by navigating in GTM to Variables > User-Defined Variables > New > Custom JavaScript Variable.
Below is an example setup for how to get a comma-separated list of SKUs out of your enhanced ecommerce data layer:
- Create a Data Layer Variable to contain the entire ecommerce object:
- Create a custom JS variable that extracts the information you need from the above 'DL - Ecommerce' Variable.
function(){
var prods = {{DL - Ecommerce}}.purchase.products;
var skus = [];
var i;
if (!prods) { return; }
for (i = 0; i < prods.length; i++) {
if (prods[i].id) { skus.push(prods[i].id); }
}
return skus.join(',');
}This script would produce a Variable like this: 12345,67890,12345
Related: This post contains several other scripts that reconfigure elements from the Enhanced Ecommerce data layer, for use in other marketing pixels: Leverage Enhanced Ecommerce Data Layer for Marketing Pixels
Thank you so much for this post! This was EXACTLY what I was looking to do with GTM for Facebook Pixel tracking so you nailed it!
Awesome, glad I could help!
Hi, Thanks for your article!
I am trying to send product list variable to GA. May be JS modification you have mentioned will help to extract the 'list'? Please see the screenshot attached with my situation.
Hi there, I don't think you need to use a script here because the list name is the same for all the products.
So you should be able to retrieve this value using a data layer variable of ecommerce.impressions.0.list
Can you please try that and see if it works?
Great, Thanks a lot! It worked for me) Now I am working on the event value addtocart (quantity added), it doesn't work with the same logic. Is there some other approach needed?
You should be able to grab that value with the following datalayer variable:
ecommerce.add.products.0.quantity
Let me know how it goes!
wow, this is amazing.
can you explain the logic of setting up the value under products data layers, what is different from the variables under purchase
also I would like to use product category in the data layers how can I set up this variable, I have attached a screenshot
Hey Ghazi! The data layer just reflects GA's Enhanced Ecommerce data layer requirements as described in Google's documentation.
The 'purchase' object contains data about the transaction as a whole, while the 'products' array shows data about each individual product.
If you're looking to extract product category, you could do a data layer variable like this: ecommerce.purchase.products.0.category
However, that will only work if there's only a single product category for each purchase. If you have multiple categories and would like to get a list of them, you'd need to use a script like in the example above. Just replace 'id' with 'category' to get the product category.
Hi Ana,
Very interesting blog! Was able to understand the concept very easily compared to others. I am stuck at a point now, I am tring to record the ecommerce purchace with the transaction ID, revenue, tax, etc. I have created separate JS variables to record all those to collect dynamic values. My JS code is mentioned below but I am not able to make this work. Is it not possible to declare all the variables at once like below? or is there any other way to make this work better and I am also trying to record the product details like name and sku as well along with the transaction data.
Can i declare all those product variables too in the same way in the same JS variable?
And to note, at the tag level its an event tag and I am Reading data from this variable instead of selecting "Use data layer" option.
I really hope you could help solve this.
function()
{return {'ecommerce':
{'purchase':
{'actionField':
{'id': '{{JS - Purchase Transaction ID}}',
{'revenue': {{JS - Purchase Revenue Total}}},
{'tax': {{JS - Purchase Tax Amount}}}},
{'products':
{'name': '{{JS - Product SKU List}}'},
{'id': '{JS - Product SKU List}}'},
}}};}
Thank you!
Hey there, thanks for the comment. Your method is possible but I think you have some syntax errors in your code. Try something like this:
function() {var ecommerceData = {
'ecommerce': {
'purchase': {
'actionField': {
'id': '{{JS – Purchase Transaction ID}}',
'revenue': '{{JS – Purchase Revenue Total}}',
'tax':'{{JS – Purchase Tax Amount}}'
},
'products': {{transaction products}}
} } }
return ecommerceData;
}
You may also want to check out my post DOM Scraping Together a Datalayer for Google Analytics Ecommerce Tracking
Let me know how it goes!
Thank you for the syntax correction Ana! I am able to record the purchase but I am not able to record the transaction and product details on a purchase. Should I be including any other step apart from those mentioned above to make my method work?
Sorry, I'm not 100% sure what you mean by recording the purchase but not the transaction/product details on a purchase. If you mean the product details aren't being captured, there's probably some problem with your {{JS – Product SKU List}} variable. But in general, ecommerce tracking can be complex with a few potential points of failure, so it's hard to diagnose without actually seeing it.
Could you please do a test transaction and check a) output from the GA debugger and b) output in the GTM preview pane? This will show exactly which part of the process has an issue. If you send me a screenshot of those 2 items I'll be happy to take a look too.
I also checked out the post about DOM scraping. Interesting and a lot easier but I am afraid if doing that will affect the Ecommerce checkout behavior funnel as I read that the funnel only records transactions using the "purchase" action? Please correct me if I am wrong.
Yeah, my example in that post only shows how to track the purchase, not the entire checkout funnel. It could be modified, but as written it seems it's not a good fit for what you're looking to accomplish.
Awesome! Exactly what I was looking for. Thanks a ton.
Thanks for the message, I'm glad it was useful 🙂