Implementing Kissmetrics on Single Page Apps
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
_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.
Updated 5 months ago