@trackier/react-native-trackier v1.6.49

react-native-sdk

Table of Contents

• Quick Integration Guide
  • Retrieve your app token
  • Getting Google Advertising ID
  • Initialize the SDK
  • Events Tracking
  • Revenue Events Tracking
  • Pass the custom params in events
  • Passing User Data to SDK
  • SDK Signing
  • Track Uninstall for Android
• Deep linking
• Getting Campaign Data
• Proguard Settings

Quick Integration Guide

We have created a example app for the react-native SDK integration.

Please check the Example directory for know to how the Trackier SDK can be integrated.

Integrate React-Native SDK to your app

For integration, you need to import the trackier library in your project.

For importing the library in project, you need to run the below command in the terminal/cmd.

$ npm install trackier/react-native-sdk

For Ios app, make sure to go to ios folder and install Cocoapods dependencies:

$ cd ios && pod install

Getting Google Advertising ID

Trackier SDK need the advertising id from the application.

For achieving this, you need to add some line of code in the build.gradle and also in Manifest.xml for read the Advertising id from the application which is mentioned below

• Add the google advertising id dependency in your app build.gradle

dependencies {
  // This can be added where the SDK dependency has been added
  implementation 'com.google.android.gms:play-services-ads-identifier:18.0.1'
}

Also update the gradle.properties file by adding this lines in case the gradle version is lower than 7.0

android.jetifier.blacklist=moshi-1.13.0.jar

• Update your Android Manifest file by adding the following permission. This is required if your app is targeting devices with android version 12+

<uses-permission android:name="com.google.android.gms.permission.AD_ID"/>

• Add meta data inside the application tag (If not already added)

<meta-data
            android:name="com.google.android.gms.version"
            android:value="@integer/google_play_services_version" /> // Add this meta-data in the manifest.xml under Application tag.

Below are the screenshot of application tag in manifest.xml for the reference

Screenshot5

Retrieve your app token

1. Login to your Trackier MMP account.
2. Select the application from dashboard which you want to get the app token for.
3. Go to SDK Integration via the left side navigation menu.
4. Copy the SDK Key there to be used as the "app_token".

SDK integration in app

You should use the following import statement on top of your .js file:

import { TrackierConfig, TrackierSDK, TrackierEvent } from 'react-native-trackier';

In your App.js file, add the following code to initialize the Trackier SDK:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { TrackierConfig, TrackierSDK, TrackierEvent } from 'react-native-trackier';
import { StyleSheet, Text, View, TouchableHighlight } from 'react-native';

export default function App() {

/* While Initializing the SDK, You need to pass the three parameter in the TrackierSDKConfig.
 * In First argument, you need to pass the Trackier SDK api key
 * In third argument, you need to pass the environment which can be either "EnvironmentDevelopment", "EnvironmentProduction". */

  var trackierConfig = new TrackierConfig("xxxx-xx-4505-bc8b-xx", TrackierConfig.EnvironmentDevelopment);
  TrackierSDK.initialize(trackierConfig);
}

Depending on whether you build your app for testing or for production, you must set the environment with one of these values:

TrackierConfig.EnvironmentTesting
TrackierConfig.EnvironmentDevelopment
TrackierConfig.EnvironmentProduction

Check below the screenshot of above code

Screenshot1

Events Tracking

Trackier events trackings enable to provides the insights into how to user interacts with your app. Trackier SDK easily get that insights data from the app. Just follow with the simple events integration process

Trackier provides the Built-in events and Customs events on the Trackier panel.

Built-in Events -

Predefined events are the list of constants events which already been created on the dashboard.

You can use directly to track those events. Just need to implements events in the app projects.

Screenshot2

Example code for calling Built-in events

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { TrackierConfig, TrackierSDK, TrackierEvent } from 'react-native-trackier';
import { StyleSheet, Text, View, TouchableHighlight } from 'react-native';

export default function App() {

  var trackierConfig = new TrackierConfig("xxxx-xx-4505-bc8b-xx", TrackierConfig.EnvironmentDevelopment);
  TrackierSDK.initialize(trackierConfig);

  function _builtInEvents(){

    //Below are the example of built-in events function calling
    //The arguments - "TTrackierEvent.PURCHASE" passed in the Trackier event class is Events id.

    var trackierEvent = new TrackierEvent(TrackierEvent.PURCHASE); // Purchase is our in-build events.

 /* Below are the function for the adding the extra data,
    You can add the extra data like login details of user or anything you need.
    We have 10 params to add data, Below 2 are mentioned */

    trackierEvent.param1 = "XXXXXX";
    trackierEvent.param2 = "kkkkkkk";
    trackierEvent.setEventValue("param","value");
    trackierEvent.setEventValue("param2",2.0);
    TrackierSDK.trackEvent(trackierEvent);
  }
} 

