Google Tag Manager - (enhanced) e-commerce - how to load Javascript after <body> tag

0
votes

I'm still learning Google Tag Manager and Enhanced E-commerce tracking, but I have a few questions, some of which may be pretty basic:

  1. We're using a site on a third party system - I already have Google Tag Manager in my template within the HEAD tag, working with Universal (Google) Analytics. However, we want to just get the e-commerce transaction (purchase) data into Analytics - so basic e-commerce tracking would be fine, but I'd rather use Enhanced E-commerce tracking since it is newer - even though my immediate requirement is just to track purchases.

So, I need to send push transaction data into the dataLayer, but I can't do this due to restrictions on the system. I can only add special Javascript code to the end of the BODY tag for my "checkout complete" page.

Reading this online, the dataLayer must be defined in the HEAD before the GTM code is in place. As I cannot do that, I need to load the data using Javascript at the end of BODY.

Is this possible, if so how? I think I can do this using a Custom Javascript Variable as mentioned here: https://developers.google.com/tag-manager/enhanced-ecommerce#macro

  1. Is a "macro" the same as a "variable" as explained in the above link? It says "macro", but Google Tag Manager allows me to define a custom "variable" which is "Custom Javascript". Just checking that these are one in the same.

  2. Where would this code actually "run", if I put it in Google Tag Manager? The third party system defines some variables for me during script execution and I don't know where/when (during page load of the checkout thank-you page) it does it, so to be safe, I'd rather have this script run at the end of the page before the BODY tag closes - if I were doing this manually using plain Javascript within the HTML. In Tag Manager, how would I tell the Javascript to run "at the end of the page"?

Thanks in advance!

1
google-analyticsgoogle-tag-manager

1 Answers

2
votes

1 - Use dataLayer.push() in your Custom Javascript at the end of the BODY. Include an event in this with the transaction data.

For Example:

    dataLayer.push( 'event' : 'custom.transaction', 'ecommerce': {} );

You can see the ecommerce object structure here: https://developers.google.com/tag-manager/enhanced-ecommerce#purchases

dataLayer.push() is used after Google Tag Manager script has been included on the page, so you won't need to define it in the head of the page. Just translate your available ecommerce data into the structure required.

You then need to set up a Custom Event trigger in Google Tag Manager that uses/matches your event value/name.

Then create a Universal Analytics Event Tag that uses this Trigger. Set what ever you would like for the Category, Action and Label. Under More Settings > E-commerce, check Enable Enhanced Ecommerce and then check Use dataLayer.

This event is simply used to pass the Ecomemrce Data into Google Analytics.

2 - Macro is the same as Variable. You are correct Custom JavaScript Variable is what you are after.

3 - The code lives in Google Tag Manager Variable scope and is executed when the variable is used and/or with Google Tag Manager state changes. You can't make this code run at the end of the page. Also this code would need to access/scrape values from the page. To ensure the data is available you would only use this Variable on a Tag that is set to trigger on Window Loaded / DOM Ready, depending on when the on page data is ready.

I would suggest using dataLayer.push() and only use the Custom Javascript Variable approach if dataLayer.push() is not possible.