A few months ago, Google released a new Javascript library, named gtag.js to replace it’s already 7 years old analytics.js. It claims to bring in simpler deployment for website owners and better Google Products integration (such as Google Adwords Tracking). Let’s have a look into the key differences and what are your options regarding migration.
TL;DR Great new library, awesome new features. But, honestly, why not just switch to Google Tag Manager already?
analytics.js VS gtag.js
Let’s say you implemented the default Google Analytics code snippet on your website a while ago. It should look something like this somewhere at the top of any webpage on your website:
1
2
3
4
5
6
7
8
9
10
11
<!-- Google Analytics -->
<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-12345678-1', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
Now, if we look at the new gtag.js code snippet we’ve just been introduced, it looks more like this:
1
2
3
4
5
6
7
8
9
<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-12345678-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-12345678-1');
</script>
What kind of black magic is this? Looks like someone’s been cleaning up their code!
An In-depth Look At The gtag.js Snippet
Now that we have a new tag to replace our old, dusty Google Analytics snippet, let’s talk about their key differences.
The gtag.js’ Source Script
Looking carefully at the new Google Analytics code snippet, you’ll find out the first thing that changes is the domain from which the initial Javascript file is imported. It comes from googletagmanager.com instead of google-analytics.com.
1
<script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-12345678-1"></script>
As some of you may know, the Google Tag Manager (GTM) is an easy to use yet extremely powerful tag management system provided by Google. Even though the tool was and still is a major breakthrough in Website Tracking Management, Google’s launch of the product was a quiet one so to speak.
The dataLayer Variable
For those of you familiar with the Google Tag Manager, the dataLayer variable might sound like good news. That’s mainly because that javascript object is what probably makes the Google Tag Manager such a powerful tool.
1
window.dataLayer = window.dataLayer || [];
Using that dataLayer object one can actually transmit data from the website directly to the Google Tag Manager and perform numerous tasks within the GTM itself such as triggering custom events, pushing custom data to third party software and so much more.
It seems like the new Google Analytics library just uses the same, which seems a bit risky if you have an hybrid setup already using the GTM’s default object.
Sending a PageView to Google Analytics
Previously, one would’ve needed 2 actions: defining the domain and Google Analytics Property ID, then sending the pageview event per se.
1
2
ga('create', 'UA-12345678-1', 'auto');
ga('send', 'pageview');
Now, all gtag.js requires is to add the GA Property ID as a config statement and the pageview gets sent by default.
1
gtag('config', 'UA-12345678-1');
And… that’s it!
Custom Pageview Attributes
A great feature of the gtag.js library is the support for custom pageview attributes. These enable a more advanced and/or cleaner tracking setup where the default settings aren’t enough.
Here are the 3 settings that could be set when calling the “config” event:
1
2
3
4
5
gtag('config', 'UA-12345678-1', {
'page_title': 'some custom page title',
'page_location': 'http://foo.com/your-custom/location',
'page_path': '/your-custom/location'
});
One typical usage example of this would be to merge all pageviews for a specific content into one single permalink for that particular page, helping with duplicate content and cleaner reports.
2 URLs for this same content:
- https://pycvala.de/?p=30
- https://pycvala.de/blog/analytics/google-analytics-from-analytics-js-to-gtag-js
1 clean pageview in Google Analytics:
1
2
3
4
5
gtag('config', 'UA-12345678-1', {
'page_title': 'Google Analytics: From analytics.js to gtag.js',
'page_location': 'https://pycvala.de/blog/analytics/google-analytics-from-analytics-js-to-gtag-js',
'page_path': '/blog/analytics/google-analytics-from-analytics-js-to-gtag-js'
});
Multi-Property gtag.js Support
One of the big features of the new Google Analytics library is the multiple Google Analytics property support. That enables you to push events to simultaneous GA properties at onces, without having to duplicate tags and lose hair doing so. Let’s see how it works.
Previously, we pushed a config parameter with our property UA ID as parameter. Let’s add another one, this time without sending a pageview event to prevent data corruption.
1
2
gtag('config', 'UA-12345678-1');
gtag('config', 'UA-98765432-1', {'send_page_view': false});
Now any data or event that will be sent to our first property will be sent to the second one. Good thing is you can add as many as you’d like!
Google Analytics Property Grouping
One of the new key features added to the gtag.js library is Google Analytics Property Grouping through parameters. By default, all properties are added to the default group named “default”.
Hence, doing this:
1
gtag('config', 'UA-12345678-1');
Is basically the same as doing this:
1
gtag('config', 'UA-12345678-1', {'groups': 'default'});
Let’s say you have 3 properties, one being the main one and 2 others being other websites related to affiliates to which you would like to send specific data all at once. You could define a second “affiliate” group and put them all in like so:
1
2
3
gtag('config', 'UA-12345678-1', {'groups': 'default'});
gtag('config', 'UA-12332112-1', {'send_page_view': false, 'groups': 'affiliate'});
gtag('config', 'UA-98798778-1', {'send_page_view': false, 'groups': 'affiliate'});
Sending Google Analytics Events With gtag.js
Every event sent to Google Analytics has been accepting 4 parameters for almost a decade:
- An Event Category, here “Button”
- An Event Action, here “Click”
- An Event Label, here “Homepage Slider Button”
- An Event Value, here the number 5
With analytics.js, we were used to the ga() method:
1
ga('send', 'event', 'Button', 'Click', 'Homepage Slider Button', 5);
The new gtag.js library actually gets improved and simpler event sending capabilities, thanks to its new dataLayer-like support. You can now send custom events just like in Google Tag Manager with it’s simplest usage:
1
gtag('event', 'event_name');
Like the pageview, the gtag event supports custom, non mandatory parameters. Here’s the same event as the previous example to show all main properties applied to the new library.
1
2
3
4
5
6
gtag('event', 'Click', {
'event_category': 'Button', // good ol' event category
'event_action': 'Click' //defaults to the "event_name" (here "Click") if not set
'event_label': 'Homepage Slider Button',
'value': 5
});
The extensive list of suggested and other embedded event names one could use and much more can be found in the Event tracking with gtag.js section of Google’s documentation.
Persistent Parameter Value Support
The new gtag.js library has persistent parameter value support. Yes, you read that right: e-Commerce tracking setup just got way easier.
Let’s say you have your usual Google Analytics pixel on your e-commerce. What if you had multiple currency support and multiple country support on your website? Until now, you would’ve set the currency in your Google Analytics property, created many views and called it quits. You would’ve been stuck with whatever those settings where. But now you don’t!
Your user lands on your main US based, USD e-commerce:
1
gtag('config', 'UA-12345678-1', {'currency': 'USD', 'country': 'US'});
But he switches to the Canadian, CAD store to have prices in his preffered currency and shipping calculated right. On page load, all you have to do, without changing all your event scripts or creating a new view in Google Analytics:
1
gtag('config', 'UA-12345678-1', {'currency': 'CAD', 'country': 'CA'});
Now all your event values are now seen as CAD and from Canada.
If you did setup many properties on page load and have some javascript switcher, you can use the “set” method to change all values at once to CAD/CA or any other parameter:
1
gtag('set', {'country': 'CA', 'currency': 'CAD'});
Sending events to specific properties
Earlier, we’ve been setting groups for our affiliates, remember? Now it’s time to put it to the test by sending them both an event I used earlier, using the “send_to” parameter using either a group name, a property ID or both in an array.
Using a group name:
1
2
3
4
5
6
7
gtag('event', 'Click', {
'send_to': 'affiliates',
'event_category': 'CTA',
'event_action': 'Click',
'event_label': 'Homepage Slider Button',
'value': 5
});
Using a property ID:
1
2
3
4
5
6
7
gtag('event', 'Click', {
'send_to': 'UA-12332112-1',
'event_category': 'CTA',
'event_action': 'Click',
'event_label': 'Homepage Slider Button',
'value': 5
});
Using both:
1
2
3
4
5
6
7
gtag('event', 'Click', {
'send_to': ['UA-12345678-1', 'affiliates'],
'event_category': 'CTA',
'event_action': 'Click',
'event_label': 'Homepage Slider Button',
'value': 5
});
Take note you can put as many property IDs or group names in that array, mixed or not.
Pushing It Further
The new gtag.js library for Google Analytics is good. It bridges a gap between the Google Tag Manager that I love with the simpler, more classic tracking setups. It just gets more done, faster.
But, honestly, why not just switch to Google Tag Manager already?
If you would like to know more in-depth or advanced settings and implementations of the gtag.js library, feel free to suggest it in the comments or have a look at the full and extensive gtag.js documentation by Google.