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.
Installing Android Dependency
Add the following dependency in the android/app/build-extras.gradle file.
dependencies {
...
implementation("com.moengage:inapp:$sdkVersion")
}
replace $sdkVersion with the appropriate SDK version
How to show In-App Messages?
Use showInApp() method to show inApp as shown below:
var moe = MoECordova.init(YOUR_Workspace_ID);
moe.showInApp();
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:
moe.setCurrentContext(["Home","CategoriesScreen"]);
Reset Context:
To reset the current context for the InApp module call resetCurrentContext() method:
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:
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:
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
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:
{
"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"
}
},
"selfHandled": { // 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
info |
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.
There are two ways to do it:
- Add the API call in the Android native part of your app
- 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.
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.
var moe = MoECordova.init(YOUR_Workspace_ID);
...
// Notify SDK on orientation change
moe.onOrientationChanged();