在外部JS文件中访问Google Analytics Universal Analytics

Question

In the old version of Google Analytics you could just add var _gaq = _gaq || []; var _gaq = _gaq || []; on the top of your javascript files, which would let you push events and transactions before GA had fully loaded.

With Universal Analytics you no longer use .push() , so what is the proper way to create the ga object in external files where Google Analytics might not have loaded yet but you need to push events and transactions?

Answer 1

The Immediately-Invoked Function Expression in the Google Analytics snippet handles the creation of that object. In the snippet you see the following:

i[r] = i[r] || function() {
    (i[r].q = i[r].q || []).push(arguments)
}

We know from the parameters passed to the IIFE that i = window and r = "ga":

(function(i, s, o, g, r, a, m) {
    //...
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

In un-uglyfied JavaScript, the snippet reads as such:

window['ga'] = window['ga'] || function() {
    ( window['ga'].q =  window['ga'].q || []).push(arguments)
}

So by calling the global function ga , you are essentially creating an array that serves as the queue (if it doesn't already exist) and pushing values to the queue.

In Universal Analytics, calling this function:

ga('create', 'UA-XXXX-Y', 'auto');

Is the same as this in the previous version of GA:

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXX-Y']);

More info can be found in the Google dev docs .

Answer 2

You don't need to redefine the ga function since it already is defined in the tracking snippet. All you have to do is use the ga object in your external file and you are good to go. ga already is a global object, so no need to scope it.

You also don't want to be pushing anything into ga object before you at least run the line that creates the tracker:

ga('create', 'UA-XXXX-Y', 'auto');

If you d chances are the hit won't get through and won't reach your account.

Make sure that whatever external file you use you include it after the tracking snippet in your site, or maybe include the tracking snippet in the external file at the top.

Answer 3

Here is what I used in my external js file and it seems to be working and tracking nicely. Note to track the events stuff you can use the real time events tab in your GA account to confirm that its working.

I am also tracking outbound events here. Note: I spent 2 days getting this out bound events tracking to work. Make sure in your onclick event that you are using '' these single quotes. I copied the code off this page https://support.google.com/analytics/answer/1136920?hl=en and the quotes on there are actually a different character that break the script, so type the quotes in from your keyboard.

I wanted my GA code in an external file because I had all old classic code and now that Google has moved to Universal, I had to go to each page to make the change to the google spinet. Just smarter to centralize it I think, incase anymore changes come in the future.

In my head tag

<script type="text/javascript"  src="/web_resources/themes/OldsCollege/js/scripts.js" async></script>

in my js file;

/*Analytics*/


    (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','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-616432-1', 'auto');
  ga('send', 'pageview');


var trackOutboundLink = function(url, action) {
   ga('send', 'event', 'outbound-26th', action, url, {'hitCallback':
     function () {
     document.location = url;
     }
   });
}