Implement KissMetrics in React-Native Application

Imdad Hussain
3 min readSep 28, 2020

--

What is kissMetrics ?
KissMetrics is a web analytics solution. KissMetrics makes it easier to understand where your most valuable customers are coming from. Whether you’re spending money on SEO, SEM, Display, Social Media or email campaigns, KissMetrics allows you to quickly identify which marketing campaigns are working and which one’s aren’t.
KissMetrics.
This article is listed in official documentation of KissMetrics, you can visit here

:)

Implementation Steps

Login to KissMetrics and create a new project. Go to Project setting -> and Copy and save Tracking API Key to somewhere, because we will use it later.

Find Tracking API Key in https://app.kissmetrics.io/settings

React-Native project implementation

Create a file EventTracking.js add this code to EventTracking.js

First write kissmetricsAPICall funcation in EventTracking.js We will call this funcation by passing our custom.

Create custom URL from KISSmetrics API specification documentation.

Base URL for event tracking is

http://trk.kissmetrics.io/e

At the end example URL will be like this

http://trk.kissmetrics.io/e?_k=api-key&_p=bob&_n=Signed+Up&gender=male&_t=1262304000&_d=1

First e is for Event recording, other than that you can use “s” for setting properties and “a” for aliasing user. We are going to use event tracking in this documentation.

Then you have to replace api-key that we copied from https://app.kissmetrics.io/settings -> Product settings-> Tracking API Key. It will be _k = your key

_n used for name of event that you want to record. gender is an extra property that we will saved.
_t is for timestamp, you have to make sure timestamp is in unix timestamp format.

Math.floor(Date.now()/1000)

Now we will make function that we will call from our .js files to track different event. Like we want to record if user clicks on Sale button from our promotion.js file. So we will call function like this

Our main trackEvent function will be

You are all set for project create to implement tracking code.
Build your project and let’s Test.

KissMetrics have a Live feature, where you can test your mobile app’s Live sessions. After running your application go to

KissMetrics console -> Setting-> Live

Click on button press where you added trackEvent run and check if data is coming in Live Session. If it works, means you are all good for Event tracking with KissMetrics. Your Events data will be shown in

Setting-> Events after 30 minutes.

That’s it. Congratulations and Thanks for reading.

If you want to read about implementation of Kiss Metrics in ReactJS Application, please read here

--

--

Imdad Hussain
Imdad Hussain

Written by Imdad Hussain

Senior React & React Native Developer @thoughtworks | JavaScript & TypeScript ❤️

Responses (1)