Also check the example app screenshot of above example

Screenshot3

Customs Events -

Customs events are created by user as per their required business logic.

You can create the events in the Trackier dashboard and integrate those events in the app project.

Screenshot4

Example code for calling Customs Events.

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { TrackierConfig, TrackierSDK, TrackierEvent } from 'react-native-trackier';
import { StyleSheet, Text, View, TouchableHighlight } from 'react-native';

export default function App() {

  var trackierConfig = new TrackierConfig("xxxx-xx-4505-bc8b-xx", TrackierConfig.EnvironmentDevelopment);
  TrackierSDK.initialize(trackierConfig);

  function _customsEvents(){

    //Below are the example of built-in events function calling
    //The arguments - "sEMWSCTXeu" passed in the Trackier event class is Events id for AppOpen

    var trackierEvent = new TrackierEvent("sEMWSCTXeu"); // This is customs events event id and the events name is "AppOpen"

 /* Below are the function for the adding the extra data,
    You can add the extra data like login details of user or anything you need.
    We have 10 params to add data, Below 2 are mentioned */

    trackierEvent.param1 = "XXXXXX";
    trackierEvent.param2 = "kkkkkkk";
    trackierEvent.setEventValue("param","value");
    trackierEvent.setEventValue("param2",2.0);
    TrackierSDK.trackEvent(trackierEvent);
  }
}

Check below the example screenshot of customs events:-

Screenshot5

Revenue Event Tracking

Trackier allow user to pass the revenue data which is generated from the app through Revenue events. It is mainly used to keeping record of generating revenue from the app and also you can pass currency as well.

    
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { TrackierConfig, TrackierSDK, TrackierEvent } from 'react-native-trackier';
import { StyleSheet, Text, View, TouchableHighlight } from 'react-native';

export default function App() {

  function _trackRevenueEvent(){

    //Below are the example of inbuilt events function calling
    //The arguments - "TrackierEvent.PURCHASE" passed in the event class is Events id

    var revenueEvent = new TrackierEvent(TrackierEvent.PURCHASE);
    revenueEvent.param1 = "XXXXXX";
    revenueEvent.param2 = "kkkkkkk";

    //Passing the revenue events be like below example

    revenueEvent.revenue = 2.5; //Pass your generated revenue here.
    revenueEvent.currency = "USD"; //Pass your currency here.
    revenueEvent.trackEvent(trackierEvent1);
  }
} 

Check below the revenue events calling screenshots.

Screenshot6

Pass the custom params in events

  function _customsDataPassing(){
    //Below are the example of revenue events function calling
    //The arguments - "sEMWSCTXeu" passed in the event class is Events id for AppOpen.
    var trackierEvent = new TrackierEvent("sEMWSCTXeu");

    //Passing the custom params in events be like below example
    const customData = new Map();
    customData.set("name", "sanu");
    customData.set("phone", "81xxxxx84");
    trackierEvent.ev = customData;
    TrackierSDK.trackEvent(trackierEvent);
  }

• First create a map.
• Pass its reference to trackierEvent.ev param of event.
• Pass event reference to trackEvent method of TrackierSDK.

Passing User Data to SDK

Trackier allows to pass additional data like Userid, Email to SDK so that same can be correlated to the Trackier Data and logs.

Just need to pass the data of User Id, Email Id and other additional data to Trackier SDK function which is mentioned below:-

function _userDetails(){

    //Passing the UserId and User EmailId Data
    TrackierSDk.setUserId("XXXXXXXX"); //Pass the UserId values here
    TrackierSDk.setUserEmail("abc@gmail.com"); //Pass the user email id in the argument.
  }

For Passing Additional Data

