What is gtag and why do I have to add that separately from google tag manager? - google-analytics

I find Google documentation around Google Tag Manager (GTM) terrible at helping me figure out which bits go where.
As I understand, GTM requires that you put a <script> snippet on your pages which is supposed to bring in other code snippets, as could be configured by a non-technical user.
I'm a technical user, though. Perhaps that's the problem! I also find it problematic that Google use the word "tag" to refer to either an HTML element tag, like <script>, or their own proprietary use of the word to mean calling a function ("triggering a tag") in another script, also unhelpfully referred to as a tag.
They also have "gtag" which is what - a helper? something that enables you to send general analytics events through the GTM API? The docs simply say:
The global site tag (gtag.js) is a JavaScript tagging framework and API that allows you to send event data to Google Analytics, Google Ads, and Google Marketing Platform.
... but we could already send analytics? What does this add?
For example, I wish to send an e-commerce Purchase event.
I've found that to do this I needed to add a new snippet of code with two <script> tags to the header on the site (thought GTM meant I didn't need to do this?) that sources gtag.js, then I'm able to call the following at the appropriate place in my javascript:
gtag('event', 'purchase', { value: 1.23, transaction_id: 'test' });
Or without it (although this does not seem to work):
ga('require', 'ec');
ga('ec:addProduct', {name: 'test product', price: 1.23})
ga('ec:setAction', 'purchase', { id: 'test_id_1', revenue: 1.23 })
So my question is: when would you use gtag() over ga(), and why can't GTM install gtag?

When would you use gtag() over ga()?
Use gtag if you want to send data to supported Google products other than Google Analytics. As you pointed out, "The global site tag (gtag.js) is a JavaScript tagging framework and API that allows you to send event data to Google Analytics, Google Ads, and Google Marketing Platform.", whereas ga only works for Google Analytics. But (see below), you might decide to never use gtag nor ga and always use GTM.
Why can't GTM install gtag?
It could (you could have a GTM tag inserting some gtag code) but it's beside the point as they are meant to be used as 2 different solutions:
gtag is a purely programmatic tracking tool for sending data and only works with 3 Google products (so far - Analytics, Ads, Marketing Platform - more maybe added in the future), it's made to provide basic out-of-the-box tracking with a simple copy/paste + small lines of code (if needed for customization).
GTM is a tag manager: it can work programmatically BUT requires a minimal configuration of the container via the GTM UI (a default container won't send data anywhere), and can send data to whatever products you want (just need to setup the corresponding tags in GTM), while having a bunch of other features
A few questions to help you choose:
Am I sending data to other tools than Google Analytics/Ads/Marketing platform?
Do I want to use some the extra features GTM offers (UI, version control, templates, debug, environments etc...)?
Is there some tracking that would be heavy to implement via pure custom JS (eg scroll tracking) which GTM can facilitate with its built-in listeners (eg scroll tracking)?
If YES to any of the above, then use GTM
I personally never use gtag, I always replace it with GTM because it's considerably more powerful than gtag.
What Google is doing is progressively replacing all their default snippets with gtag so they only have 1 unified API to maintain and it's an easy copy/paste for users (bear in mind most users aren't tech savy and just need to paste the snippets in into their CMS). Forcing people to use GTM would be too much of a friction as out-of-the-box GTM simply doesn't track anything and people would need to learn & configure GTM, too much work vs a simple copy/paste.

Note: The built-in events don't use category, label, and value. Take care to use the correct keys when sending these events.

Related

How can I redact personal-identification info (PII) in a URL when using gtag.js?

I'm using the Google global site tag (gtag.js) to manage my tags, and I use it for Google Analytics.
Sometimes there is an email address in URLs on my site, and I need to remove that from the code.
I know there are clever ways to get this done when using Google Tag Manager. But I'm not using GTM, I'm using gtag.js. (This simple page explains the difference.)
How can I check the current page's URL for email addresses and fix that, before the URL is tracked by gtag.js?
(I know how to do the regex etc... this is more asking where in the flow can I grab the URL and 'rewrite' it as needed before the Analytics pageview event posts?)
I looked through the gtag.js API reference without much luck. Also looked at the docs for how Analytics implements gtag.js, still no luck.
Indeed Google's documentation can be hard to explore sometime since they describe stuff only once for better maintenance and consistency, but at the end you could be missing a working summary ...
I would suggest to use this https://developers.google.com/analytics/devguides/collection/gtagjs/pages
gtag('config', 'GA_MEASUREMENT_ID', {
'page_path': '/pagepath?email=redacted#example.com'
});

