Implementing Kissmetrics on 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:
Let’s have a look on implementation into ReactJS App code
path of index.html in you app will be like this
We have copy code script from our Kissmetrics dashboard, Settings (on right top) and then Product Settings
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.
In mentioned snippet we are accessing
_kmq variable, it will have two arguments
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
_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.
Thank you very much for reading, Have a great day. #happycoding