Trackier allow for passing the additional user details like UserName, Mobile Number, UserAge, UserGender etc. . You need to first make a hashmap and pass it in setUserAdditionalDetail function. The example are in mentioned below

  function _userDetails(){
    //Passing the UserId and User EmailId Data 
    TrackierSDk.setUserId("XXXXXXXX"); //Pass the UserId values here
    TrackierSDk.setUserEmail("abc@gmail.com"); //Pass the user email id in the argument.

    /* Passing the additional data */

    const userDetails = new Map();
    userDetails = {"name":"Sanu"}; //You can pass the Username data.
    userDetails = {"mobile_number":"872xxxxx87"}; // You can pass user mobile number
    TrackierSDk.setUserAdditonalDetail(userDetails);
  }

Below are the screenshots of the customs data passing

Screenshot7

SDK Signing

Following below are the steps to retrieve the secretId and secretKey :-

• Login your Trackier Panel and select your application.
• In the Dashboard, click on the SDK Integration option on the left side of panel.
• Under on the SDK Integration, click on the Advanced tab.
• Under the Advanced tab, you will get the secretId and secretKey.

Please check on the below screenshot

Screenshot8

Check below the example code for passing the secretId and secretKey to the SDK

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { TrackierConfig, TrackierSDK, TrackierEvent } from 'react-native-trackier';
import { StyleSheet, Text, View, TouchableHighlight } from 'react-native';

export default function App() {

/* While Initializing the SDK, You need to pass the three parameter in the TrackierSDKConfig.
 * In First argument, you need to pass the Trackier SDK api key
 * In third argument, you need to pass the environment which can be either "EnvironmentDevelopment", "EnvironmentProduction". */

   var trackierConfig = new TrackierConfig("67607dc5-xxxx-xxxx-xxxx-b577324d97ce", TrackierConfig.EnvironmentDevelopment);
   trackierConfig.setAppSecret("640710587xxxx6ac0cb370","9e043b7e-7f44-403c-xxxx-8cf6bfe8daa0"); //Pass secretId in first param and secretKey in second param
   TrackierSDK.initialize(trackierConfig);
}

Track Uninstall for Android

Before you begin

• Install firebase_core and add the initialization code to your app if you haven't already.
• Add your app to your Firebase project in the Firebase console.

Add the Analytics SDK to your app

• Once installed, you can access the firebase_analytics plugin by importing it in your JS code:

    import analytics from '@react-native-firebase/analytics';

• Create a new Firebase Analytics instance by with this code

    var analytics = analytics();

• Use the analytics instance obtained above to set the following user property:

    var trackierId = await TrackierSDK.getTrackierId();
    await analytics().setUserProperty('ct_objectId', trackierId); 

• Adding the above code to your app sets up a common identifier.

• Set the app_remove event as a conversion event in Firebase.
• Use the Firebase cloud function to send uninstall information to Trackier MMP.
• You can find the support article here.

Deep linking

Deep linking is a techniques in which the user directly redirect to the specific pages of the application by click on the deeplink url.

There are two types deeplinking

• Normal deeplinking - Direct deep linking occurs when a user already has your app installed on their device. When this is the case, the deep link will redirect the user to the screen specified in the link.

• Deferred deeplinking - Deferred deep linking occurs when a user does not have your app installed on their device. When this is the case, the deep link will first send the user to the device app store to install the app. Once the user has installed and opened the app, the SDK will redirect them to the screen specified in the link.

Please check below the Deeplinking scenario

Normal Deep linking

If a user already has your app on their device, it will open when they interact with a tracker containing a deep link. You can then parse the deep link information for further use. To do this, you need to choose a desired unique scheme name.

You can set up a specific activity to launch when a user interacts with a deep link. To do this:

• Assign the unique scheme name to the activity in your AndroidManifest.xml file.
• Add the intent-filter section to the activity definition.
• Assign an android:scheme property value with your preferred scheme name.

For example, you could set up an activity called FirstActivity to open like this:

AndroidManifest.xml

        <activity
            android:name=".Activity.FirstProduct"
            android:exported="true">
        <intent-filter>
            <action android:name="android.intent.action.VIEW" />
            <category android:name="android.intent.category.DEFAULT" />
            <category android:name="android.intent.category.BROWSABLE" />
            <data
                android:host="trackier.u9ilnk.me"
                android:pathPrefix="/product"
                android:scheme="https" />
        </intent-filter>
        </activity>

https://trackier.u9ilnk.me/product?dlv=FirstProduct&quantity=10&pid=sms

Deferred Deep linking

