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.

Install Android Dependency

Install using BOM

Integration using BOM  is the recommended way of integration; refer to the Install Using BOM document. Once you have configured the BOM add the dependency in the app/build.gradle file as shown below:

build.gradle

dependencies {
    ...
    implementation("com.moengage:inapp")
}

Once the BOM is configured, include the specific MoEngage modules required for the application. 
Note: Version numbers are not required for these dependencies; the BOM automatically manages them.

Manual installation

Add the following dependency in the **android/**app/build-extras.gradle file.

build-extras.gradle

dependencies {
...
implementation("com.moengage:inapp:\$sdkVersion")
}

replace $sdkVersion with the appropriate SDK version

Requirements for displaying images and GIFs in InApp

Starting InApp version 7.0.0, SDK requires Glide to show images and GIFs in the in-apps. You need to add the below dependency in your build.gradle file.

Groovy

dependencies {
 ...
 implementation("com.github.bumptech.glide:glide:4.16.0")
}

How to show In-App Messages?

Use showInApp() method to show inApp as shown below:

JavaScript

var moe = MoECordova.init(YOUR_Workspace_ID);
moe.showInApp();

Nudges

Nudges are non-intrusive In-App messages that can be displayed at various positions on the screen. Use the showNudge() method to display them:

JavaScript

var moe = MoECordova.init(YOUR_Workspace_ID);

// To show a nudge with the Top position
moe.showNudge(MoENudgePosition.top);

// To show a nudge with the Bottom position
moe.showNudge(MoENudgePosition.bottom);

// To show a nudge with the BottomLeft position
moe.showNudge(MoENudgePosition.bottomLeft);

// To show a nudge with the BottomRight position
moe.showNudge(MoENudgePosition.bottomRight);

// To show a nudge with the Any position
moe.showNudge(MoENudgePosition.any);

InApp/Nudge Redirection default behavior

On clicking an Inapp or Nudge, MoEngage SDKs will handle only rich landing navigation redirection. 

For the screen name and deep link redirection, your app code should redirect the user to the right screen or deep link. To handle the screen name and deep link redirection, you must implement inapp click callback methods. MoEngage SDK will just pass the inapp payload to this call back code. Implementation steps are mentioned in the InApp callback section of the Integration.

Context-Based InApps

We have introduced context-based InApps. While creating InApp campaigns you can set the contexts OR tags to the campaign. SDK will check with the current context set in the App and show the inApp only when a current set context matches the campaign context.

Set Current Context:

To set the current context for the InApp module use setCurrentContext() method as shown below:

JavaScript

moe.setCurrentContext(\["Home","CategoriesScreen"\]);

Reset Context:

To reset the current context for the InApp module call resetCurrentContext() method:

JavaScript

moe.resetCurrentContext();

Self Handled In-App Messaging

The SDK does not show self-handled In-Apps. While creating the campaign, a JSON payload has to be provided in the dashboard. The same payload will be provided to the app by the SDK on calling the getSelfHandledInApp() method, and info will be received by a callback post all the delivery controls are checked:

JavaScript

var moe = MoECordova.init(YOUR_Workspace_ID);
moe.getSelfHandledInApp();

//Callback for receiving self-handled inapp
moe.on('onInAppSelfHandle', function(selfHandledPayload) {
console.log('Self hanlded InApp Info: ' + JSON.stringify(selfHandledPayload));
});

Post consuming the Self-handled inApp, to update impression, click and dismiss stats call the following methods with the payload received in self-handled In-App callback:

JavaScript

var moe = MoECordova.init(YOUR_Workspace_ID);

// Track impression
moe.selfHandledShown(selfHandledPayload)
// Track Click
moe.selfHandledClicked(selfHandledPayload)
// Track Dismiss
moe.selfHandledDismissed(selfHandledPayload)

In-App Messaging Rules

We use the following rules while showing the In-App:

Preconditions for In-App to work:

• If InApp Backend Sync was successful in the current session or not.
• Check if the Device is NOT iPad/Tablet.
• Check if InApp is disabled on the current screen.
• Check Device Orientation is Portrait(Landscape is not supported).

The following are checked for each campaign in the list of active campaigns(sorted according to priority and Last Updated Time)

• Check Global Delay has lapsed, skip this if Ignore Global Delay set for the campaign.
• Check if the campaign has expired
• Display Rules
• Check Show Only on Screen
• Check with current contexts
• Delivery Controls
• Persistence Check(If the primary action of InApp is done but still want to show the inApp)
• Check if the campaign has been shown max times
• Check if the campaign level delay has crossed.

The first campaign satisfying all the rules is shown to the user.

Callback in JavaScript on In-App Events

To get a callback in javascript on in-app events you need to register for a click listener as shown below.

Minimum Plugin version required: 6.0.0

JavaScript

var moe = MoECordova.init(YOUR_Workspace_ID);
moe.on('onInAppShown', function(inAppInfo) {
console.log('InApp Shown with Info: ' + JSON.stringify(inAppInfo));
});

moe.on('onInAppClick', function(inAppInfo) {
console.log('InApp Shown Clicked with Info: ' + JSON.stringify(inAppInfo));
});

moe.on('onInAppDismiss', function(inAppInfo) {
console.log('InApp Dismissed with Info: ' + JSON.stringify(inAppInfo));
});

moe.on('onInAppCustomAction', function(inAppInfo) {
console.log('InApp Custom Action with Info: ' + JSON.stringify(inAppInfo));
});

Payload Structure in Callbacks

InAppInfo received in the callbacks above have the following structure:

JavaScript

{
"accountMeta": {
"appId": ""
},
"data": {
"platform": "iOS/android",
"campaignName": "",
"campaignId": "",
"campaignContext": {},
"actionType": "navigation",
"navigation": { // Key will only be present for onInAppClick callback
"navigationType": "screen/deep_linking",
"value": "",
"kvPair": {
"k1": "v1"
}
},
"customAction": {// Key will only be present for onInAppCustomAction callback
"kvPair": {
"k2": "v2"
}
},
"data": { // Key will only be present for onInAppSelfHandle callback
"payload": "", // payload entered in dashboard while creating selfHandled campaign
"dismissInterval": 60 // auto dismiss interval
}
}
}

Handling Orientation Change

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.

There are two ways to do it:

1. Add the API call in the Android native part of your app
2. Call MoEngage plugin’s onOrientationChanged()

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

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

Java

import android.os.Bundle;
import org.apache.cordova.\*;
import com.moengage.cordova.MoECordovaHelper;

public class MainActivity extends CordovaActivity {
...
@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
MoECordovaHelper.getInstance().onConfigurationChanged();
...
}
...
}

Call MoEngage plugin’s orientation change API

Call the below API to notify SDK of the orientation change.

JavaScript

var moe = MoECordova.init(YOUR_Workspace_ID);
...

// Notify SDK on orientation change
moe.onOrientationChanged();