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

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

Related

Access GTM google tag manager variables from outside of GTM?

I was reading about GDPR and GTM here https://www.analyticsmania.com/post/gdpr-cookie-consent-notification-with-google-tag-manager/
basically how to make GTM gdpr valid.
the issue I saw, was that I don't know how to read any GTM variables from outside of GTM. E.g. in that guide, they store a variable or function that will figure if consent was given or not. How can I read, utilize functions and react to events from outside of GTM?
say I run my little javascript file myapp.js on the page. In there I want to for example not add youtube video embeds in case of they have not given consent. Or add videos and share links if they gave consent. This is not something I can do via GTM obviously.
Well the dataLayer variable is public so you can read it at any time it just might be a little hard to find an specific value since you need to move though an array.
If you want to use a javascript variable on your site as a GTM variable then the variable needs to have global and not local scope (the dataLayer is global but you need to perform a dataLayer.push() to add items to the array).
If the javascript variable on the site is responsible for other site functions and has global scope, then either reference it using a GTM javascript variable or custom javascript variable and use it to act as the trigger exception.
The alternative is to have the site logic prevent the GTM snippet from loading. In the GDPR perfect world, you would have granular opt-out depending on the tags in GTM. You could create a form on site with opt-outs for specific tags, however, that data needs to be stored per customer and delivered to the dataLayer to perform tag specific opt-out functionality.
Can you expand on the logic you are attempting to reference from the site?

How to add Adsense in Google Tag Manager

I want to use Google Tag Manager to serve Adsense so I also can use other ads from other sources. I found few answers across the sites but not enough to understand. I would appreciate input here if it is possible to use Adsense code in GTM, if yes how? I also use DFP, if I have to use DFP then how it would be.
I assume you already have Google Tag Manager (GTM) running on your site?
Click on Variables on the left side of the screen within your GTM workspace
Create a new user defined variable and call it asClientID
Configure the variable as a Constant. The value to enter is your AdSense Client ID
Click on Tags on the left side of the screen within your GTM workspace
Create a new Tag called AS - Page view - ALL
Because there is no built-in tag in GTM for AdSense you need to use the Custom HTML tag.
Copy and Paste the HTML code shown below into GTM.
Select the trigger All Page views
Test your changes in preview mode
Once everything is working publish the changes to LIVE.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "{{asClientID}}",
enable_page_level_ads: true
});
</script>
As you can see we are using {{asClientID}} in the script which you have created in step 1 and 2. The reason for creating this variable is flexibility. If you need to change the ID you change it within the variable and not within the code.
NOTE: that it is not best practice to implement AdSense via GTM, but it is possible.
Hopefully this is what you are looking for. Please do let me know if it works for you. :-)

Adding GTM to a website with GA

