Introduction to Gtag.js

google-analytics-explained-introduction-to-gtag-js

Migration from analytics.js to gtag.js is a significant change. Google Analytics has released new JavaScript libraries in the past, but using jtag.js goes beyond any of these. By using gtag.js in place of analytics.js, you’ll simplify website tagging across all the Google products you use.

What Is Gtag.js?

Gtag.js changes how Google collects data for tools ranging from Google Analytics to AdWords. Unlike analytics.js, there are no trackers involved to send data to Google Analytics. The aim of gtag.js is to have a single centralized script tag that can send all data to Google marketing and analytics tools simultaneously. For you, this means less time configuring tags on your website.

For instance, with gtag.js, there is no need for different script tags. With analytics.js, you may need one tag for pageview tracking code on every page, another for tracking interactions, another for ecommerce tracking, another for conversion tracking, and a final one for remarketing tags in AdWords.

With gtag.js, you keep many tags for Google products in one place in your code. Plus, you are able to send data to multiple tools at the same time.

The key to gtag.js is the “config” command. This command pulls the corresponding library for the product. It also handles some initial setup of items by default, but if you’d rather prevent this, you can simply update the config line.

How to Add Gtag.js to Your Site

To use gtag.js, you need to replace the current analytics.js script across your entire site. To start, change the analytics.js tracking script for the gtag.js global snippet, which looks like this:

<!Global Site Tag (gtag.js) - Google Analytics -->

<script async src=“htttps://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID”></script>

<script>

 window.dataLayer = window.dataLayer || [];

 function gtag(){dataLayer.push(arguments);}

 gtag(‘js, new Date());

 

 gtag(‘config’, ‘GA_TRACKING_ID’);

</script>

 

Input your tracking ID in place of “GA_TRACKING_ID” in this snippet and all the following. If you want to configure a second Google Analytics property, add another config command, like this:

gtag(‘config’, ‘GA_TRACKING_ID_2’);

After this, start replacing analytics.js script from other areas of your site.

Pageviews

Whereas analytics.js uses trackers to send pageviews, gtag.js uses a config command. This means you need to remove the analytics.js code and add the global tracking snippet to automatically send pageviews to the Google Analytics property.

The exception is if you want to track pageviews with specified trackers. In this case, you need to replace the analytics.js code with the gtag.js event code:

gtag(‘event’, ‘page_view’, { ‘send_to’: ‘GA_TRACKING_ID’ });

The default is to send a pageview hit to Google Analytics. If you don’t want to send a hit, you need to add the following:

gtag(‘config’, ‘GA_TRACKING_ID’, { ‘send_page_view’: false });

Events

Similarly, analytics.js uses trackers to send events to Google Analytics. You need to replace the current code with a gtag.js event command, which looks like this:

gtag(‘event’, eventName, eventParameters);

Change “eventName” to the event you want to log.

However, if you are using a specified tracker to send events to Google Analytics, you need to delete the analytics.js code and replace it with this gtag.js event command:

gtag(‘event’, eventName, {

 ‘send_to’: ‘GA_TRACKING_ID’,

 ‘parameter1’: ‘value1’,

 ‘parameter2’: ‘value2’,

// ...

});

 

Custom Dimensions and Metrics

Another place to change analytics.js is in any send commands that send custom dimensions or metrics.

For custom dimensions, use this code:

gtag(‘config’, ‘GA_TRACKING_ID’, {

 ‘custom_map’: {‘dimension<Index>’: ‘dimension_name’}

});

gtag(‘event’, ‘any_event_name’, {‘dimension_name’: ‘dimension_value’});

 

For custom metrics, use this:

gtag(‘config’, ‘GA_TRACKING_ID’, {

 ‘custom_map’: {‘metric<Index>’: ‘metric_name’}

});

gtag(‘event’, ‘any_event_name’, {‘metric_name’: ‘metric_value’});

 

User Timings

To track user timings, you need to replace analytics.js send commands with:

gtag(‘event’, ‘timing_complete’, {

 ‘name’: ‘timingVar’,

 ‘value’: timingValue

 ‘event_category’: ‘timingCategory’,

 ‘event_label’: ‘timingLabel’

});

 

Exceptions

Finally, you have exceptions. Replace such analytics.js send commands with the gtag.js event command:

gtag(‘event’, ‘exception’, {

 ‘description’: ‘error_message’,

 ‘fatal’: false  // set to true if the exception is fatal

});

 

Should You Use Gtag.js?

Not everyone needs to upgrade to gtag.js. If you are already using Google Tag Manager on your site or if you want to add tracking to a new site and you are able to use Google Tag Manager, you are better off sticking with this tool. However, if you are unfamiliar with Google Tag Manager, you will find that gtag.js is easy to use and will simplify your life, as it works with many Google products.

If you like my articles,