Implementing Kissmetrics on ReactJS App

Kissmetrics in ReactJs App

ReactJS is an open source JS library for building UI and used for SPA, and it manages the views of web apps. ReactJS can help you to modify your data without reloading of a page. It is a popular library in the market trend because of its scalability & fast performance.

Single Page applications are different from multiple page apps that we see everywhere because the SPA doesn’t move into new pages; instead, it will load the pages inline within the same page.

KissMetrics is a web analytics solution. KissMetrics makes it easier to understand where your most valuable customers are coming from.

Kissmetrics has very helpful documentation for Single page application, but we will focus on ReactJS application integration. It is very simple, with two main steps, first creating an app on https://app.kissmetrics.io and second integrating code in our application.

Creating an application on https://app.kissmetrics.io/ is very simple while following steps.

After successful creation you see dashboard as follow:

Kissmetrics Dashboard

Let’s have a look on implementation into ReactJS App code

path of index.html in you app will be like this

project root/public/index.html

We have copy code script from our Kissmetrics dashboard, Settings (on right top) and then Product Settings
here on this page you will see a JavaScript Tracking Code Section, copy this code

if you copy this code from JavaScript Tracking Code Section, Tracking API key will be there already. But you can replace it whenever you want it.
You can find out Tracking API Key from Settings, Project Settings and then Tracking API Key section.

When you added this script into your index.html, now _kmq variable will be available for your all .js files.
To access _kmq variable you can import it on top of your component like this

Now we are all set to track our events, Let’s implement an event now.

record event

In mentioned snippet we are accessing _kmq variable, it will have two arguments record and Event name by calling push function It will record an event with name Viewed Pricing Page. We will test events in a moment.
Now let see if we want to save some properties with our event name. For this I’ll show you how you have properties with event?

Let’s say you want to record user journey like how he visited different pages on you web app. We can have routing endpoint with history.listen like this

record an event with properties

_kmq.push will record events on every route change.

Now we are done with implement it time to test our events.

You can generate reports with tracked events and properties, but one the best feature of Kissmetrics is live event tracking. For this lets go to Kissmetrics dashboard again.

In Dashboard settings look for Live in dropdown menu. If you any page of your web app our pageviewed event will be triggered with properties Current page and Previous Page that shows successful integration of Kissmetrics in our application.

Live Section of Kissmetrics

Thank you very much for reading, Have a great day. #happycoding

If you are looking for Kissmetrics implementation in React Native mobile application please read my article about that here. It was listed in official documentation of Kissmetrics 3rd-Party Libraries

Implement KissMetrics in React-Native Application