Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Google gtag.js is now recommended over analytics.js #2014

Closed
coliff opened this issue Jan 12, 2018 · 10 comments
Closed

Google gtag.js is now recommended over analytics.js #2014

coliff opened this issue Jan 12, 2018 · 10 comments

Comments

@coliff
Copy link
Member

coliff commented Jan 12, 2018

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
Copy link
Member

roblarsen commented Jan 12, 2018

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
Copy link
Member

Where did we land with this?

@Malvoz
Copy link

Malvoz commented Apr 4, 2018

@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
Copy link
Member Author

coliff commented Apr 5, 2018

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
Copy link
Contributor

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
Copy link

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
Copy link
Member Author

coliff commented Mar 8, 2019

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.

@coliff coliff added the has-pr label Mar 11, 2019
@coliff coliff closed this as completed Mar 17, 2019
nhoizey added a commit to nhoizey/precious-prana.com that referenced this issue Mar 31, 2019
@scommercemage
Copy link

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
Copy link

fbens commented Aug 31, 2019

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
Copy link

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants