<\/p>\n <\/a><\/p>\n<\/div>\n This is a guest post by Stephen Harris<\/a> from Seer Interactive<\/a> If Google Tag Manager<\/a> is loaded as the primary instrument for tracking on a webpage (as it should be), then all webpage tracking could and should be configurable via GTM. But we don\u2019t always control the circumstances, and it\u2019s not uncommon to face hardcoded Google Analytics<\/a> tracking outside of GTM.<\/p>\n Perhaps GA tracking cannot be removed from the website source code quickly enough. Maybe the website is on a publishing schedule that doesn\u2019t suit measurement needs, or maybe the folks responsible for the website don\u2019t have sufficient resources. Whatever the reason, you got a \u201cno\u201d when you Or what about when there are hardcoded GA commands in a platform or plugin? It could be screwing with your data. But chances are it\u2019s not doing anything at all (because it\u2019s tracking to the nonexistent default GA tracker) and there seems to be no way to get it to work through GTM.<\/p>\n And even when all tracking runs through Google Tag Manager, some things can be difficult (or impossible) to implement using the tag templates (such as adding GA plugins<\/a>, or defining Universal Analytics tracker field defaults).<\/p>\n Here\u2019s a solution.<\/p>\n \n \n Subscribe to the Simmer newsletter<\/a> to get the latest news and content from Simo Ahava into your email inbox!\n <\/p>\n <\/span><\/p>\n You can grab the code on GitHub<\/a>. Copy-paste it either into a Custom HTML Tag in Google Tag Manager, or load it in the page template proper.<\/p>\n It\u2019s called GA Spy<\/strong> because it can silently hijack and control all tracking that relies on Google\u2019s Universal Analytics library (analytics.js<\/strong>). Effectively, this is a Google Analytics listener that does karate.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n To put this in layman\u2019s terms, the script listens for interactions with the This blog post is written assuming the hardcoded tracking is for Universal Analytics, but there is a version of the script for the async GA library<\/a> (ga.js), to which the same core concepts apply.<\/p>\n Let\u2019s walk through the script logic. Before implementing, it\u2019s important to get a basic idea of what this script actually does. Once you understand the basics, you\u2019ll also understand why this should be considered a temporary solution<\/strong>. Indeed, you should document the use of this solution, so that when the hardcoded Universal Analytics code is eventually removed from the site, you won\u2019t be left hanging dry with methods that don\u2019t really do anything.<\/p>\n This section also explains this script\u2019s biggest caveat: GA Spy<\/strong> is not guaranteed to intercept (or even detect) tracking that fires while the page is loading (e.g. the standard GA snippet) if the hack is deployed via GTM. Capturing these requests requires that you deploy the script on the page template itself, which unfortunately might detract from the usefulness for those without developer resources handy.<\/p>\n For a more technical breakdown, check out the README<\/a>.<\/p>\n Let\u2019s start with an overview of how the Universal Analytics tracker works on the page.<\/p>\n Many GA users are familiar with the JavaScript namespace <\/p>\n <\/a><\/p>\n<\/div>\n So the standard Universal Analytics snippet instantiates Aside: Notice any similarities to the recommended format<\/a> for data layer pushes?<\/p>\n Once this queue is established, the snippet creates a script loader<\/em>, which starts an asynchronous request to download the analytics.js<\/strong> library from Google\u2019s servers.<\/p>\n Once analytics.js loads, it will run the commands in the command queue and replace the queue function The core of this script is the The The As soon as GA Spy<\/strong> is run, it will instantiate the command queue if it doesn\u2019t already exist, just as the Universal Analytics snippet would. Both in this script and in the Universal Analytics snippet, we\u2019re careful not to blindly set a new variable and lose any previous data.<\/p>\n Note: the above code does the exact same thing as the second line of the GA install snippet function, shown beautified under A Good Spy Starts With Research above.<\/p>\n Then, regardless of whether it already existed or was just initiated, GA Spy<\/strong> hijacks If However, if GA Spy<\/strong> finds the command queue<\/em> instantiated in Any function in the command queue will be executed as soon as the The only other thing we need to do is run the stack of existing commands through the listener, and when it returns false just filter that command out of the queue.<\/p>\n This should be an extremely reliable solution. In fact, the method of listening by \u201chijacking\u201d a function is used by a number of Google libraries, including GTM\u2019s own Data Layer<\/a> and Autotrack<\/a>. Note that it\u2019s possible GA Spy<\/strong> can be broken by an update to analytics.js, but the Nevertheless, there are some important caveats to note before using this.<\/p>\n Whenever this is used to modify or block a Tip: You can tell that you\u2019re dealing with hijacked GA by checking for the presence of the property In some cases, hijacking the GA function is necessitated by third-party vendors that require their JavaScript to be implemented with a hardcoded GA tracker.<\/p>\n In other cases, such as when completing a migration from hardcoded Google Analytics to Google Tag Manager, this treatment should be acceptable only as a short-term solution.<\/p>\n If GA Spy<\/strong> runs before analytics.js loads, you will be able to access and block 100% of the commands queued to analytics.js. But if GA Spy<\/strong> runs after, then it has zero insight into what hits (if any) were previously fired. So if you want to intercept all hardcoded commands, GA Spy<\/strong> needs to be deployed directly on the page. However, for many purposes, this is not necessary at all.<\/p>\n Unfortunately, in some cases where deploying on-page is necessary, the inability to make on-page changes is the very problem that prompted the need for GA Spy<\/strong> in the first place, making this solution a catch-22. For GTM migrations, one way to mitigate this is to request to have GA Spy<\/strong> placed on the page at the same time that GTM is added.<\/p>\n Note, if synchronous loading of Google Tag Manager is ever supported, hardcoding GA Spy<\/strong> will no longer be required, but still recommended, because loading anything synchronously in the Currently, GA Spy<\/strong> only intercepts GA commands that are called upon the global Another limitation is that GA Spy<\/strong> can process only the values passed to GA commands. It doesn\u2019t provide access to the default values for all the fields that are populated by analytics.js.<\/p>\n One effect of these two facts is that GA Spy<\/strong> will not pick up hit modifications (or extra hits) done by GA plugins (and other implementations using the Tasks API). This is by design and no support for this planned. (If you see a need for this, describe the use case and upvote this enhancement here<\/a>.)<\/p>\n As a developer I have many protests against the following statement, but I can\u2019t deny it\u2019s essential truth: If you need to intercept GA commands that run upon page load or shortly thereafter (such as the tracker creation or If the commands you need to intercept are triggered by user action, then this is not an issue and you can deploy GA Spy<\/strong> using GTM.<\/p>\n![\"Stephen](\"https:\/\/www.simoahava.com\/images\/2016\/09\/stephen-harris.jpg\")
<\/p>\n
\n. He was kind enough to share his awesome solution in this blog, so I\u2019m very grateful indeed for his contribution.<\/em><\/p>\nrequested<\/del> insisted on removal. (You did<\/em> insist on removal, didn\u2019t you?)<\/p>\n
\n X<\/span><\/p>\n
\n The Simmer Newsletter<\/strong>\n <\/p>\n1. Spying On GA<\/h2>\n
<\/p>\nga()<\/code> interface, returning the arguments passed to the function for you to process for whatever purpose you want. For example, you can automatically copy all calls to ga('send'...)<\/code> to dataLayer.push()<\/code> syntax, allowing you to fluently replicate hardcoded Universal Analytics tracking in Google Tag Manager.<\/p>\n1.1. Spy Code 101<\/h3>\n
1.2. A Good Spy Starts With Research<\/h3>\n
ga<\/code>. It\u2019s the global object for tracking with the Universal Analytics library (analytics.js). When the browser loads the page, this object is actually processed twice. First, it\u2019s created by the Universal Analytics snippet<\/a>, and it queues<\/em> all commands to ga()<\/code> while waiting for the library to load. Then, once the library has loaded, the namespace is converted to a full interface which processes each command as it is executed.<\/p>\n<\/p>\nga<\/code> as a tiny function that saves all the arguments you pass to it as an Array in ga.q<\/code>. This is called the command queue<\/em>. It\u2019s created by the second line of the GA install snippet function, shown here (beautified with more readable variable names):<\/p>\nwindow<\/span>[gaObjName] = window<\/span>[gaObjName] || function<\/span>() {\n ( window<\/span>[gaObjName].q = window<\/span>[gaObjName].q || [] ).push( arguments )\n},\nga.l = 1<\/span> * new<\/span> Date<\/span>();\n<\/code><\/pre>\n<\/div>\n( window<\/span>.dataLayer = window<\/span>.dataLayer || [] ).push( { } )\n<\/code><\/pre>\n<\/div>\nga<\/code> with much more robust object, which we call the ga<\/code> object or function. Once this happens, ga<\/code> stops keeping track of previously called commands, and will run commands as soon as they are called.<\/p>\n1.3. Spy Moves<\/h3>\n
hijack<\/code> function. What it does is simple: it saves a private reference to the global ga<\/code> object, then updates the global reference (window.ga<\/code> or simply ga<\/code>) to point to a custom function, which we\u2019ll call our \u201cproxy\u201d function. Note that if you\u2019ve chosen to rename the global function as something other than ga<\/code>, it will still work nicely with GA Spy<\/strong>.<\/p>\nfunction<\/span> hijack(){\n \/\/ The current global GA object (could be GA command queue or loaded GA object).\n<\/span> var<\/span> gaOrig = window<\/span>.ga;\n \/\/ Replace global GA object with a proxy.\n<\/span> window<\/span>.ga = proxy;\n \/\/ Maintain references to GA's public interface.\n<\/span> for<\/span>( k in<\/span> gaOrig )\n if<\/span>( gaOrig.hasOwnProperty( k ) )\n proxy[k] = gaOrig[k];\n}\n<\/code><\/pre>\n<\/div>\nproxy<\/code> function mimics the data members and methods of the original ga<\/code> function. Thus it behaves like the original, which we accomplish by passing its arguments back to the ga<\/code> function (and returning the result). But, only if we so choose. We can reject the message, simply by not sending the message to the original ga<\/code> function, and thus intercept and block the hardcoded GA from running its requests altogether.<\/p>\nfunction<\/span> proxy(){\n \/\/ Grab all arguments as an array.\n<\/span> var<\/span> args = [].slice.call( arguments );\n \/\/ Unless processArgs() returns false ...\n<\/span> if<\/span>( processArgs( args ) )\n \/\/ ... pass through to original GA object.\n<\/span> return<\/span> gaOrig.apply( gaOrig, args );\n};\n<\/code><\/pre>\n<\/div>\nprocessArgs<\/code> function simply delegates the processing and filtering of all commands to you (via the custom listener function).<\/p>\nfunction<\/span> processArgs( a ){\n \/\/ Call listener, return false only if listener returns false.\n<\/span> return<\/span> listener( a ) !== false<\/span>;\n}\n<\/code><\/pre>\n<\/div>\n1.4. Time To Spy<\/h3>\n
if<\/span>( ! window<\/span>[gaObjName] ){ \/\/ If global object doesn't exist ...\n<\/span> ga = function<\/span>(){\n if<\/span>( ! window<\/span>[gaObjName].q )\n window<\/span>[gaObjName].q = [];\n window<\/span>[gaObjName].q.push( arguments );\n };\n ga.l = 1<\/span> * new<\/span> Date<\/span>();\n window<\/span>[gaObjName] = ga;\n}\n<\/code><\/pre>\n<\/div>\nga<\/code>.<\/p>\nga<\/code> is found to be the fully-formed Universal Analytics tracking method, then analytics.js has already loaded and we will be tapped into all subsequent calls to ga<\/code> until the page is unloaded. Job done. Since the global ga<\/code> object does not keep track of previously run ga()<\/code> commands, we cannot access the information passed in those commands. It\u2019d be useful if we could access the command history, but we still would not be able to block those hits, since JavaScript does not support time reversal (not gonna work: setTimeout( hijack, -5 )<\/code>).<\/p>\nga<\/code>, then we know that if\/when analytics.js loads, it will replace the hijacked command queue (our proxy<\/code>) with the actual Universal Analytics tracking method. We can easily hijack it again, but timing is important. We want the global ga<\/code> object to be in existence for as short a period as possible to avoid missing any commands before we manage to hijack it.<\/p>\nga<\/code> object is ready<\/a>. So we add the hijack<\/code> function, thereby setting a trap the ga<\/code> object will trigger immediately upon loading, and put our proxy<\/code> in its place before the ga<\/code> object is even available to other scripts.<\/p>\n2. Reliability And Caveats<\/h2>\n
ga<\/code> interface GA Spy<\/strong> relies on is wholly defined in the standard Universal Analytics install snippet, so breakage due to unannounced library updates is highly unlikely.<\/p>\n2.1. Uncommon Behavior For A Common Library<\/h3>\n
ga<\/code> command, I would consider this a \u201chacky\u201d solution. Although the code is sound, such usage modifies the typical behavior of the global ga()<\/code> function, making it work differently than it works on 99% of other websites. This can impede troubleshooting and confuse those who are new to Google Analytics or JavaScript.<\/p>\n_gaOrig<\/code> in the global Google Analytics object. By default it would be: window.ga._gaOrig<\/code>.<\/em><\/p>\n2.2. Cannot Intercept Hardcoded Pageviews From GA<\/h3>\n
2.3. Incomplete<\/h3>\n
ga<\/code> object, but there are other ways to send commands to analytics.js. Many GA plugins and some custom implementations call commands directly upon the tracker object (i.e. ga.getAll()[0].send('event')<\/code>). Support for intercepting these commands may be added in the future<\/a>.<\/p>\n2.4. More Code!<\/h3>\n
code is bad<\/code>. Meaning, no matter how good the code, no code is better<\/a>. Code leads to bugs which lead to more code, which leads to more bugs. Even bullet-proof code requires some degree of maintenance. Perhaps the biggest issue is that a code-based solution imposes a higher skill barrier on managing and customizing the solution. As a general rule, we should avoid custom code whenever there is a sound alternative.<\/p>\n3. Usage<\/h2>\n
3.1. Placement<\/h3>\n
'pageview'<\/code> in the base GA install snippet), then you\u2019ll need deploy GA Spy<\/strong> in an inline script tag or external script (with no async<\/code> or defer<\/code> attributes) above the first GA command (usually in the base GA snippet).<\/p>\nhtml>\n head>\n ...\n \/\/ GA Spy:\n script>\n ;window<\/span>.gaSpy = window<\/span>.gaSpy...\n script<\/span>>\n\n \/\/ Universal Analytics snippet:\n script>\n (function<\/span>(i,s,o,g,r,a,m)...\n script<\/span>>\n ...\n head<\/span>><\/code><\/pre>\n<\/div>\n