Documentation Experience Platform Mobile App Tutorial

Create and send in-app messages

December 22, 2023

Topics:
In App

CREATED FOR:

Beginner
Intermediate
Developer

Learn how to create in-app messages for mobile apps with Experience Platform Mobile SDK and Journey Optimizer.

Journey Optimizer allows you to create campaigns to send in-app messages to targeted audiences. Campaigns in Journey Optimizer are used to deliver one-time content to a specific audience using various channels. With campaigns, actions are performed simultaneously, either immediately, or based on a specified schedule. When using journeys (see the Journey Optimizer push notifications lesson), actions are executed in sequence.

Architecture

Before you send in-app messages with Journey Optimizer, you must ensure that the proper configurations and integrations are in place. To understand the in-app messaging data flow in Journey Optimizer, refer to the documentation.

NOTE

This lesson is optional and only applies to Journey Optimizer users looking to send in-app messages.

Prerequisites

Successfully built and run app with SDKs installed and configured.
Set up the app for Adobe Experience Platform.
Access to Journey Optimizer and sufficient permissions as described here. Also you need sufficient permission to the following Journey Optimizer features.
- Manage campaigns.
Physical iOS device or simulator for testing.

Learning objectives

In this lesson, you will

Create an App Surface in AJO.
Install & configure the Journey Optimizer tag extension.
Update your app to register the Journey Optimizer tag extension.
Validate setup in Assurance.
Define your own campaign and in-app message experience in Journey Optimizer.
Send your own in-app message from within the app.

Setup

TIP

If you have setup your environment already as part of the Journey Optimizer push messaging lesson, you might already have performed some of the steps in this setup section.

Add an app surface in Data Collection

From the Data Collection interface, select App Surfaces in the left-hand panel.
To create a configuration, select Create App Surface.
Enter a Name for the configuration, for example Luma App Tutorial .
From Mobile Application Configuration, select Apple iOS.
Enter the mobile app Bundle Id in the App ID (iOS Bundle ID) field. For example, com.adobe.luma.tutorial.swiftui.
Select Save.

Update datastream configuration

To ensure data send from your mobile app to the Edge Network is forwarded to Journey Optimizer, update your Experience Edge configuration.

In the Data Collection UI, select Datastreams, and select your datastream, for example Luma Mobile App.
Select for Experience Platform and select Edit from the context menu.
In the Datastreams > > Adobe Experience Platform screen, ensure Adobe Journey Optimizer is selected. See Adobe Experience Platform settings for more information.
To save your datastream configuration, select Save.

Install Journey Optimizer tags extension

For your app to work with Journey Optimizer, you must update your tag property.

Navigate to Tags > Extensions > Catalog.
Open your property, for example Luma Mobile App Tutorial.
Select Catalog.
Search for the Adobe Journey Optimizer extension.
Install the extension.

When only using in-app messages in your app, in Install Extension or Configure Extension, you do not need to configure anything. However, if you already have followed the Push notifications lesson in the tutorial, you will see that for the Development environment, the AJO Push Tracking Experience Event Dataset dataset is selected from the Event Dataset list.

Implement Journey Optimizer in the app

As discussed in previous lessons, installing a mobile tag extension only provides the configuration. Next you must install and register the Messaging SDK. If these steps aren’t clear, review the Install SDKs section.

NOTE

If you completed the Install SDKs section, then the SDK is already installed and you can skip this step.

In Xcode, ensure that AEP Messaging is added to the list of packages in Package Dependencies. See Swift Package Manager.
Navigate to Luma > Luma > AppDelegate in the Xcode Project navigator.
Ensure AEPMessaging is part of your list of imports.

import AEPMessaging

Ensure Messaging.self is part of the array of extensions that you are registering.

let extensions = [
    AEPIdentity.Identity.self,
    Lifecycle.self,
    Signal.self,
    Edge.self,
    AEPEdgeIdentity.Identity.self,
    Consent.self,
    UserProfile.self,
    Places.self,
    Messaging.self,
    Optimize.self,
    Assurance.self
]

Validate setup with Assurance

Review the setup instructions section to connect your simulator or device to Assurance.
In the Assurance UI, select Configure.
Select the button next to In-App Messaging.
Select Save.
Select In-App Messaging from the left navigation.
Select the Validation tab. Confirm that you aren’t getting any errors.

Create your own in-app message

