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.gradle file.
dependencies {
...
implementation("com.moengage:inapp:$sdkVersion")
}
replace $sdkVersion with the appropriate SDK version
Call the showInApp()
wherever InApp has to be shown in the app as shown below :
import ReactMoE from 'react-native-moengage'
ReactMoE.showInApp()
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.
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.
import ReactMoE from 'react-native-moengage'
/// selfHandledpayload is of type MoESelfHandledCampaignData
ReactMoE.setEventListener("inAppCampaignSelfHandled", (selfHandledPayload) => {
if (selfHandledPayload && Object.keys(payload).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, or 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.
import ReactMoE from 'react-native-moengage'
ReactMoE.selfHandledShown(selfHandledPayload);
ReactMoE.selfHandledClicked(selfHandledPayload);
ReactMoE.selfHandledDismissed(selfHandledPayload);
InApp Callbacks
warning |
Note Make sure you are calling |
We provide callbacks whenever an InApp campaign is shown, dismissed, or clicked you can register for the same as shown below.
import ReactMoE from 'react-native-moengage'
///inAppInfo is of type MoEInAppData
ReactMoE.setEventListener("inAppCampaignShown", (inAppInfo) =>
console.log("inAppCampaignShown", inAppInfo)
);
///inAppInfo is of type MoEClickData
ReactMoE.setEventListener("inAppCampaignClicked", (inAppInfo) =>
console.log("inAppCampaignClicked", inAppInfo)
);
///inAppInfo is of type MoEInAppData
ReactMoE.setEventListener("inAppCampaignDismissed", (inAppInfo) =>
console.log("inAppCampaignDismissed", inAppInfo)
);
///inAppInfo is of type MoEClickData
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 |
Contextual InApp
You can restrict the in-apps based on the user's context in the application apart from restricting InApp campaigns on a specific screen/activity. To set the user's context in the application use setCurrentContext() API as shown below.
Set Context
Call the below method to set the context, before calling showInApp().
import ReactMoE from 'react-native-moengage'
// replace array elements with actual values.
ReactMoE.setCurrentContext(['c1', 'c2', 'ce'])
Reset Context
Once the user is moving out of the context use the resetCurrentContext() API to reset/clear the existing context.
import ReactMoE from 'react-native-moengage'
ReactMoE.resetCurrentContext();
Payload Structure
class MoEInAppData {
/// account information
accountMeta: MoEAccountMeta;
/// Platform on which callback is received
platform: MoEPlatform;
///InApp data
campaignData: MoECampaignData;
}
class MoECampaignData {
/// Unique Campaign Identifier
campaignId: string;
/// Campaign Name
campaignName: string;
/// additional information associated with Campaign
context: MoECampaignContext;
}
class MoESelfHandledCampaignData {
///InApp data
campaignData:MoECampaignData;
/// account information
accountMeta: MoEAccountMeta;
///Platform on which callback is received
platform: MoEPlatform;
///SelfHandled data
campaign: MoESelfHandledCampaign
}
class MoESelfHandledCampaign {
///Campaign Content provided while creating campaign
payload: string;
///auto dismiss interval in seconds
dismissInterval: Number;
}
class MoEClickData {
///account information
accountMeta: MoEAccountMeta;
///Platform on which callback is received
platform: MoEPlatform;
///InApp Data
campaignData: MoECampaignData;
///InApp Click action
action: MoEAction;
}
class MoEInAppCustomAction extends MoEAction{
/// Key-Value pairs configured with action
keyValuePair: Map<String, Object>;
///Click action type
actionType: MoEActionType;
}
class MoEInAppNavigation extends MoEAction {
///navigation action type screen/deeplink
navigationType: MoENavigationType;
// ScreenName OR deeplink URL based on navigation type
navigationUrl: String;
// Key-Value pairs configured with action
keyValuePair?: Map<String, Object>;
///Click action type
actionType :MoEActionType;
}
Handling Orientation Change
warning |
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.
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:
.configureInApps(new InAppConfig(false))