Should we be using Google Analytics and Google Tag Manager snippets concurrently? #496

anselmbradford · 2015-04-29T13:50:06Z

In https://github.com/cfpb/cfgov-refresh/blob/flapjack/_layouts/base.html#L113-L129 we have both Google Analytics (GA) and the Google Tag Manager (GTM) code snippets.

I noticed in https://support.google.com/tagmanager/answer/2574370 the following:

A container snippet is provided for each container. Copy and paste this snippet immediately after the opening tag on every page on the site. Be sure to remove tags (e.g. Google Analytics, AdWords Conversion Tracking, etc) from the site pages at the same time.

I'm not super familiar with GTM, but according to http://stackoverflow.com/questions/23640645/what-is-the-difference-between-google-tag-manager-and-google-analytics we can output GA code from GTM.

Scotchester · 2015-04-29T14:11:37Z

/cc @bethannenc

bethannenc · 2015-04-29T14:17:58Z

That is true - once we have GTM fully implemented we can remove the old GA code and rely just on GTM. However, we have not removed the GA code as of yet because we wanted to let the two accounts run in parallel to make sure GTM was implemented correctly. We are almost at that point where we would feel comfortable removing the code - most likely by June 1. For new content, we are comfortable just implementing GTM and not adding the GA code snippet.

I hope that helps - let me know if you have any other questions.

anselmbradford · 2015-04-29T15:11:32Z

@bethannenc Do you know why GTM has a jQuery dependency and can that be removed/replaced with native code? http://www.googletagmanager.com/gtm.js?id=GTM-KMMLRS

Scotchester · 2015-04-29T15:13:53Z

/cc @wernerc

bethannenc · 2015-04-29T15:14:38Z

GTM itself does not have a jQuery dependency. However, some of the tags that we have written are written in jQuery and they will not work if jQuery is not on the page. We could fix that by translating all of our tags in jQuery into JS but that would be a major pain. @wernerc - thoughts?

KimberlyMunoz · 2015-04-29T15:16:09Z

Thanks for asking this question. I had the same question for eRegs.

cc @ascott1

mistergone · 2015-04-29T15:24:09Z

My goal is to try to have all Tag Manager code fit the following:

For general use on any given page (link click handlers, for instance), use native Javascript
For specific pages that have complex analytics, use jQuery to ease the writing of said code (assuming the page already uses jQuery, which most do). In these cases, we need to ask developers to export jQuery to window.jQuery. Good examples are the Paying for College cost comparison tool, Owning a Home's rate checker tool, etc.
Any time jQuery is used, include a check in the snippet for window.jQuery, and do not execute any code if it does not exist (instead, an "error event" is throw via Tag Manager into Analytics - no error is reported to the client browser).

Most of the GTM code is just copied from old Analytics code, then modified to work with GTM. Most of the old Analytics code used jQuery. We're now in a world where jQuery is not used everywhere on our pages, and sometimes, even when it is, it's not exposed to the window scope (not to mention $). That shouldn't stop our Analytics code from working on all of our pages, so some overhaul is now necessary.

cfarm · 2015-05-15T15:13:20Z

@virginiacc

jimmynotjim · 2015-05-22T13:00:56Z

Bumping this issue because we're seeing lots'o jQuery undefined errors related to GTM and I'm now wondering if we're missing analytics capturing when that happens. See the conversation on #585

jimmynotjim · 2015-05-22T15:18:06Z

To continue the conversation in #585, the error pops up on pages where jQuery is used, but not all the time. The issue as I understand it from @anselmbradford is that GTM loads asynchronously sometimes beating out the loading of jQuery.

anselmbradford · 2015-05-22T17:03:05Z

Yeah, for context look at the source code for the live www site:

<head … >

…

<script type="text/javascript" async="" src="http://www.google-analytics.com/analytics.js"></script>
<script async="" src="//www.googletagmanager.com/gtm.js?id=GTM-KMMLRS"></script>
<script src="//www.google-analytics.com/ga.js"></script>

…

<script type="text/javascript" src="http://www.consumerfinance.gov/wp-content/themes/cfpb_nemo/_/js/jquery-1.9.1.min.js?ver=v4.2.10v4.2.24"></script>

…

<!-- H5BP's Asynchronous Google Analytics snippet. -->
<script>
  var _gaq=[['_setAccount','UA-20466645-3'],['_setDomainName', '.consumerfinance.gov'],['_trackPageview']];
  (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
  g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
  s.parentNode.insertBefore(g,s)}(document,'script'));
</script>   

…

</head>

That's the head with everything but the tracking code and jQuery excluded. You'll notice the script order is:

Google Analytics (GA) script
Google Tag Manager (GTM) script
GA script
Download jQuery
HTML5 Boilerplate (H5BP) script to inject GA script

Looking at this without much understanding of how GTM works under ideal circumstances it looks to me like this is happening:

GTM asynchronously loads.
jQuery starts downloading.
H5BP dynamically injects a GA ga.js script below GTM (oops—this redundant GA script really looks like a mistake to me).
jQuery finishes downloading.
GTM initializes with its jQuery-dependent tags.
GTM dynamically injects a second GA analytics.js script above GTM.

Under less ideal circumstances this could happen as far as I can see:

GTM asynchronously loads.
jQuery starts downloading.
H5BP dynamically injects a GA ga.js script below GTM.
GTM initializes with its jQuery-dependent tags. Throws error because jQuery hasn't finished downloading.
jQuery finishes downloading.
GTM dynamically injects a second GA analytics.js script above GTM (I think? I'm not sure what jQuery is used for in the tags, so I don't know if lack of jQuery would stop the GA injection).

cfgov-refresh has moved scripts around and jQuery loads in the footer now, this refactoring certainly could have introduced issues regarding load order, but the outcome should be the same as the live site and cfgov-refresh are both starting jQuery downloading after GTM. Ideally, GTM would handle it's own dependency-management and dynamically inject a script for jQuery if it wasn't available—that is if it really needs jQuery at all and couldn't be refactored.

jimmynotjim · 2015-05-22T17:22:56Z

You're forgetting the GTM script in the <body> on L:85 of cf.gov. I don't think GTM does anything till it gets to there, so jQuery has already been loaded at that point.

The issue on the demo appears to be that jQuery isn't loaded until the footer. I believe the reason it's a hit or miss issue is because the main script file is being cached by the browser and loading faster on subsequent page loads.

mistergone · 2015-05-22T17:45:17Z

This can easily be fixed by me playing with a few things in GTM. Sadly, I am on vacation, so this comment is all I can do until June. :D

anselmbradford · 2015-05-22T17:45:34Z

@jimmynotjim Ah! Good catch, yup see that now, so the body script is dynamically creating the GTM script in the head, so should be good on live. Updated order is:

Google Analytics (GA) script (dynamically generated).
Google Tag Manager (GTM) script (dynamically generated).
GA script (dynamically generated).
Download jQuery.
HTML5 Boilerplate (H5BP) script to inject GA script.
(in body) script to inject GTM and GA script in head.

jimmynotjim · 2015-05-22T19:25:06Z

Right, but the generation scripts aren't adding/loading the dynamic scripts until the browser has parsed them, and by that point it should have already started loading jQuery. In this case page order does not entirely equal loading order. Load order is something more like:

Download jQuery
HTML5 Boilerplate (H5BP) script inject GA script url to head and begins downloading it
GTM generation script injects GTM and GA script url to head and begins downloading them

