InApp NATIV

In-App Messaging is custom views that you can send to a segment of users to show custom messages or give new offers or take to some specific pages. They can be created from your MoEngage account.

ab8683f-71c6364-f93ec45-vlcsnap-2016-11-08-16h16m41s386.png

Call the showInApp() wherever InApp has to be shown in the app as shown below :

JavaScript
import ReactMoE from 'react-native-moengage'
ReactMoE.showInApp()
 

When using in-apps on Android you need to additionally opt-out of the default lifecycle in-apps while initialising the SDK. Refer to the documentation for more details.
Only required if you are using the plugin version below 6.0.0

Self-Handled InApps

Self-handled In Apps are messages which are delivered by the SDK but displaying it has to be handled by the App.
To get self-handled In-App call the below method.

JavaScript
import ReactMoE from 'react-native-moengage'
ReactMoE.getSelfHandledInApp();

The payload for self handled in-app is returned via a callback. Register a callback as shown below.

JavaScript
import ReactMoE from 'react-native-moengage'

ReactMoE.setEventListener("inAppCampaignSelfHandled", (selfHandledPayload) => {
   if (selfHandledPayload && Object.keys(selfHandledPayload).length != 0) {
     console.log("inAppCampaignSelfHandled", selfHandledPayload);
   }
});

Tracking Statistics

Since display, click, and dismiss for Self-Handled InApp shown controlled by the application we need you to notify the SDK whenever the In-App is Shown, Clicked, Dismissed. Below are the methods you need to call to notify the SDK. The campaign object provided to the application in the callback for self-handled in-app should be passed in as a parameter to the below APIs.

JavaScript
import ReactMoE from 'react-native-moengage'
ReactMoE.selfHandledShown(selfHandledPayload);
ReactMoE.selfHandledPrimaryClicked(selfHandledPayload);
ReactMoE.selfHandledClicked(selfHandledPayload);
ReactMoE.selfHandledDismissed(selfHandledPayload);

InApp Callbacks

 

NOTE

Make sure you are calling initialize() method of the plugin to receive these callbacks. Refer doc for more info.

We provide callbacks whenever an InApp campaign is shown, dismissed, or clicked you can register for the same as shown below.

JavaScript
import ReactMoE from 'react-native-moengage'


ReactMoE.setEventListener("inAppCampaignShown", (inAppInfo) =>
  console.log("inAppCampaignShown", inAppInfo)
);

ReactMoE.setEventListener("inAppCampaignClicked", (inAppInfo) =>
  console.log("inAppCampaignClicked", inAppInfo)
);

ReactMoE.setEventListener("inAppCampaignDismissed", (inAppInfo) =>
  console.log("inAppCampaignDismissed", inAppInfo)
);

ReactMoE.setEventListener("inAppCampaignCustomAction", (inAppInfo) =>
  console.log("inAppCampaignCustomAction", inAppInfo)
);
Event Type Event Name
InApp Shown inAppCampaignShown
InApp Clicked inAppCampaignClicked
InApp Dismissed inAppCampaignDismissed
InApp Clicked with Custom Action inAppCampaignCustomAction

Payload Structure

InAppInfo received in the callbacks are instances of MoEInAppCampaign class with the below definition:

TypeScript
class MoEInAppCampaign {
  campaignId: String; // Unique Campaign Identifier
  campaignName: String; // Campaign Name
  customAction: MoEInAppCustomAction; // Custom Action Instance
  selfHandled: MoEInAppSelfHandledCampaign; // Self Handled InApp Instance
  navigation: MoEInAppNavigation; // Navigation Action Instance
  platform: String; // ios OR android
}

// Navigation Action Instance
class MoEInAppNavigation {
  navigationType: String; //screen OR deeplink
  url: String; // ScreenName OR deeplink URL based on navigation type
  keyValuePair: Map<String, Object>; // Key-Value pairs configured with action
}

// Self Handled InApp Instance
class MoEInAppSelfHandledCampaign {
  campaignContent: String; // Campaign Content provided while creating campaign
  dismissInterval: Number; // auto dismiss interval in seconds

  /**
    * cancellable will only be used for Android platform
    * Should the campaign be dismissed by pressing the back button or using the back gesture.
    * if the value is true campaign should be dismissed on back press.
    */
  cancellable: Boolean;
}

// Custom Action Instance
class MoEInAppCustomAction {
  keyValuePair: Map<String, Object>; // Key-Value pairs configured with custom action for the campaign
}
 

Handling Orientation Change

 

NOTE

This is only for the Android platform

Starting SDK version 7.3.0, in-apps are supported in both portrait and landscape modes.
SDK has to be notified when the device orientation changes for SDK to handle in-app display.

Add the API call in the Android native part of your app

Notify the SDK when onConfigurationChanged() API callback is received in your App's Activity class.

Java

    import android.content.res.Configuration;
    import androidx.annotation.NonNull;
    import com.facebook.react.ReactActivity;
    import com.moengage.react.MoEReactHelper;

    public class MainActivity extends ReactActivity {

      /**
       * Returns the name of the main component registered from JavaScript. This is used to schedule
       * rendering of the component.
       */
      @Override
      protected String getMainComponentName() {
        return "SampleApp";
      }

      @Override public void onConfigurationChanged(@NonNull Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        MoEReactHelper.getInstance().onConfigurationChanged();
      }
    }
    

Display status bar

To display the status bar, use the following code snippet during Android SDK initialization:

Java
.configureInApps(new InAppConfig(false))

 

Was this article helpful?
0 out of 0 found this helpful