Implementing Kissmetrics on Single Page Apps

Single page apps (SPAs) are web pages that load an HTML page and loads all of the components of the website on the first load. Then the page dynamically updates when the user interacts with it, by moving content in and out of the site with Javascript. SPAs frequently update the URL in the address bar, like traditional sites. However, in reality, we are still in the same HTML page. SPAs commonly use libraries such as Angular, React.js , Ember.js, and Backbone.js..

Kissmetrics can work with single page apps, however, there are a few things that will not work out of the box which will require manual implementation and custom coding.

Problems with tracking on single page Apps

As you navigate the SPA and move to a new page you are loading content in and out of the site. Due to this fact you technically stay on the same HTML page the entire time you are on the site, page views will not work correctly.

If you have pageviews setup on your SPA when you visit a URL you may get a pageview, but when you navigate to another page that has pageviews setup, you will not see a second page view. This is because the content is loaded into the current page, rather than actually loading a second page.

Additionally, if you attempt to restrict an event to a certain URL you will run into a similar problem. Kissmetrics will believe it is still on the page that was initially loaded, although to the user they appear to have moved to a different page.

There may also be issues tracking clicks or other events with the Event Library due to elements being moved in and out of the site.

Fixing these Issues

To implement Kissmetrics on your SPA you will have to write custom Javascript that will create your Page View Events and set your event listeners within your framework to track anything else. This will be using the Javascript API.

For page views, whichever framework you are using will have "routes", which are the virtual equivalents of different pages. For each of these routes, there will be a function/controller in which the code for that route is defined. This is where you will define a Page View event with Javascript so that your Javascript Page View call will be executed when users visit those routes.

Example Javascript API call

_kmq.push(['record', "Viewed Pricing Page" ]);

This creates an event called Viewed Pricing Page.

Angular and Angulartics

If you are running angular for your single page app there is an unofficial package for running Analytics on your Angular App that some of our customers have had success installing Kissmetrics will called angulartics. This package can be used to implement a number of analytics solutions including, Google Analytics and Kissmetrics.

Angulartics can be used to simplify tracking routes, and also allows you to make a single API call that will record an event or property to all of your analytics platforms at once.

🚧

Use the following command to install the Kissmetrics package:

npm install angulartics-kissmetrics

Implementing with Google Tag Manager

This document describes a third way to implement Analytics on a Single Page App. It is done by pushing the name of the events, properties, or identities to the Google Tag Manager Datalayer, then making the API calls in GTM.

The advantage of this method appears to be that after you have your engineers push the data to the data layer. You can turn the custom tracking on and off in GTM without your developers' help, or push the data to additional analytics platforms without adding additional code to your App. Although when you want to add additional events, you will have to have your engineers add the data from the app to the data layer.