How to get Google Analytics to work for your Single Page Application

Posted by Marcus Hammarberg on May 7, 2015

How to get Google Analytics to work for your Single Page Application

One of the things that gets increasingly fascinating the older I get is the new stuff you pick up as you “do things for real”. Right now we have been building a site for my current organisation.
We built a little CMS to drive content and the whole page is a Single Page Application (SPA). As we approached being finished we of course wanted to add Google Analytics to the site. Dead simple.
Or not maybe … in this post I’ll describe how we got it to work for our Single Page Application. Google Analytics default was is not built for that. And many descriptions you will find out there is written based with a client-side framework in mind, like Backbone.js.
What I write about below only requires jQuery, and that’s mostly for convience.

One of the things that gets increasingly fascinating the older I get is the new stuff you pick up as you “do things for real”. Right now we have been building a site for my current organisation.

We built a little CMS to drive content and the whole page is a Single Page Application (SPA). As we approached being finished we of course wanted to add Google Analytics to the site. Dead simple.

Or not maybe … in this post I’ll describe how we got it to work for our Single Page Application. Google Analytics default was is not built for that. And many descriptions you will find out there is written based with a client-side framework in mind, like Backbone.js.

What I write about below only requires jQuery, and that’s mostly for convience.

One of the things that gets increasingly fascinating the older I get is the new stuff you pick up as you “do things for real”. Right now we have been building a site for my current organisation.

We built a little CMS to drive content and the whole page is a Single Page Application (SPA). As we approached being finished we of course wanted to add Google Analytics to the site. Dead simple.

Or not maybe … in this post I’ll describe how we got it to work for our Single Page Application. Google Analytics default was is not built for that. And many descriptions you will find out there is written based with a client-side framework in mind, like Backbone.js.

What I write about below only requires jQuery, and that’s mostly for convience.
As with most things I learn it’s based on others knowledge that I just tweak and in this case I found a GREAT article that contained much of the information I need, but didn’t take me all the way. Go ahead and read it now!

Infrastructure

The first thing we did, based on the article above, was to create a custom javascript function for Google Analytics tracking. Here is where we ended up:

This is set and passed to the ga function which tracks it, asynchronously, to Google Analytics

Updated version

After some great comments by Jim Geurts I understand that our solution went against the recommendations from the Google Analytics team. Our code is, and I quote Jim;

creates a new tracker every time you track a pageview.

I don’t really understand the full implications of that, but somehow as Jim kindly informed me when I asked, we need to create a tracker (line 2-4 above) only on the first load of the page. Here’s two new functions that does that:

Basically I’ve just created a new gaInit function that returns the object it initializes, the ga object. In the gaTrack function I just check if the window.ga object is present, if not I call the gaInit() to create it, initializing ga just-in-time and only the first time.

The rest of the article works as described below, and was to my joy not needed to be updated.

Thanks Jim.

Using it

Now, this is where that article leaves us. And at least I felt a little bit abandoned at this point. Because now we need to use it… on A LOT of place. And I didn’t really felt like writing a onClick="ga()" on every thing click-able in our page.

The easy use

The first place we should use this function is on the main page of the application, in my case index.html. This is the tracking of your grandfathers, tracking the loading a new page.

Here’s my code for that, placed just above the &t;/body>-tag:

<script>gaTrack("/","Beranda");</script></body>

“Beranda” is Indonesian for “Home”, which is how we will refer to this page.

Well, that was easy.

Catch’em all

However, the problem is that once the page is downloaded there is no reload of the index.html. That’s the whole idea of a SPA, right? How to track all the client-side navigation then?

First problem to solve is to catch all the things that’s clicked on our page. Here jQuery comes to our help. For us, all things click-able are a-tags so we could write the following function:

$("a").click(function(evt){// tracking code here});

However, there are other ways to track this, should you have other tags that recieve clicks. For example you could catch all clicks in the main div, or even body tag, if you give it an id or a class. Let’s say that your main div is defined like this <div id="main">, then you can write the following function to “catch” all clicks:

$("#main").click(function(evt){// tracking code here});

Now let’s track’em

To track it we can simply use the gaTrack(path, title) we created before: