Clevertap Integration in React Native

23 March 2021

Introduction

CleverTap is a platform for customer retention that offers app integration features and also provides analytics and marketing. The main purpose of Clevertap is to track the events and also understand the number of users launching the app and also how many users are active in a day.

Clevertap also helps to:

• Track events and add the properties to the events.
• Allows to add Segments and send the campaigns to these segments.

Before starting with the installation we need to create a project in our Clevertap dashboard and and the account id and token in the project.

Installation of Clevertap

Clevertap installation can be done using npm:

npm install --save clevertap-react-native

Once installation is done we need to link the library for the projects using React native version 0.60 or less.

Linking

Auto Linking:

Run the following command to link the Clevertap automatically.

react-native link clevertap-react-native

Android Manual Linking:

Add the following code in android/settings.gradle file

include ':clevertap-react-native'

project(':clevertap-react-native').projectDir = new  File(rootProject.projectDir, '../node_modules/clevertap-react-native/android')

Add the following in the android/app/build.gradle file

implementation project(':clevertap-react-native')

Add the following imports and the code in Main Application.java file

import com.clevertap.android.sdk.ActivityLifecycleCallback;

import com.clevertap.react.CleverTapPackage;

new CleverTapPackage()

Add the following in the Android Manifest.xml where we will get account id and token from the Clevertap dashboard.

<meta-data

                 android:name="CLEVERTAP_ACCOUNT_ID"

                 android:value="TEST-123"/>

<meta-data

                android:name="CLEVERTAP_TOKEN"

                android:value="TEST-00"/>

iOS Manual Linking:

Add the node_modules/clevertap-react-native/ios/CleverTapReact.xcodeproj into the Libraries folder of our project in XCode.

Add the libCleverTapReact.a product in CleverTapReact.xcodeproj into our project target’s “Link Binary With Libraries” section

Add a Header Search Path pointing to

$(SRCROOT)/../node_modules/clevertap-react-native/ios

Add the following code in the ios/Podile

pod 'clevertap-react-native', :path => '../node_modules/clevertap-react-native'

Update the local Pods in order for the clevertap pod to be installed in Project

$ cd ios/

$ pod install --repo-update

 Add the clevertap account id and token in info.plist file

<key>CleverTapAccountID</key>

<string>TEST-123</string>

<key>CleverTapToken</key>

<string>TEST-00</string>

Tracking Events

Clevertap allows to track events and allows to add the properties to the events.   Events track all the individual actions users perform in our app. Some examples of events

are launching an app, tapping a button, viewing the details, Adding to favorites. By adding the events we can better understand how many users are using the functionality and what users are doing. By adding properties to events we can even understand what users are doing in detail.

Recording an Event

Before adding an event the first thing we need to do is to import the Clevertap

import CleverTap from "clevertap-react-native"

To record and push an event to Clevertap we need to use a method recordEvent.

CleverTap.recordEvent('app_launched_event')

CleverTap.recordEvent(view_all_button_clicked')

We can also add the properties to the event using the recordEvent method.

CleverTap.recordEvent('Next Button Clicked', { ‘Source’ : 'Login Screen'})

This allows us to understand that Next Button is clicked in the Login Screen.

Update User Profile

Clevertap also allows to view the user related information in the Dashboard. This is done using the onUserLogin method.

CleverTap.onUserLogin({'Name': 'user1', 'Identity': 'token123', 'Email': 'user@test.com'});

Set Location Information

Clevertap also allows us to store the user location information. This is done using the setLocation method.

CleverTap.setLocation(32.15, -110.25);

Campaigns

CleverTap offers nine different messaging channels enabling us to create different strategies to reach out to the users with the right message at the right time. It allows us to create Campaigns and send push notifications for the specified users who have viewed the particular item. We can create a Campaign using the Campaigns tab in the Clevertap Dashboard. We can create new Campaigns and also view the existing Campaigns.

To receive a Campaign we need to create a Notification Channel and add that Notification channel in the Dashboard.

Creating a Notification Channel

Notification channel is created using the

CleverTap.createNotificationChannel("channelid","channelName","channelDescription",3,true);

🔊 Listen