Install Gainsight PX Hybrid Mobile SDK

iOS

Import PXKit into the files where GainsightPX is used.

- (void)viewDidLoad
{
    [super viewDidLoad];
    [self startJSBridge];
}
 
- (void)startJSBridge {
    NSArray *filtered = [[[self view] subviews] filteredArrayUsingPredicate:[NSPredicate predicateWithBlock:^BOOL(id  _Nullable evaluatedObject, NSDictionary<NSString *,id> * _Nullable bindings) {
        return [evaluatedObject isKindOfClass:[WKWebView class]];
    }]];
    WKWebView *webview = [filtered firstObject];
    if (webview != nil) {
        [[GainsightPX shared] startJSBridgeWithWebview:webview];
    }
}

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        if let webview = window?.rootViewController?.view as? WKWebView {
            GainsightPX.shared.startJSBridge(webview: webview)
        }
        return true
    }

Android

As a best practice, if you use a web-based platform to develop your mobile app without any native screens, Gainsight recommends you to attach the GainsightPX Hybrid SDK on the Main activity created. To attach GainsightPX, you need to find the web view that is being used by your platform. Use the following generic code that looks for the web view on your UI hierarchy.

Note: You can skip this step if you have identified the web view already.

private ViewGroup findRoot() {
 View temp = this.findViewById(android.R.id.content);
 ViewParent parent = temp.getParent();
 while (parent instanceof ViewGroup) {
   temp = (View) parent;
   parent = temp.getParent();
 }
 return (ViewGroup) temp;
}
private WebView findWebView(ViewGroup temp) {
 for (int i = (temp.getChildCount() - 1); i >= 0; --i) {
   View child = temp.getChildAt(i);
   if (child instanceof WebView) {
     return (WebView) child;
   }
   if (child instanceof ViewGroup) {
     child = findWebView((ViewGroup) child);
     if (null != child) {
       return (WebView) child;
     }
   }
 }
 return null;
}

To attach GainsightPX to the web view, run the following code:

GainsightPX.attachToWebView(findWebView(findRoot())); // or use your webview instead of `findWebView(findRoot())’

Note: Set the web view to GainsightPX to access Gainsight PX in JS.

Blazor

Provide the webview to GainsightPX as shown below:

...
blazorWebView.BlazorWebViewInitialized += (one, two) =>
{
#if IOS
        GainsightPX.Shared.StartTrackingWithWebview(two.WebView);
#elif ANDROID
          GainsightPX.AttachToWebView(two.WebView);
 #endif
}
...

Integrate URL Scheme 

Copy the editor scheme from the dashboard as shown in the following image and add it to iOS and Android projects.

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

Configure Editor for Applications Created using Capacitor 

Use the code below and listen to appUrlOpen. Then provide the link to the Gainsight PX Editor.

import { App, URLOpenListenerEvent } from '@capacitor/app';
import { Component, NgZone } from '@angular/core';
export class AppComponent {
 constructor(private zone: NgZone) {
   this.setupDeeplinks();
 }
 
 setupDeeplinks() {
   App.addListener('appUrlOpen', (event: URLOpenListenerEvent) => {
     this.zone.run(() => {
       (window as any).gainsightpx?.enterEditingMode(event.url);
     });
   });
 }
}

Configure Editor for Applications Created using Cordova 

Use the code below and listen to the handleOpenURL of the window. Then provide the link to the Gainsight PX Editor.

window.handleOpenURL = function(url){
   window.gainsightpx.enterEditingMode(url);
};

Note: handleOpenURL will not be called when the application is not launched.

Configure Editor for Sencha Based Applications 

Use the link below to handle openUrl, if the configuration is not done already. You can skip to the index.js section of the setup in the link below since the editor scheme is already configured in the Configure Editor step above. Use the code given below to change the code in the onURLLaunch method.
https://www.sencha.com/blog/using-url-schemes-with-sencha-touch-ios-and-cordova/

onURLLaunch : function(url, type) {
    window.gainsightpx.enterEditingMode(url);}

Initialize

You can set up Gainsight PX using default configurations by entering your product ID in the #APIKey#> field. You can also change some of the default settings for the improved performance of Gainsight client.

initialize(PXConfiguration)

PXConfiguration and its properties are explained in the Tables section of this article.

JavaScript:

Initialize SDK using following code in javascript environment.

window.gainsightpx.initialize({apiKey: <#APIKEY#>})

TypeScript:

Initialize SDK using following code in typescript environment.

(window as any).gainsightpx?.initialize({apiKey:<#APIKEY#>})

Create Events

Events help you track data from your mobile application. Events are actions associated with your app. Events let you track various actions performed by a user on your app.

Gainsight PX SDK supports the following four types of events.

• App Events
• Page Events
• Identify Events
• Custom Events

window.gainsightpx.screenEventWithName(string)
window.gainsightpx.screenEvent({screenName: string, screenClass: string, properties: object})

window.gainsightpx.identifyWithID(string)
window.gainsightpx.identifyUser({user: PXuser, account: PXAccount})

window.gainsightpx.customEvent({eventName: string, properties: object})

General Methods

You need to configure the following general methods.

window.gainsightpx.flush()

window.gainsightpx.reset()

window.gainsightpx.enable()

window.gainsightpx.disable()

Global Context

Global Context or Super Properties is a feature in Gainsight PX that allows you to collect data at more granular levels. You can set the levels of granularity as required. By default, PX collects all your usage data and stores it. You can use Global context to slice and dice the data and segregate it based on the required parameters. 

After you create all the required events, you can set the global context for the events. You can set a global context with key-value pairs and send it 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 at the disk-level.

Note: If an application is terminated, all the key-value pairs are erased. 

Use the following code snippet to set globalContext:

window.gainsightpx.setGlobalContext(PXGlobalContextMap)

PXGloablContextMap accepts key as string and value as boolean | number | string | null | Date

Use the following APIs to check for the global context key, and remove the key pair value:

window.gainsightpx.hasGlobalContext(string)
window.gainsightpx.removeGlobalContextKeys(string[])
window.gainsightpx.hasGlobalContextKeyListener((key: string, isExists: boolean) => void)

hasGlobalContextKeyListener is the listener for a key existence, when hasGlobalContext is invoked with a key.

Engagement Callback

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 to help the user navigate to a new screen, or perform an API call, and so on.

For more information on this feature, refer to the Engagement Callback article from the Additional Resources section.

To listen to user behaviours on engagements, add the listener as below.

window.gainsightpx.addEngagementListener((engCallback: PXEngagementCallback) => void)

PXEngagementCallback and PXEngagementCallbackModel have the following two properties:

• model?: PXEngagementCallbackModel
• errorMessage?: string

Use the following method to remove the engagement listener.

window.gainsightpx.removeEngagementListener()

Error Handling

Listening to errorListener helps you identify any error while creating events.

window.gainsightpx.errorListener((error: PXErrorCallback) => void)

PXErrorCallback includes the following three parameters:

• functionName: Name of the API when exception occured.
• properties: Event properties when an event is created.
• errorMessage: Information about the exception occurred.