I've been working on a migration from Universal Analytics to Google Analytics 4, and am considering switching to Google Tag Manager at the same time. I'm trying to make sure the initial code on the site will work correctly.
Here's what we previously used with Analytics:
<script async src="https://www.googletagmanager.com/gtag/js?id=[analytics id]"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag( 'js', new Date() );
gtag( 'config', '[analytics id]', {"optimize_id":"[optimize id]"} );
gtag( 'config', '[ads id]' ); // this is a different ID than the Analytics one
</script>
The Google Tag Manager looks like this:
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.'+'js?id='+i+dl+'>m_auth=[environment auth code]>m_preview=[environment id]>m_cookies_win=x';f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','[tag manager id]');
</script>
On the Analytics code, I'm able to supply an ID for (universal) Analytics and Google Ads by using the config method. On the new Tag Manager code, there appears to only be one Google Tag Manager ID.
I'm aware that I can add things like Google Analytics 4, Universal Analytics, Google Ads Remarketing, Google Ads Conversion, etc. as distinct Tags with their own ids within Google Tag Manager. But is there an equivalent to this initial config method? Or is that something that Tag Manager takes care of on its own?
GTM takes care of it. Every tag type will load its respective library if it's not yet loaded (it's best to let GTM load its stuff as needed), then execute the config method if it's applicable to the library/tag type and fire events as needed.
GTM will also define dataLayer if it's not defined. It will also hijack the dataLayer from gtag, so no need defining the gtag() function. Basically, pretty much anything you can do with gtag in code is better done through GTM, so if you do tracking properly through GTM, you don't even touch gtag.
dataLayer, in GTM world, becomes a tool of communication between front-end and GTM's logic rather than just direct mindless proxy to GA endpoints, as gtag() offers it.
Useful for GA4 double tracking into different measurement ids, Killan Walsh in Measure slack just uncovered it. You can supply comma-separated measurement ids in the GA4 config tag like so:
Just return comma-separated measurement ids in a string from that var. But this seems like an undocumented, unfinished feature, so use with caution.
I have currently implemented Google Analytics on a web property of mine via adding the following Global site tag (gtag.js) on all web pages:
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-Y"></script>
<input id="user_id_val" type="hidden" name="user_id" value="{{ user_id }}">
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
var user_id = document.getElementById("user_id_val").value;
if (user_id)
{
gtag('set', {'user_id': user_id}); // Set the user ID using signed-in user_id.
gtag('config', 'UA-XXXXXXXXX-Y');
}
</script>
Note that this snippet has been enriched with user_id to enable session unification.
Next, I need to implement Scroll Depth for my web property.
How do I do that via the Global site tag (gtag.js) I am already using? I cannot find any documentation for the same. Can an industry expert give an illustrative example of how that could be done? And if it cannot be done, it is alright to simply point that out.
Postface:
Normally, Scroll Depth is measured via adding Google Tag Manager to the project. That is well-documented.
So why am I not following the recommended route of adding the Google Tag Manager snippet to measure Scroll Depth? Why am I trying to do it via Global site tag (gtag.js)? Because:
I have read that one can indeed deploy tags via Global site tag (gtag.js) as well. This official doc page explains that this is possible. So what I am attempting makes sense in theory.
I already have the Global site tag (gtag.js) injected all over my site. If I can piggy back on that to enable Scroll Depth measurement, then that is my preferred solution.
My alternative would be to replace the already configured Global site tag (gtag.js) with the Google Tag Manager snippet.
But that introduces the additional headache of how to enable session unification in GTM (another requirement of mine), which I configured with gtag.js. This transition could also break my GA. Or create duplicated effort.
Since that could overall be a messy situation needing a lot of troubleshooting, I am firstly exploring ways of just using the Global site tag (gtag.js) to solve my Scroll Depth measurement issue. Hence this question.
So I'm using Google Analytics, Google Optimize, and Google Tag Manager. I also feel that I may be losing my mind.
For performance reasons, we don't want to add the google optimize script through GTM. We want to hard-code it. But every time I try that, the installation doesn't work. Specifically, when I click "Run Diagnostics" on the google optimize setup page, I get an error that says
All Analytics tracking code on the page must have the same tracker configuration settings. [...] The following tracker configuration properties do not have the same configurations: alwaysSendReferrer.
So I go into my handy Analytics debugger, find the alwaysSendReferrer property, and note that it's set to true. Great. I edit the config object that i'm passing to the google optimize init script, and I add alwaysSendReferrer: true. So far so good. Except... I get the same error.
I thought maybe something was wrong with our analytics setup, so I got rid of the hardcoded google optimize script and instead included it via the Google Optimize GTM tag -- which, unexpectedly, worked perfectly. I thought "Okay i'll just find the script that GTM is adding and copy/paste it into the codebase" but of course it's minified within an inch of its life, and untangling that javascript from the rest of the tags would be a whole other endeavor.
I have access to a {{Default UA Settings}} variable in GTM, and google's documentation would really like me to just pass that object to the official "Google Optimize" tag in GTM. That works (I've tested it), but as mentioned, we don't want to do that.
If anyone knows what the Google Optimize config object should look like, that would help me massively.
Right now mine looks like this (with identifying details removed)
dataLayer.push(['config', 'UA-12345', {
'optimize_id': 'GTM-55555',
'linker': { 'domains': ['mywebsite.com <http://mywebsite.com>'] },
'alwaysSendReferrer': true
});
I've tried false, "true", 1, and basically everything else I can think of (I'm quite confident that Google Analytics has this property set to true on our site) -- my only guess is that maybe I'm setting the value in the wrong place and google optimize isn't seeing it. Help?
I know the feeling of losing your mind trying to read through Google documentation!
This is the code I use on pages I wish to run Optimize experiments on:
<head>
...
<!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-PRMQXXX');</script> <!-- End Google Tag Manager -->
<!-- Page-hiding snippet (recommended) -->
<style>.async-hide { opacity: 0 !important} </style>
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',4000,
{'GTM-KL7XXXX':true});</script>
<!-- Modified Analytics tracking code with Optimize plugin -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-99999999-1', 'auto');
ga('require', 'GTM-KL7XXXX');
ga('send', 'pageview');
</script>
...
</head>
Where:
GTM-PRMQXXX is the Google Tag Manager container id
GTM-KL7XXXX is the Google Optimize container id, and
UA-99999999-1 is my Google Analytics id
Note that you need to remove your usual GA script once you add the scripts above.
I hope this helps you!
Please, help me to solve this issue:
Google Tag assistant says that "Missing analytics.js script", but it present in code. What is wrong?
This issue is on page https://xn--b1agjaalfq5am6i.su/eglo-89203-lyustry.html
Adding type="text/javascript" data-cfasync="false" to SCRIPT tag has no effect.
For everyone who will face with the same issue: Google Tag assistant does not understand, when you use analytics_debug.js instead of analytics.js. (thanks to Eike Pierstorff)
I have this widget code that i wish to track via GA analytics without changing the code structure. how can i do this using GA event tracking feature.
the widget code is as below:
<script src="http://widgets.unnamed.co.ke/21/index.php?source=mysite" type="text/javascript"></script>
We've added google analytics code to the widget javascript. Note that you need to make some adjustments when the GA code is inside a function in your code. e.g:
var g = window._gaq || (window._gaq = []);
g.push(['some_unique_name._setAccount', 'UA-XXXXXXX-X']);
In addition you have to make sure your GA doesn't interfere with the site's GA. So you need to make sure that the domain (and some other definitions) is set to the same domain as the site's GA definitions. You also should make sure to use your own tracker.