Html5-boilerplate: Google gtag.js is now recommended over analytics.js

[coliff]

When adding a new site to Google Analytics the tracking code provided is now gtag.js which works a bit differently to the previously recommended analytics.js.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-XXXXXX-X');
</script>

Google Universal Analytics (Analytics.js) is still available to users but I think we need to clarify in the documentation that the useful tracking snippets we currently have in H5BP (Anonymize IP addresses, Track jQuery AJAX requests, Track JavaScript errors and Track page scroll) are for analytics.js and not gtag.js.

Today I'm working on migrating a site from analytics.js to gtag.js (following this guide: https://developers.google.com/analytics/devguides/collection/gtagjs/migration) so will see if the snippets we have can be updated to work with gtag.js.

If anyone has any additional thoughts on this, please chime in.

[roblarsen]

Report back on what you find. (in addition to updating the docs ) I'm so many years removed from working on sites (vs. super-secret doubleplus fancy web apps) that I don't have any clue about this stuff anymore.

[roblarsen]

Where did we land with this?

[Malvoz]

@coliff

Actually, anonymize_ip is applicable to the gtag.js code snippet.

gtag.js installation:
https://developers.google.com/analytics/devguides/collection/gtagjs/

IP anonymization w/ gtag.js:
https://developers.google.com/analytics/devguides/collection/gtagjs/ip-anonymization

Example:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://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', { 'anonymize_ip': true });
</script>

[coliff]

Hi @Malvoz - yes, I'm sure many of the tracking snippet scripts we have for analytics.js (Anonymize IP addresses, Track jQuery AJAX requests, Track JavaScript errors and Track page scroll) are also available to use in some form or another for gtag.js, but the implementation is different... so with gtag it'd be:
gtag('config', 'GA_TRACKING_ID', { 'anonymize_ip': true });
but for analytics.js it'd be:
ga('create', 'UA-XXXXX-X', 'auto'); ga('set', 'anonymizeIp', true);

The scripts for tracking outbound links are different too and the 'track javascript errors' script we have (https://github.com/h5bp/html5-boilerplate/blob/master/src/doc/extend.md#track-javascript-errors-in-google-analytics) doesn't work with gtag.js so would need to be rewritten.

Overall, I found that if the only Google script/service you need on your site is Google Analytics then it's simpler to use analytics.js and not bother with gtag.js.

So for H5BP we either need to update our tracking scripts to work with gtag.js or add a note that these are only for analytics.js. I favour adding the note since I don't have the equivalent working scripts for those.

[TheDancingCode]

I find this comment by Philip Walton a convincing argument not to switch to gtag.js:

The other thing to be aware of about gtag is it's not really an analytics.js replacement, it's a wrapper library on top of analytics.js (and others), meaning the gtag library still needs to load analytics.js, and it needs to convert all relevant gtag commands to analytics.js commands and run them.

As of right now, gtag is 54.5K and analytics.js is 33.7K, and since gtag will also load analytics.js, it's 262% more code for less functionality. There's also the problem that gtag is site-specific (because you add your tracking ID as a query string), so it's unlikely your users will have it cached; analytics.js on the other hand is used all over the web, so it's very likely to already be in your visitors cache when they load your site.

So, for all these reasons, I don't plan to switch to gtag as it'll just end up making my site take longer to load and consume more of my user's bandwidth.

[jcutrell]

I recently did a bit of a deep dive to understand some of the differences between analytics.js and gtag.js - one small thing that is worth considering is that gtag does not support the Plugin format that analytics.js supports, so moving to this may break some future implementation plans, but probably fine for the boilerplate.

[coliff]

Finally got round to addressing this with a PR. (#2118) - Thanks for the feedback @jcutrell and @TheDancingCode !
Also, we're adding ga('set','transport','beacon'); to the default analytics snippet which improves performance.

[scommercemage]

When adding a new site to Google Analytics the tracking code provided is now gtag.js which works a bit differently to the previously recommended analytics.js.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-XXXXXX-X');
</script>

Google Universal Analytics (Analytics.js) is still available to users but I think we need to clarify in the documentation that the useful tracking snippets we currently have in H5BP (Anonymize IP addresses, Track jQuery AJAX requests, Track JavaScript errors and Track page scroll) are for analytics.js and not gtag.js.

Today I'm working on migrating a site from analytics.js to gtag.js (following this guide: https://developers.google.com/analytics/devguides/collection/gtagjs/migration) so will see if the snippets we have can be updated to work with gtag.js.

If anyone has any additional thoughts on this, please chime in.

The following extensions could be useful

Magento 1 Gtag extension

Magento 2 Gtag extension

[fbens]

I used ga for several years, today I found that google analytics code recommend changed from ga to gtag. I am very confused why google update ga to gtag,what is the benefit ?

[scommercemage]

@fbens, it is adding all google trackings using one tracking including GA, AdWords, Remarketing, Optimizer etc. It is used for multiple trackings instead of just GA. Hope it helps