@adobe/react-native-aepmessaging is a wrapper around the iOS and Android Adobe Journey Optimizer Messaging to allow for integration with React Native applications.
The messaging extension has the following peer dependenices, which must be installed prior to installing the messaging extension:
See Requirements and Installation instructions on the main page
Installation instructions for @adobe/react-native-aepmessaging v1.0.0-beta.3 with in-app messaging support
Clone the @adobe/react-native-aepmessaging package from the messaging branch on Github. Place the Messaging package folder into app repo or directory of your choosing. Then you can install the package by running:
cd MyReactApp
npm install {path to messaging package}Podfile setup for @adobe/react-native-aepmessaging v1.0.0-beta.3 with in-app messaging support
The In app Message APIs depends on the AEP Messaging iOS SDK v1.1.0-beta. This version is not yet published to the Cocoapods but is available in the public github repository. Add the following pod dependency in your applications Podfile under the application target.
target 'AEPSampleApp' do
pod "AEPMessaging", :git => "https://github.com/adobe/aepsdk-messaging-ios.git", :branch => "staging"
endGradle setup for @adobe/react-native-aepmessaging v1.0.0-beta.3 with in-app messaging support
AEPMessaging Android SDK v1.2.0-beta.3 with in-app messaging support is published to maven snapshots. In project level build.gradle file of Android project in your RN application add maven { url "https://oss.sonatype.org/content/repositories/snapshots/" } in allprojects -> repositories.
repositories {
google()
mavenCentral()
maven {
url "https://oss.sonatype.org/content/repositories/snapshots/"
}
}Initializing the SDK should be done in native code, additional documentation on how to initialize the SDK can be found here.
Example:
iOS
@import AEPCore;
@import AEPLifecycle;
@import AEPEdge;
@import AEPEdgeIdentity;
@import AEPMessaging;
@import AEPOptimize;
...
@implementation AppDelegate
-(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
[AEPMobileCore setLogLevel: AEPLogLevelTrace];
[AEPMobileCore registerExtensions: @[AEPMobileEdgeIdentity.class, AEPMobileEdge.class, AEPMobileMessaging.class, AEPMobileOptimize.class] completion:^{
[AEPMobileCore configureWithAppId:@"yourAppID"];
[AEPMobileCore lifecycleStart:@{@"contextDataKey": @"contextDataVal"}];
}
];
return YES;
}
@endAndroid
import com.adobe.marketing.mobile.AdobeCallback;
import com.adobe.marketing.mobile.InvalidInitException;
import com.adobe.marketing.mobile.Lifecycle;
import com.adobe.marketing.mobile.LoggingMode;
import com.adobe.marketing.mobile.MobileCore;
import com.adobe.marketing.mobile.Edge;
import com.adobe.marketing.mobile.edge.identity.Identity;
import com.adobe.marketing.mobile.Messaging;
import com.adobe.marketing.mobile.optimize.Optimize;
...
import android.app.Application;
...
public class MainApplication extends Application implements ReactApplication {
...
@Override
public void on Create(){
super.onCreate();
...
MobileCore.setApplication(this);
MobileCore.setLogLevel(LoggingMode.DEBUG);
try {
Edge.registerExtension();
Identity.registerExtension();
Optimize.registerExtension();
Messaging.registerExtension();
MobileCore.configureWithAppID("yourAppID");
MobileCore.start(new AdobeCallback() {
@Override
public void call(Object o) {
MobileCore.lifecycleStart(null);
}
});
} catch (InvalidInitException e) {
...
}
}
} import { Messaging, MessagingDelegate, MessagingEdgeEventType, Message } from '@adobe/react-native-aepmessaging';Returns the version of the AEPMessaging extension
Syntax
extensionVersion(): Promise<string>;Example
Messaging.extensionVersion().then(version => console.log("AdobeExperienceSDK: Messaging version: " + version));To configure Adobe Journey optimizer Messaging in Launch follow steps in Configure Adobe Journey optimizer
Handling push notifications must be done in native (Android/iOS) code for the React Native app. To configure push notification in the native project, follow the instructions provided by their respective platforms:
Push messaging APIs in the SDK must be called from the native Android/iOS project of React Native app.
In Android, MessagingPushPayload can be used for getting the notification attributes like title, body, and action. These are useful for push notification creation.
Initiates a network call to retrieve remote in-app message definitions.
Syntax
refreshInAppMessages()Example
Messaging.refreshInAppMessages();Sets the MessagingDelegate in AEPCore to listen the Message lifecycle events.
Syntax
setMessagingDelegate(delegate: MessagingDelegate);Example
const messagingDelegate = {
onShow(message: Message) {
// Action after message is displayed.
},
onDismiss(message: Message) {
// Action after message is dismissed.
},
shouldShowMessage(message: Message) {
return true; //Return true to show the Message else return false
},
urlLoaded(url: string, message: Message) {
// Action after message loads an URL
}
};
Messaging.setMessagingDelegate(messagingDelegate);Natively caches the provided Message object in-memory. Cached Message object can be later use to show message or perform other actions on the Message object. This function should be called from shouldShowMessage of MessagingDelegate.
Syntax
saveMessage(message: Message);Example
Messaging.saveMessage(message);The Message Object passed to the Messaging delegate contains the following functions to handle a message
Signals to the UIServices that the message should be shown.
Syntax
show();Example
var message: Message;
message.show();Signals to the UIServices that the message should be dismissed.
Syntax
dismiss(suppressAutoTrack: ?boolean = false);Example
var message: Message;
message.dismiss(true);Generates an Edge Event for the provided interaction and eventType.
Syntax
track(interaction: ?string, eventType: MessagingEdgeEventType);Example
var message: Message;
message.track("sample text", MessagingEdgeEventType.IN_APP_DISMISS);Adds a handler for Javascript messages sent from the message's webview.
Syntax
handleJavascriptMessage(name: string) : Promise<?any>;Example
var message: Message;
message.handleJavascriptMessage("test").then((data) => {
});Enables/Disables the autotracking for the Message events.
Syntax
setAutoTrack(autoTrack: boolean);Example
var message: Message;
message.setAutoTrack(true);Clears the reference to the in-memory cached Message object. This function must be called if a Message was saved by calling "Messaging.saveMessage" but no longer needed. Failure to call this function leads to memory leaks.
Syntax
clear();Example
var message: Message;
message.clear();App developers can now create a type MessagingDelegate in order to be alerted when specific events occur during the lifecycle of an in-app message.
Definition of type MessagingDelegate is:
type MessagingDelegate = {
onShow(message: Message): void;
onDismiss(message: Message): void;
shouldShowMessage(message: Message): boolean;
urlLoaded(url: string, message: Message): void;
};Objects of type MessagingDelegate can be created as shown below:
const messagingDelegate = {
onShow(message: Message) {
// Action after message is displayed.
},
onDismiss(message: Message) {
// Action after message is dismissed.
},
shouldShowMessage(message: Message) {
return true; //Return true to show the Message else return false
},
urlLoaded(url: string, message: Message) {
// Action after message loads an URL
}
};If a MessagingDelegate has been set, the delegate's shouldShowMessage method will be called prior to displaying an in-app message for which the end user has qualified. The developer is responsible for returning true if the message should be shown, or false if the message should be suppressed.
Below is an example of when the developer may choose to suppress an in-app message due to the status of some other workflow within the app:
function shouldShowMessage(message: Message): boolean {
if(someOtherWorkflowStatus == "inProgress") {
return false
}
return true
}Another option for the developer is to store a reference to the Message object, and call the show() function on it at a later time. App developer also have to call Messaging.saveMessage(message) from shouldShowMessage of MessagingDelegate for caching the Message on the native side of the RN AEPMessaging package. Continuing with the above example, the developer has stored the message that was triggered initially, and chooses to show it upon completion of the other workflow:
var cachedMessage: Message;
function otherWorkflowFinished() {
anotherWorkflowStatus = "complete";
cachedMessage.show();
}
function shouldShowMessage(message: Message): boolean {
if(anotherWorkflowStatus === "inProgress") {
// store the current message for later use
Messaging.saveMessage(message);
cachedMessage = message;
return false
}
return true
}Important: If the cached message is no longer needed after being used, free up the references to the Message object by calling message.clearMessage() to prevent memory leaks. In above example after displaying the in app message using cached message object if it is no longer needed then it should be cleared as shown below.
function otherWorkflowFinished() {
anotherWorkflowStatus = "complete";
currentMessage.show();
currentMessage.clearMessage();
}