Analytics and Tag Manager for Single Page Applications

Single page applications are becoming more and more common, they’re a great way to provide a fast, responsive user experience but they can be a pain for analytics.

A standard implementation of Google Analytics will record a page view when the SPA first loads and nothing else which is useless.

There are a few approaches to this, exactly how you deal with it will depend in some ways on the underlying framework your single page application is built on. I’m going to go through a specific example with Vue.js later but before that let’s look at a few basic concepts.

Google Analytics records page views, and we only have one page, so we need to record something else. I’ve seen SPAs tracked using Google Anaytics events, that works for small, simple SPAs but my preferred approach is to treat every significant change in the page’s content as a page load and send dummy page views to GA.

This works well for a few reasons, the main one being that the data and reports you generate will be immediately familiar to anyone who’s used Analytics before.

Another reason I like this approach is that the dummy page views become available in GA for functions like goal funnels, content flow, content grouping and you get stats like exits, time on page etc giving you a lot more insight than if you went the event tracking route. I wrote a bit about using dummy page views for goal funnels here:

Another advantage to this approach is that if you have an SPA within a more traditional multi page site the data will fit in with the rest and work with any custom dashboards or reporting you have.

I suggest using Google Tag Manager for setting up your SPA Analytics, you can do it without but the example below assumes you’re using GTM.

The example below is for Vue.JS, but the prinicples are the same whatever framework you’re using.

You need to get your framework to emit a data layer event at each significant change in the content, along with the event you need a variable containing a short (one or two word) description of the content.

Say you’ve got a 3 part sign up process, each time a part is displayed you want to emit an event called something like “content change”  and a data layer variable called something like “content name”  with the value “signup-part1”, “signup-part2” etc.

Then, you can use the event as a trigger in GTM and use the content name variable to create a dummy page view,

Vue.js Example

If you’re using Vue.JS for your SPA, this plugin will make setting up Analytics and Tag Manager a whole lot easier, especially if you’re using Vue to manipulate the router to give the impression of a multi page site.

With the plugin installed, Vue will emit a data layer event called content-view each time the content changes and a data layer variable called content-name. We can stitch this all together in GTM really quickly and start sending pageviews to Analytics.

First thing to do is pull the data layer variable in to a GTM variable so that it’s available for us to use as a page name:

Next, we need a trigger that listens for the content-view event so that we can send the page view each time the content changes:

Finally, we need a Google Analytics tag to send the page view:

That’s pretty much it with Vue.js and the plugin, you will need to find a way that works with your SPA but the principles above should help; send an event an a name for the content to Data Layer each time the content changes, use GTM to send a dummy page view to Google Analytics.