To create your own in-app message, you must define a campaign in Journey Optimizer that triggers an in-app message based on events that occur. These events can be:

data sent to Adobe Experience Platform,
core tracking events, like action, or state or collection of PII data, through the Mobile Core generic APIs,
application lifecycle events, such as launch, install, upgrade, close, or crash,
geolocation events, like entering or exiting a point of interest.

In this tutorial, you are going to use the Mobile Core generic and extension-independent APIs (see Mobile Core generic APIs) to facilitate the event tracking of user screens, actions, and PII data. Events generated by these APIs are published to the SDK event hub and are available for use by extensions. The SDK event hub provides the core data structure tied to all Mobile Platform SDK extensions, maintaining a list of registered extensions and internal modules, a list of registered event listeners, and a shared state database.

The SDK event hub publishes and receives event data from registered extensions to simplify integrations with Adobe and third-party solutions. For instance, when the Optimize extension is installed, all requests and interactions with the Journey Optimizer - Decision Management offer engine are handled by the event hub.

In the Journey Optimizer UI, select Campaigns from the left rail.
Select Create Campaign.
In the Create Campaign screen:
1. Select In-app message and select an app surface from the App surface list, for example Luma Mobile App.
2. Select Create
In the Campaign definition screen, at Properties, enter a Name for the campaign, for example Luma - In-App Messaging Campaign, and a Description, for example In-app messaging campaign for Luma app.
Scroll down to Action, and select Edit Content.
In the In-App Message screen:
1. Select Modal as the Message Layout.
2. Enter https://luma.enablementadobe.com/content/dam/luma/en/logos/Luma_Logo.png for the Media URL.
3. Enter a Header, for example Welcome to this Luma In-App Message and enter a Body, for example Triggered by pushing that button in the app....
4. Enter Dismiss as the Button #1 text (primary).
5. Note how the preview is updated.
6. Select Review to activate.
In the Review to activate (Luma - In-App Messaging Campaign) screen, select in the Schedule tile.
Back in the Luma - In-App Messaging Campaign screen, select Edit triggers.
In the In-app message trigger dialog, you configure the details of the track action that triggers the in-app message:
1. To remove Application launch event, select .
2. Use Add condition repeatedly to build the following logic for Show message if.
3. Click Done.
You have defined a track action, where the Action equals in-app and the Context data with the action is a key value pair of "showMessage" : "true".
Back in the Luma - In-App Messaging Campaign screen, select Review to activate.
In the Review to activate (Luma - In-App Messaging Campaign) screen, select Activate.
You see your Luma - In-App Messaging Campaign with status Live in the Campaigns list.

Trigger the in-app message

You have all the ingredients in place to send an in-app message. What remains is how to trigger this in-app message in your app.

Go to Luma > Luma > Utils > MobileSDK in the Xcode Project navigator. Find the func sendTrackAction(action: String, data: [String: Any]?) function, and add the following code, which calls the MobileCore.track function, based on the parameters action and data.
// Send trackAction event MobileCore.track(action: action, data: data)

Go to Luma > Luma > Views > General > ConfigView in the Xcode Project Navigator. Find the code for the In-App Message button and add the following code:

// Setting parameters and calling function to send in-app message
Task {
    MobileSDK.shared.sendTrackAction(action: "in-app", data: ["showMessage": "true"])
}

Validate using your app

Rebuild and run the app in the simulator or on a physical device from Xcode, using .
Go to the Settings tab.
Tap In-App Message. You see the in-app message appear in your app.

Validate implementation in Assurance

You can validate your in-app messages in the Assurance UI.

Review the setup instructions section to connect your simulator or device to Assurance.
Select In-App Messaging.
Select Event List.
Select a Display message entry.
Inspect the raw event, especially the html, which contains the complete layout and content of the in-app message.

Next steps

You should now have all the tools to start adding in-app messages, where relevant and applicable. For example, promoting products based on specific interactions you are tracking in your app.

SUCCESS

You have enabled the app for in-app messaging and added an in-app messaging campaign using Journey Optimizer and the Journey Optimizer extension for the Experience Platform Mobile SDK.

Thank you for investing your time in learning about Adobe Experience Platform Mobile SDK. If you have questions, want to share general feedback, or have suggestions on future content, share them on this Experience League Community discussion post.

Next: Create and display offers

recommendation-more-help