SDK Integration for React Native – V0.60 & Above

This document describes the steps to be followed to integrate FirstHive Analytics SDK in your React Native Android & iOS  application

─

Prerequisite: 

• A ‘site ID’ need to be created for your APP in your FirstHive account to map the tracking to your account. Contact your FirstHive rep for the Site ID if not already provided.
• Supported ReactNative version 16.2 and above.

Steps to Integrate FirstHive Android SDK

Including the Library

Install

$ npm install react-native-matomo-sdk --save

• Requires React Native version 0.60.0, or later.
• Supports iOS 10.0, or later.

Tracker Usage

Init tracker

Before using any function below, the tracker must be imported and initialized.

import Matomo from "react-native-matomo-sdk"; Matomo.initialize("https://example.com/piwik.php", 1)

Custom Dimensions

The Matomo SDK currently supports Custom Dimensions for the Visit Scope. Using Custom Dimensions you can add properties to the whole visit, such as “Did the user finish the tutorial?”, “Is the user a paying user?” or “Which version of the Application is being used?” and such? Before sending custom dimensions please make sure Custom Dimensions are properly installed and documented. You will need the ID of your configured Dimension.

After that you can set a new Dimension,

Matomo.setCustomDimension(1, 'abc');

or remove an already set dimension.

Matomo.setCustomDimension(1, null);

Reserved Dimension:

Matomo.setCustomDimension(1, 'Email'); 

Matomo.setCustomDimension(2, 'Mobile No'); 

Matomo.setCustomDimension(3, 'User Name'); 

Matomo.setCustomDimension(4, 'Name'); 

Matomo.setCustomDimension(5, 'DeviceID');

Dimensions in the Visit Scope will be sent along with every Page View or Event. Custom Dimensions are not persisted by the SDK and have to be re-configured upon application startup.

Track Screen Views

trackView(path: string[])

Tracks a screen view using the previously initialized tracker. The path parts will be joined to a path string, with parts separated by / characters.

Track Events

To collect data about user’s interaction with interactive components of your app, like button presses or the use of a particular item in a game use trackEvent.

Matomo.trackEvent('category', 'action', 'name', 1000);

Sample implementation:

To track a login event, where a mobile number is entered as user id you can track the event and also set the custom dimension to pass the user PII as shown below.

Matomo.setCustomDimension(2, 'Mobile No'); 
Matomo.setCustomDimension(5, 'DeviceID'); 
Matomo.trackEvent('Loginops', 'Login', 'login', 1000);

Activate Mobile Push

Prerequisite: 

Set up a Firebase Cloud Messaging client app in your Android APP

https://firebase.google.com/docs/cloud-messaging/android/client

How to send app notifications via FirstHive?

To send the notification to your app users, you need to integrate FCM with FirstHive,

1. Implement the below API to push the required details, for each user

URL: https://firsthive.com/engage/mobile/doAppUserSubscription

Method: POST

Parameters: 

Example: 

"projectId":"85"

"data":{"mobileNo":"1234567890","email":"[email protected]"}

"regId":"c3MyLdaDD7I:APA91bH-TO2aDrg6_-gl-MzEKrMfoAehnCpsnwmxc3TOv4MlUrIKRobRma5rVQvKaf1B3iR3xadzTDPxrO5yjlqsig1GGlzx00TUTnSJCTRfPyZjyWKcEpC1ilAclMccFJZH5oLoZvpg"

"visitId":"dd49680dc9ab2c53"

"browser":"iOShybrid"

How to Fetch Visitor Id?

Step 1: Define below after the firsthive sdk is executed:

var visitor_id;    

    _paq.push([ function () { visitor_id = this.getVisitorId(); }]);

Step 2: Share the Legacy server key with FirstHive

Follow the steps mentioned below:

https://console.firebase.google.com/project/

Path to key in Firebase >> Project >> Project Settings >> Cloud Messaging >> Legacy server key

• Steps to enable tracking of ‘Opens (i.e., taps)’ for App Push Notifications.

When a user tap on the app push notification sent from FirstHive, it will pass a Message ID to the app in the data payload in the following key.

messageId : <Unique value to identify the user and campaign>

Example below

{


          "to" : "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",

          "collapse_key" : "YYYYYYYYYYYYYYYYYYYYYYYYYY",

          "notification" : {

                 "body" : "Test notification content",

                 "title": "Title of the message",

                 "image": "<Image URL>"

},

"data" : {

                "url":"<URL>",

                "customPayload": {

                        "screen":"HomePage",

                        "messageId":"123456"

                         }

             }

}

Whenever the app receives a value in the data payload for the above key, it should trigger following API and pass the tracking ID back to FirstHive URL: https://firsthive.com/engage/mobile/trackNotification

Method: POST

Parameters: