Install Gainsight PX React Native

NPM

npm i @gainsight-px/react-native-gainsight-px

Github

Refer https://github.com/Gainsight/px-react-native-sdk 

 "dependencies": {
    ...,
    ...,
    "@gainsight-px/react-native-gainsight-px": "https://github.com/Gainsight/px-react-native-sdk.git"
  }

OR

npm install https://github.com/Gainsight/px-react-native-sdk.git --save

Expo

Run the expo command as directed after installing the package using the npm command.

npx expo run:ios

npx expo run:android

"expo": {
    "autolinking": {
      "exclude": ["@gainsight-px/react-native-gainsight-px"]
    }
  }

Integrate Gainsight PX Editor  

Gainsight PX Mobile Editor helps you manage PX engagements and Product Mapper from your mobile application. 

The In-app Editor allows you to:

• Preview engagements in the mobile app
• View the Product Tree
• Create, edit and delete Module/Features 
• Add Tap Rules for Module/Features

To use the in-app editor, copy the Scheme to integrate your mobile application with the your platforms that Gainsight supports.

You can activate the editor using deep linking and forwarding the link to the SDK. While forwarding the information, you as a developer have the ability to implement your own logic and permissions before launching the editor.

This integration is supported by all deep linking plugins. However, the procedure is subject to the dependencies as stated here.

<intent-filter>
        <data android:scheme="{SCHEME}" />
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.BROWSABLE" />
        <category android:name="android.intent.category.DEFAULT" />
</intent-filter>        

<array>
       <dict>
             <key>CFBundleTypeRole</key>
             <string>Editor</string>
             <key>CFBundleURLName</key>
             <string>{APP_BUNDLE_ID}</string>
             <key>CFBundleURLSchemes</key>
             <array>
                    <string>{SCHEME}</string>
             </array>
       </dict>
</array>                       

componentDidMount() {
     //Initialise GainsightPX
     If (Platform.OS == “ios”) {
              Linking.addEventListener(“url”, this.handleOpenURL);
     }
     Linking.getInitialURL().then( url => {
             if (url != null) {
                       GainsightPX.getInstance().enterEditing(url);
             }
     });
}
componentWillUnmount() {
     Linking.removeEventListener(“url”, this.handleOpenURL);
}
handleOpenURL = event => {
       if (event.url != null) { GainsightPX.getInstance().enterEditing(url);}
}                                                

Initialize  

Once you install Gainsight PX, you can use it in your application.

Note: The code used in this section is platform-independent and can be used in Android or iOS mobile applications.
To track data with Gainsight PX: 

1. Insert the following import code in the header section:

import {GainsightPX} from 'react-native-gainsight-px';

2. Use the following code to initialize Gainsight PX.

let configurations = new Configurations("<API KEY>")
configurations.enableLogs = true    GainsightPX.getInstance().initialize(configurations)
    .then(() => {
            console.log("GainsightPX is initialized");
    })
    .catch((error) => {
            console.log(error.status);
    })

Note: You must use the initialization code only once in your entire application. (We recommend using this code at the beginning of the app)

ExceptionCallback

This section explains how to handle exceptions in the SDK, if any. All the Gainsight PX methods return a Promise<GainsightPXCallBack>. The exceptions are passed into catch as error using GainsightPXCallback interface.

The properties of GainsightPXCallback are as follows:

export interface GainsightPXCallback {
  status: GainsightPXCallbackStatus;
  methodName?: string;
  params?: object;
  exceptionMessage?: string;
}
 
export enum GainsightPXCallbackStatus {
  FAILURE = 0,
  SUCCESS = 1
}

• The status property informs if the created event is success/failure. 
• The methodName property informs about the invoked function name.
• The params object gives the event properties that were sent to create an event.
• The exceptionMessage informs about the exception that occurred.

Create Events

Events are actions associated with your application and allow you to track various actions performed by users in your app. This section explains how to create events that can track data from your mobile application.

GainsightPX.getInstance().screenEvent("<#screen-name#>", "<#screen-class#>");

GainsightPX.getInstance().screen("<#screen-name#>", "<#map#>")

GainsightPX.getInstance().customEventWithProperties(<#custom_event_name#>, <#map#>);

GainsightPX.getInstance().customEvent(<#custom_event_name#>);

GainsightPX.getInstance().identifyWithUserId(<#user_id#>)
GainsightPX.getInstance().identify(<#user#>, <#account#>)

var user = new PXUser("<#user_id#>")

user.usem = "david@gmail.com"

General Methods

This section describes the general methods (functions) of Gainsight PX SDK. There are three general methods:

Global Context 

Once you create all the required events, you can set events with a global context. You can set a global context with key-value pairs and send them with the payload. Global context can be set on Date, String, Double, and Boolean data types. Global Context data is stored at the memory level and not disk-level. The key-value pairs are sent with the Payloads. If an application is terminated, all the key-value pairs are erased. 

The following code snippet can be used to set the global context:

GainsightPX.getInstance().setGlobalContext(<#[String: GlobalContextValue]#>);

The following code snippet can be used to check if the key is available:

GainsightPX.getInstance().hasGlobalContextKey(<#Name of the key#>)

The following code snippet can be used to remove the key:

GainsightPX.getInstance().removeGlobalContextKeys(<#Array Of Keys#>)

EngagementCallBack 

Gainsight PX provides the Engagement Callback feature for mobile engagements that you create for mobile applications. This feature helps in receiving a callback for all button actions and URL clicks that the end-user performs on an engagement. Once you receive the callback, you can decide your next action like helping the user to navigate to a new screen, or perform an API call and so on.

Prerequisite

Ensure that you have installed/configured the Gainsight PX Mobile SDK v1.5.1 or above.

To use the Engagement Callback feature, you need to listen to  the EngagementCallback event listener.

Example:

import {
 NativeModules,
 Platform,
 NativeEventEmitter,
 DeviceEventEmitter,
} from 'react-native';
 
const Emitter = Platform.select({
 ios: new NativeEventEmitter(NativeModules.RNGainsightPx),
 android: DeviceEventEmitter,
});
 
this.props.subscription = Emitter.addListener(
  'engagementCallBack',
  this.didRecieveEngagementPayload,
);
 didRecieveEngagementPayload = args => {
   if (args != null && args.actionType === 'link') {
     let text =
       'EngagementMetaData:' +
       ', actionText: ' +
       args.actionText +
       ', actionType: ' +
       args.actionType +
       ', engagementId: ' +
       args.engagementId +
       ', engagementName: ' +
       args.engagementName +
       ', scope.screenName: ' +
       args.scope.screenName.toString() +
       ', scope.screenClass: ' +
       args.scope.screenClass.toString() +
     alert(text);
   }};