Deferred deep linking happened, when a user does not have your app installed on their device. When the user clicks a trackier URL, the URL will redirect them to the Play Store to download and install your app. When the user opens the app for the first time, the SDK will read the deep_link content.

The Trackier SDK opens the deferred deep link by default. just need to add some code in application class just after initilazation of Trackier SDk

Below are the example of the code :-

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { TrackierConfig, TrackierSDK, TrackierEvent} from 'react-native-trackier';
import { StyleSheet, Text, View, TouchableHighlight } from 'react-native';

export default function App() {

  var trackierConfig = new TrackierConfig("abcf2270-xxxxxxx-xxxx-34903c6e1d53", TrackierConfig.EnvironmentDevelopment);
  //Getting deeplink data from the below method
  trackierConfig.setDeferredDeeplinkCallbackListener(function(uri) {
    console.log("Deferred Deeplink Callback received");
    console.log("URL: " + uri);
  });
  TrackierSDK.initialize(trackierConfig);

  return (
    <>
      <View style={styles.container}>
        <Text style={{ color: "grey", fontSize: 30 }}>Trackier React-Native Sdk</Text>
        <TouchableHighlight
          style={styles.button}
          onPress={_onPress_trackSimpleEvent}>
          <Text>Track Simple Event</Text>
        </TouchableHighlight>
        <TouchableHighlight
          style={styles.button}
          onPress={_onPress_trackRevenueEvent}>
          <Text>Track Revenue Event</Text>
        </TouchableHighlight>
        </View>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Getting Campaign Data

For getting the campaign data, We have a function that return the campaign data. Please check below the example code.

function _onPress_trackSimpleEvent(){
    var trackierEvent = new TrackierEvent(TrackierEvent.UPDATE);
    //Campaign Data 
    TrackierSDK.getAd().then(val => console.log('===getAD: ', val)).catch(e => console.log('==error: ', e))
    TrackierSDK.getCampaign().then(val => console.log('===getCampaign: ', val)).catch(e => console.log('==error: ', e))
    TrackierSDK.getCampaignID().then(val => console.log('===getCampaignID: ', val)).catch(e => console.log('==error: ', e))
    TrackierSDK.getAdSet().then(val => console.log('===getAdSet: ', val)).catch(e => console.log('==error: ', e))
    TrackierSDK.getAdSetID().then(val => console.log('===getAdSetID: ', val)).catch(e => console.log('==error: ', e))
    TrackierSDK.getChannel().then(val => console.log('===getChannel: ', val)).catch(e => console.log('==error: ', e))
    TrackierSDK.getP1().then(val => console.log('===getP1: ', val)).catch(e => console.log('==error: ', e))
    TrackierSDK.getP2().then(val => console.log('===getP2: ', val)).catch(e => console.log('==error: ', e))
    TrackierSDK.getP3().then(val => console.log('===getP3: ', val)).catch(e => console.log('==error: ', e))
    TrackierSDK.getP4().then(val => console.log('===getP4: ', val)).catch(e => console.log('==error: ', e))
    TrackierSDK.getP5().then(val => console.log('===getP5: ', val)).catch(e => console.log('==error: ', e))
    TrackierSDK.getClickId().then(val => console.log('===getClickId: ', val)).catch(e => console.log('==error: ', e))
    TrackierSDK.getDlv().then(val => console.log('===getDlv: ', val)).catch(e => console.log('==error: ', e))
    TrackierSDK.getPid().then(val => console.log('===getPid: ', val)).catch(e => console.log('==error: ', e))
    TrackierSDK.getIsRetargeting().then(val => console.log('===getIsRetargeting: ', val)).catch(e => console.log('==error: ', e))
    TrackierSDK.trackEvent(trackierEvent);
  }

Proguard Settings

If your app is using proguard then add these lines to the proguard config file

  -keep class com.trackier.sdk.** { *; }
  -keep class com.google.android.gms.common.ConnectionResult {
      int SUCCESS;
  }
  -keep class com.google.android.gms.ads.identifier.AdvertisingIdClient {
      com.google.android.gms.ads.identifier.AdvertisingIdClient$Info getAdvertisingIdInfo(android.content.Context);
  }
  -keep class com.google.android.gms.ads.identifier.AdvertisingIdClient$Info {
      java.lang.String getId();
      boolean isLimitAdTrackingEnabled();
  }
  -keep public class com.android.installreferrer.** { *; }