How to use Google Analytics Tag Manager to track off site links - google-analytics

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.

Related

Adding Custom Popups using google tag manager

When a user lands on a page, I want to show a custom HTML popup. I have Google Tag Manager integrated with the website.
Can this HTML Popup be shown using Google Tag Manager? (script and code to be inserted using Google Tag Manager)
Is it frowned upon / not advised to use google tag manager for
anything apart from tracking?
1.) Yes - GTM is pure Javascript, and inserts Javascript into the page code, so anything you can do you can do via GTM. There are some minor caveats (e.g. a size restriction on custom HTML tags), but doing a popup should work just fine.
2.) There are certain use cases that are discouraged - Google recommends against (or at least used to) making visible changes to the page markup via GTM. The problems with that are that GTM is loaded asynchronously, so you would not know at which point the changes show up and you might get "flickering" pages, and a possible performance impact when you force the page to re-render.
Nothing of this applies to popups, so you should be fine (although using popups these days might have its own problems, but these are not related to GTM).
Personally I would recommend against implementing popups via GTM if the popup is an integral part of your page; splitting up an application between page code and GTM code will sooner or later confuse a developer. But if this is just advertising or a call to action or something similar then (IMO) using GTM is not a problem at all.

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

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.

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.

Preventing an iframe on the same domain from triggering a page exit in Google Analytics

I am working on a third party website that contains a web application embedded in an iframe on the home page. This iframe is hosted on the same same sub/domain.
Currently page views are being tracked with _trackPageview. Due to a requirement by marketing both pages use the same Google account Id.
Since the iFrame was implemented the marketing department has noticed that the bounce rate has dropped to almost nothing. I suspect that this is because Google is interpreting the pageView event on the iframe as the visitor hitting another page on the website.
Just for additional information, the domain of the _gaq object is being set to "none" for both the container page and iframe.
Does Google provide a mechanism by which you can trigger PageView in such a way that it isn't interpreted as subsequent pageview in this scenario? (I know that trackEvent has a noninteraction property to deal with this?)
Am I better off just disabling the PageView for the default iframe page?
Does Google provide a mechanism - apparently yes, but probably not for your use case.
The field documentation for Universal Analytics describes the non-interaction field thusly:
Specifies that a hit be considered non-interactive.
So in UA this does no seem limited to events but to apply to all hits (which would include pageviews). I want to point out that I have no tested it and that it seems counterintutive, so it might simply be that the documentation is incomplete/wrong here.
However as you are using "classical" Analytics this does not apply to you. Since upgrading the code is a good idea in any case you might want to push for an update to Universal Analytics (this piqued my curiosity so I will test this over the next few days and update this answer with the results - maybe you want to wait until then, or simply test it yourself).
It's possible, but not 100% clear to me that disabling the PageView event on the iframe will prevent your users from registering a page exit (the pageview may get recorded regardless). You can try removing that event and see if it works.
But a better way may be to implement a custom filter on a new View excluding traffic to that specific class of iframes. Make sure you keep your old View (or create a new one with further filters) to make sure you're capturing those iframe views, if you think that's necessary.

Event Tracking UA + Upgrading to Google Tag Manager

I've got a website where every button has an onclick parameter based [on this article]https://developers.google.com/analytics/devguides/collection/analyticsjs/events. This works fine with universal analytics. But I wonder if it also works with Google Tag Manager without any adjustments. Am I fine or do I need to change code on site to get this? If I do need to change, where should I start, couldn't find any resources
If you use GTM for event tracking, you would need to remove event tracking code on your site because this will result in double-tracking and inflated analytics data. What you can do is to tag everything you want tagged in GTM, but DO NOT publish your container and tags just yet - just work in debug mode so that you can see if/when your tags are firing. Then once everything is working in GTM debug mode, you can then remove your event tracking code and publish your container. Alternatively, if you wanted to just leave the event tracking code in your site and use GTM concurrently, then you would have to make sure you don't tag those events that are already being tracked, but really this isn't ideal and defeats the purpose of GTM.

Resources