Final up to date 2 March 2018.
Every so often you is likely to be urged to run Google Tag Supervisor and/or Google Analytics domestically, which means with out the advantage of an online server serving your information. In different phrases, you’re loading an HTML file out of your laptop within the internet browser. You possibly can establish a domestically run file by the file:/// protocol within the handle bar.
Now, deploying Google Tag Supervisor onto that file with the hopes of working Google Analytics requests domestically isn’t fairly easy. Nicely, really, the deployment is pretty easy, however customizing it in order that it really sends helpful hits requires some tweaking.
Word! You’ll not have the ability to run Preview mode with native information. GTM routinely makes use of relative protocol when downloading the preview library, and relative protocol on native information falls again to
file:///
for the HTTP requests. If somebody comes up with a chic workaround, please let me know within the feedback!
X
The Simmer Publication
Subscribe to the Simmer e-newsletter to get the most recent information and content material from Simo Ahava into your e mail inbox!
1. Modify the GTM Container Snippet
Initially, it is advisable to modify the Google Tag Supervisor container snippet itself. It makes use of relative protocol within the script loader URLs, and since native information use the file URI scheme, it is advisable to explicitly inform Google Tag Supervisor from the place to fetch the library.
So, if that is the container snippet:
<!-- Google Tag Supervisor -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXX"
peak="0" width="0" fashion="show:none;visibility:hidden"></iframe></noscript>
<script>(operate(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.begin':
new Date().getTime(),occasion:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,doc,'script','dataLayer','GTM-XXXXX');</script>
<!-- Finish Google Tag Supervisor -->
You possibly can see how the 2 URLs embedded inside (//www.googletagmanager.com/ns.html...
within the iframe and //www.googletagmanager.com/gtm.js...
within the script loader itself) wouldn’t have an specific protocol set. So, it is advisable to change these two strings to grow to be https://www.googletagmanager.com/ns.html...
and https://www.googletagmanager.com/gtm.js...
, respectively. That’s the solely change it is advisable to make to load Google Tag Supervisor.
So, properly executed!
The subsequent step is to configure the Google Analytics Tags. GA locations some restrictions on the net browser if loaded with its default settings:
-
The host making the requests to GA must have both http or https because the protocol.
-
The host should assist storing the Consumer ID in browser cookies.
-
The host should have the ability to move a correct Doc Location worth (the URL) to Google Analytics.
Every one in all these three is violated by native information. First, native information use the file:/// protocol, as acknowledged earlier. Second, internet browsers disable cookies when searching native information. Third, the URL despatched by the shopper to Google Analytics within the Doc Location area is the one with the file URI scheme, once more, which means it’s not parsed appropriately by GA into a correct web page path.
Fortunately, Google Analytics has fields that you may set to make it move all these three checks.
First, you’ll must create a helper Variable. It’s a Customized JavaScript Variable with the identify Empty operate and the next code inside:
operate() {
return operate() {}
}
Subsequent, in your Google Analytics Tags, browse all the way down to Fields to Set, and add the next fields and values:
Subject identify: checkProtocolTask
Subject worth: {{Empty operate}}
Subject identify: storage
Subject worth: none
Subject identify: web page
Subject worth: {{Web page Path}}
The primary area tells GA to not verify for legitimate protocol (http or https) when making the request to /acquire.
The second area tells GA to not use browser cookies for persisting the Consumer ID.
The third area tells GA to override the defective Doc Location with the web page’s pathname.
And that’s it! With these steps, you possibly can monitor your Pageviews and Occasions in your native information, in case you are so inclined.
3. Persist Consumer ID
Nevertheless, the draw back of setting storage : none
is that you simply gained’t have a persistent Consumer ID anymore. Thus, each single web page load will reset the Consumer ID, leading to a brand new Person and new Session with each single web page.
We don’t need that.
As an alternative, we are able to hack round that utilizing the browser’s localStorage
API to retailer the Consumer ID and fetch it with every request.
You’ll want two new Variables.
The primary one is a Customized JavaScript Variable with the identify JS – Set _clientId, and the next code inside:
operate() {
return operate() {
if (window.Storage) {
window.localStorage.setItem('_clientId', ga.getAll()[0].get('clientId'));
}
}
}
The second is a Customized JavaScript Variable with the identify JS – Get _clientId, and the next code inside:
operate() {
if (window.Storage) undefined;
return;
}
The primary Variable shops the Consumer ID within the browser’s localStorage
, and the second Variable fetches it from the identical place (or returns undefined if Consumer ID isn’t saved).
Lastly, in your Google Analytics Tags, go to Fields to Set once more, and set the next two fields:
Subject identify: hitCallback
Subject worth: {{JS – Set _clientId}}
Subject identify: clientId
Subject worth: {{JS – Get _clientId}}
And there you go! Now, the primary time a Google Analytics Tag fires, it shops the Consumer ID created within the course of into the browser’s localStorage
. For every subsequent Tag, till localStorage
is manually purged, the Tags fetch the saved Consumer ID from localStorage
and ship it with the requests. This fashion periods and customers keep intact, and also you’ll have the ability to derive correct insights from the info.
Abstract
This hack in all probability has solely marginal use, nevertheless it’s nonetheless a legitimate manner of monitoring Google Analytics in native information. You don’t at all times take pleasure in (or the talents to deploy) an online server, so working information domestically is, if nothing else, a hat tip to the Notepad + FTP content material administration methods from the Nineties.
Additionally, you should utilize the Consumer ID hack in your common trackers, too, when you have some cause to keep away from browser cookies for persisting knowledge.