I have a website that has been using GA for some time. Now someone wants me to add it to theirs GTM and replace my snippet with that GTM tag.
I don't know how to use GTM and don't really want to dig into that :/
My website was working just fine... Is there some easy way to make GTM just a simple middle man that looks at my domain and just throw everything directly to GA?
I manage to make it so GA gets info on the website traffic like active users etc. however that website has scripts that fires events to GA.
After googling a while i think this is because GTM adds some random names to the trackers and my code calls ga('send', ... ) directly :/
I know i can make a custom tag in GTM but they want it to be UA tag -_-.
Is there any way to set a default name for my trigger in GTM settings? Or some other solution?
atm. i have a code with gtm tag only and I'd rather avoid changing my web code if possible.
Edit
Ok, could someone explain to me how to achieve this:
I have this code:
var a = $('meta[property="a"]').attr('content');
var b = $('meta[property="b"]').attr('content');
ga('send','event',a,event,b);
where event is one of several possible strings of for example 'event_1','event_2' or'event_3'
and my GA has 3 goals that have action = 'event_1' etc.
How do i replace this with GTM and dataLayer?
This thread has 2 questions :
1.- Migrate a hardcode implementation of Google Universal into Tag Manager is not so simple as copy and replace the Universal Main Snipper for the GTM Code.
Look for this google guide to migrate. Has more or less the steps needed and the one to take in consideration during the migration.
https://developers.google.com/tag-manager/devguide#migration
If you goes for GTM, it's higly recomended to remove your ga() function on the page, this will stop working and you javascript too. Basically this mean, remove all your Google Analytics of the domains and install GTM and configure the corrects tags. Try to avoid things like paste the Google Analytics code inside a custom HTML tag, it's a very bad practice, but is see that a lot. Plan your migration
2.- Regarding the event you have to do :
Create a tag of universal analytics events and activate when you pushes a GTM event, them manage this values via the dataLayer
Let this link for more information:
https://support.google.com/analytics/answer/6164470?hl=en
var a = $('meta[property="a"]').attr('content');
var b = $('meta[property="b"]').attr('content');
dataLayer.push({'event': 'ga_event' , 'cat' : a , 'act' : b})
Try to involve more yourself in the GTM and Universal's World before ask, i'm not trying to be an asshole, but this question involves so many things that can be solved just looking the documentation, and somany thing to examplain in a single post.

Google Tag Manager: gtm.dom and gtm.load are missing

I'm implementing the Google Tag Manager script on a clients website.
I'm encountering a random issue: the dataLayer doesn't get its gtm.dom and gtm.load objects.
It only has two Objects, one with a bunch of variables which I'm passing and a dataLoaded event which I'm pushing in.
The issue does appear randomly on different pages, sometimes the dataLayer is correctly filled, sometimes not.
What could be a reason for not getting those two gtm objects?
(note: I'm the one who implements the javascript. The GTM configuration is done by an external contractor)
I found a solution here:
https://productforums.google.com/forum/#!searchin/tag-manager/gtm.load/tag-manager/0Lpevpf2Fss/OMJFuaM04BsJ
I didnt push my variables but assigned them to dataLayer. Its overwritten, so the gtm objects are missing.
The best implementation is assign (not push) variables before tag manager call script.
If you want to use dataLayer.push method, firstly load google tag manager script on the page and
call dataLayer.push in javascript timeout.

How to use Google Analytics Tag Manager to track off site links

I noticed that Google has released their Tag Manager application making it really easy to make changes to your tags and tracking options. How can I use this tool to track off site links?
Google Tag Manager (GTM) is not a tracking tool, so the short and unhelpful answer is that you can't. However you can deploy Google Analytics via GTM, which I guess is what you mean. I have to say, though, that tracking offsite links turned out a little less straightforward than I expected it to be.
Usually you track external links by virtual pageviews (or events). The usual way in GTM would be to push a variable to the data layer on the click event of the link and then fire a GA tag with a virtual pageview based on a rule based on that event. This failed completely for me when I tested it, presumably because the new page had loaded before the GA tag could fire. So I resorted to a not very elegant workaround:
First I created a standard Google Analytics Tag (tracking type pageview) to make sure the GA code was included in the site. Then I created a custom HMTL Tag with a bit of Javascript (this is assuming you use jQuery in your page):
<script>
$('a').click(function() {
var p = $(this).attr('href');
if (p.search(/.+YOUDOMAIN/) == -1){
_gaq.push(['_trackPageview', "external://" + p]); // mark links as external in the GA interface
}
});
</script>
For all links that do not contain YOURDOMAIN a click event with a pageview is attached to the link. To make sure the all the links are tagged with the click event you set a rule in the tag manager to make sure the script is executed only after the page has loaded you set event based rule in the tag manager where the event is equal to gtm.load (gtm's equivalent of jQuerys domReady).
This works (at least it did in my tests), but since it does not use GTMs intermediary dataLayer it looks rather like a hack to me. If anybody can suggest a proper solution I'd be grateful.

Resources