Google Analytics from a file:// url

Viewed 11159

We have an ajaxy sort of html based app framework thing and want google analytics to work with it. And I believe we have set things up properly to manually call _trackPageview where needed.

However things don't seem to be getting reported. Now either I don't have it working right, or GA tracking from javascript with a file:// protocol on the url silently violates some cross domain policy I'm not aware of.

So does GA work with local html via file://? Or is there something wrong with my GA usage?

Note that the domain we are using doesn't actually exist. We want to use something like the mobile app tracking but from JavaScript rather than a native library. And in order to do this, it looks you setup a fake domain, and tell the tracker what domain it should be reporting as.


At the end of my <head>:

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXACCOUNTID-XX']);
  _gaq.push(['_setDomainName', 'myfake.domain.com']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = 'http://www.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

And in our JS framework we call:

_gaq.push(['_trackPageview', '/some/path/here']);
5 Answers

A couple of tweaks are necessary:

Disable cookie storage

Cookies cannot be used as there's no domain in action, so we need to prevent GA from trying to use them. This is done by setting 'storage': 'none' in creation config (documentation).

Disable file protocol check

By default, GA aborts if the protocol (in our case file) is not http or https. Disable this check using the corresponding task: ga('set', 'checkProtocolTask', null)

Set active page manually

Since there is no domain, GA fails to derive a path denoting the active page. It can be configured manually by using the page URL modification feature: ga('set', 'page', 'foobar')

A subsequent ga('send', 'pageview') will then show up in data as a visit on /foobar.

Track user identity using localStorage (optional)

With cookies disabled, users are not tracked across page loads, so each refresh will trigger detection of another unique visitor. However, we can provide custom client ids on create by setting 'clientId': localStorage.getItem(someKey), which looks for previously stored client ids.

Storing ids is done by

ga(function(tracker) {
  localStorage.setItem(someKey, tracker.get('clientId'));
})

Everything combined

Combining all above steps, we end up with something like the following:

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXXX-Y', {
    'storage': 'none',
    'clientId': localStorage.getItem('ga:clientId')
});
ga(function(tracker) {
    localStorage.setItem('ga:clientId', tracker.get('clientId'));
});
ga('set', 'checkProtocolTask', null);

ga('set', 'page', 'myPage');
ga('send', 'pageview');

here is my code, it works

<script>
function sendData()
{
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-148029185-2');

ga('create', 'UA-148029185-2', {
    'storage': 'none',
    'clientId': localStorage.getItem('ga:clientId')
});
ga(function(tracker) {
    localStorage.setItem('ga:clientId', tracker.get('clientId'));
});
ga('set', 'checkProtocolTask', null);

ga('set', 'page', '/xxxxxxxx');
ga('send', 'pageview');
}
</script>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-148029185-2" onload="sendData()"></script>
Related