Correctly add dataLayer information (dataLayer vs ga('ec:...')

I want to implement Google dataLayer for a client, and after reading docs, articles, and trying out browser extensions, I am still a bit confused.
I saw 2 versions of it being used:
dataLayer.push('ecommerce': {
'detail': {/* data */},
'impressions': [{/* data */}]
});
and
ga('ec:addImpression', {'id':'%s', 'name':'%s', 'category':'%s', 'brand':'%s', 'position':%s, list: '%s'})
ga('send', 'pageview');
Is there a preferred version, or do both work ? Also, for the second option, do I need to use ga('send', 'event', '......') each time after using the ga('ec:something') function ?
First one is the dataLayer as used in Google Tag Manager.
The second is not a dataLayer at all, these are direct calls to the Google Analytics tracking code (which would need to be loaded for this to work).
So these are two different things, if you really intend to implement a dataLayer to use with a tag management solution you need the first solution.
And not to be unkind, but if you can't tell the difference you should start by reading Google's really extensive documentation. From your question it is not even clear what you intend to do, since dataLayer is not a Google product, it's just a variable that feeds into Google's tag management solution.

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.

Switch to Tag Manager, will Enhanced Ecommerce still work?

I've successfully implemented Google Enhanced Ecommerce on one of my websites, where I also have a Google Universal Analytics tracking code. Now we want to change to Google Tag Manager, thus replacing the UA tracking code with the Tag Manager Code (correct?)
Will this affect the Enhanced Ecommerce tracking in any way? Or can I just replace the tracking snippet and the ga('create')-parts with the Tag Manager-snippet?
You need a correctly set up dataLayer (which rather more complicated since you need info on product impressions etc). Documentation is here:
https://developers.google.com/tag-manager/enhanced-ecommerce#enable
Then you create a news Analytics Tag (just a pageview or event, there is no need for a separate transaction tag) and select "Enhanced Ecommerce" with the "Use datalayer" option in the advanced settings.
GTM will pick up the values from there datalayer and do the rest for you.
So yes, you can get this to work, but it requires a lot of preparation for the correct datalayer implementation. Simply replacing the GA code with the GTM code will do very little except breaking your tracking.

Google Tag Manager + Google Analytics v just using GA: any reason to use just GA?

I am using Google Tag Manager on all my sites now to implement Google Analytics and future proof them for any other scripts.
I am putting GTM in my boilerplate.
Is there any reason this might not be good practice?
Any reason why a website (that needs GA) should avoid Google Tag Manager?
Most websites will require some sort of Javascript code added in the future for affiliate tracking, various analytics and having GTM installed will allow for easy installation of any such JS code easily.
Or, as Google puts it: "Why wait months for site code updates? Google Tag Manager lets you launch new tags any time with a few clicks, so you never miss a measurement or marketing opportunity."
Since GTM does not come with a service level agreement you could (very very tenuously) argue that GTM adds an additional point of failure. And if one wanted to be pedantic one could point out that not all ways of analytics tracking work with GTM (if you track serverside via the measurement protocol).
But real life argument, there is none (IMO).
There might be pages that do not greatly profit from GTM (or any other Tag Management) if all you do is to deploy a single analytics tag to track pageviews. But the second you need to track an event or pass data GTM is already worth it.
This is not meant to be merely opinion based, it's more that in 2,5 years of using GTM on large sites I have been unable to find any scenario where the tag management code has caused any technical problem or interfered with existing code. On the other hand I do not write click handlers or submit handlers anymore, I have a boilerplate template for a container tag in which I just have to replace values for a few macros before I import it to GTM and have tracking up and running, I can set data fields with much less trouble than via the code... so I think there is a real technical argument to make in favour of GTM, and none against it.

Resources