There's still a chance of the GTM source beating out jQuery on cf.gov, but it's far less (and I've yet to replicate it) than on the demo sites since jQuery isn't loaded until almost last on them.

Edit, here's the timeline showing this in action

anselmbradford · 2015-05-22T19:29:18Z

@jimmynotjim Yeah, that order I listed was just order the scripts appear in the source, not load order.

jimmynotjim · 2015-05-22T19:33:03Z

What order they're in the source doesn't really matter though right? They could be injected anywhere and the loading order would still be the same.

jimmynotjim · 2015-05-22T19:43:19Z

Here's the problem on the demos, common.min.js (where jQuery lives) is so bloated that it's not even done downloading till much later than GTM

Also, I found if I disable caching in the Console Settings I get the error every time. When cache is enabled it's a bit better.

anselmbradford · 2015-05-22T21:47:06Z

What order they're in the source doesn't really matter though right?

That is right. Sorry I should I have been clearer—I was just updating the first list in #496 (comment).

So as a stop-gap this is relatively straightforward fix I think. We can place a CDN to jQuery in the head and use https://github.com/thlorenz/browserify-shim#a-expose-global-variables-via-global in browserify. It probably wouldn't be a bad idea to load jQuery from a CDN anyway, so this would be a fine direction to go I think. Eventually though it would be better to load jQuery in the footer to avoid a blocking script in the head. Opened #587. Comment there if the approach I wrote seems off.

anselmbradford · 2016-03-25T18:16:14Z

Looks like this can be closed. I just realized GA was removed awhile ago 7e8191e
@bethannenc Are you'll okay with it just being GTM for launch (that would be our preference, since it's Google best-practice). Otherwise, closing this because standalone GA is gone and the jquery CDN is in the head with a TODO comment.

bethannenc · 2016-03-25T18:43:27Z

@anselmbradford Yep - we should only be using GTM at this point. No need to keep any old GA code.

anselmbradford added the question label Apr 29, 2015

jimmynotjim mentioned this issue May 22, 2015

Bugfix - Initialize scripts in the correct order #585

Merged

jimmynotjim added the [issue-type] bug label May 22, 2015

anselmbradford mentioned this issue May 22, 2015

Load global jQuery CDN to satisfy GTM requirement #587

Closed

KimberlyMunoz added the perf label Sep 28, 2015

KimberlyMunoz mentioned this issue Sep 28, 2015

Google Analytics Changes #1033

Merged

anselmbradford closed this as completed Mar 25, 2016

anselmbradford mentioned this issue Aug 8, 2016

Reformats base_update.html for consistency w/ base.html #2283

Merged

sebworks mentioned this issue Aug 12, 2016

WIP: Removing render-blocking javascript #2300

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Should we be using Google Analytics and Google Tag Manager snippets concurrently? #496

Should we be using Google Analytics and Google Tag Manager snippets concurrently? #496

anselmbradford commented Apr 29, 2015

Scotchester commented Apr 29, 2015

bethannenc commented Apr 29, 2015

anselmbradford commented Apr 29, 2015

Scotchester commented Apr 29, 2015

bethannenc commented Apr 29, 2015

KimberlyMunoz commented Apr 29, 2015

mistergone commented Apr 29, 2015

cfarm commented May 15, 2015

jimmynotjim commented May 22, 2015

jimmynotjim commented May 22, 2015

anselmbradford commented May 22, 2015

jimmynotjim commented May 22, 2015

mistergone commented May 22, 2015

anselmbradford commented May 22, 2015

jimmynotjim commented May 22, 2015

anselmbradford commented May 22, 2015

jimmynotjim commented May 22, 2015

jimmynotjim commented May 22, 2015

anselmbradford commented May 22, 2015

anselmbradford commented Mar 25, 2016

bethannenc commented Mar 25, 2016

Should we be using Google Analytics and Google Tag Manager snippets concurrently? #496

Should we be using Google Analytics and Google Tag Manager snippets concurrently? #496

Comments

anselmbradford commented Apr 29, 2015

Scotchester commented Apr 29, 2015

bethannenc commented Apr 29, 2015

anselmbradford commented Apr 29, 2015

Scotchester commented Apr 29, 2015

bethannenc commented Apr 29, 2015

KimberlyMunoz commented Apr 29, 2015

mistergone commented Apr 29, 2015

cfarm commented May 15, 2015

jimmynotjim commented May 22, 2015

jimmynotjim commented May 22, 2015

anselmbradford commented May 22, 2015

jimmynotjim commented May 22, 2015

mistergone commented May 22, 2015

anselmbradford commented May 22, 2015

jimmynotjim commented May 22, 2015

anselmbradford commented May 22, 2015

jimmynotjim commented May 22, 2015

jimmynotjim commented May 22, 2015

anselmbradford commented May 22, 2015

anselmbradford commented Mar 25, 2016

bethannenc commented Mar 25, 2016