[Music] [Spoorthi Pujari] Hello, everyone. Hope you're having a great time at Summit. Welcome to session 603. My name is Spoorthi Pujari, and I'm a Software Development Engineer on the Adobe Experience Platform Mobile SDK team. I've been with Adobe for five years, and I work on the SDK libraries that help app developers integrate with APN solutions. I'm joined today by my colleague Ryan Morales. Ryan, would you like to introduce yourself? [Ryan Morales] Sure. So I've been at Adobe for about 14 years now. And I've been on the Mobile team for the past eight years. And I've worked on different marketing-related features, but lately, I've been working on a lot of, in-app and Push notification, messaging-related features. And I'm excited to show this new feature that we just released, and I'll be doing that a little later. But for now, I'll hand it back to Spoorthi. Thanks, Ryan. We're very excited to be here today to share a new way of supercharging your mobile apps engagement and growth using Adobe Journey Optimizer. So we'll start our session with a high level overview of Adobe Journey Optimizer and the communication channels that it provides to interact with your mobile app users. Then we will introduce you to the star of today's show, content cards, and go over some of the use cases where you can use this channel. Then we will do a live demo of authoring and publishing a content card campaign in the Adobe Journey Optimizer web UI. I'll hand it off to Ryan, who will show all the steps that a mobile app developer needs to do to integrate these cards in an iOS app. We will end with giving you a sneak peek of what is to come in the future of this channel, and we'll save some time at the end for Q&A.
But before we start, we want to get to know our audience here a little bit. So by a show of hands, how many here are familiar with Adobe Experience Platform or AEP as I'm going to refer to it for the rest of this session? So if you have used it, ever heard of it, you can just raise your hands.
Okay, we have a lot of users who are aware of AEP or have used it. And how many of you have used at least one product built on top of AEP? This could be Real-Time Customer Data Platform, Customer Journey Analytics, or Adobe Journey Optimizer.
Okay, we have a few hands, so we have a few users in the group. That's good. And last question, how many of you have mobile apps that are currently published to either the Apple App Store or the Google Play Store? Okay. Wow! That's an overwhelming number. So we definitely have the right target audience for this session. And for all those of you who said you have mobile apps live, this graphic might be very familiar, where you see a gradual decline in the number of users engaging with your app as time goes by. I myself have around 100 apps on my phone, but I spend about 75% of my time on just three apps. And spoiler alert, all three are social media apps. So what are these three apps doing right that the others aren't? They are communicating with me constantly on something that I value a lot. Well, in my case, it's the many adorable cat videos that I'm missing out on. So engaging and retaining users is not just about the functionality that your app offers, but it's also about how often you remind your users the value it brings to them.
Regular communication can keep your users engaged, and content personalized to them can reinforce your app's value to them.
This is where Adobe Journey Optimizer, or AJO, comes into play. It allows you to create and deliver personalized content across any app, device, or communication channel. But to personalize content for each user, you would require a central location for all your customer data and a powerful engine that can leverage insights from the real-time customer app engagement.
This capability is provided by AEP. And AJO, being an app that is natively built on AEP, is fully equipped to harness these features.
With AEP, you can deliver one time content personalized to specific set of audience on any single communication channel using campaigns or you can craft a multi-step cross-channel workflow combining various user events using journeys. You can even show best offers and experiences tailored to each user at the right moment of their app usage using decision management.
AJO can not only boost your user retention through personalization, but it also offers many other ways in which you can drive your app's growth.
One way would be to provide highly relevant product recommendations to increase in-app purchases and conversions. Another is to create app workflows tailored to each user to improve engagement. You can even analyze the metrics about your live campaign and tweak them for optimal performance.
These amazing improvements can be achieved by leveraging the various channels provided by AJO to engage with your users. For this presentation, we're going to be focusing on the channels that are available in AJO to communicate with your mobile app users. And the first one of these is Push Notifications. If you use your phone regularly, you have definitely seen one of these come up. One moment you are opening your phone to set a reminder and one push notification and two hours later, you're deep into watching cats vibing to folk music.
This is how powerful push notifications are because they allow you to communicate with your users even when they're not actively using your app. So it can be a great way to help users who have not used your app in a while to reengage with it. It is also great for time sensitive alerts as it ensures instant communication with your users.
The second way in which you can communicate with your mobile app users through AJO is by in-app messages. These are pop-ups that overlay on top of your existing app content. It helps in sending notifications within your app for different purposes, like promoting new features, presenting special offers, or onboarding new users, all just at the right moment. They have a clear call to action, which can be effective in improving conversions within your app.
The third way in which you can improve your app experience is through code-based experiences. They allow you to insert and edit personalized content in locations embedded inside your app. And this channel is not just limited to mobile apps. You can use it across all your touchpoints, like web apps, smart TV, kiosks, or even surfaces where you don't even have a web browser available. It also supports API-based, headless, or server side implementations if you have those requirements.
And finally, the newest channel in AJO and the star of today's show, Content Cards. It allows delivering personalized and engaging content directly within your mobile app. You can present text along with rich media in a way that matches the theme of your app. And as we will demo later, it is very easy for app developers to integrate it in their existing app while offering flexibility to completely customize the card as they need to. It allows you to dynamically change the app content without needing those multiple long, tedious app releases.
One big advantage of using content cards is that they integrate seamlessly with your app's existing UI, ensuring that users are not overwhelmed by them. Unlike the push notification and in-app message channel, content cards offer a persistent, non-intrusive way to enhance the app experience. They can be delivered without requiring any explicit user opt in. And with the help of AEP Mobile SDKs, it's also a breeze for developers to integrate it in their app with just a few lines of code, ensuring quick time to market and accelerated value realization.
So what can content cards be used for? Here are four example use cases that you can take away from this session and start implementing right away in your apps. But sky's the limit with what you can do with this channel.
So the first use case is for product promotion and upsell. And here is an example of how one of our internal customers, Adobe Acrobat, used content cards to drive their in-app conversions.
Their objective was to win back paid users who had canceled their premium subscription in the last one year. So they targeted these users initially with a push and an in-app message. When users failed to convert upon these initial messages, they showed a persistent content card on the app's home page describing the offer to the user and also added a call to action that would redirect them to the re-subscribe page with the offer already applied. This approach of targeting non-active app users with a push notification, combined with showing a persistent homepage content card, helps in effective communication without overwhelming users and prove very effective to increase the in-app conversions.
The second use case that we are actually going to be implementing live today is to help new users onboard into your app and discover new features. So in continuation of using the Adobe Acrobat example from the first use case, we want to create a content card that will help new users discover the free cloud storage feature provided by the app.
But to be able to use the cloud storage feature, users first need to sign into the app. So we have already created a content card campaign that is shown to users when they are in the app but haven't signed in yet. The call to action on this content card will lead to the sign-in page. Now we will author a content card that'll be shown to users after they sign in and explain to them about this cloud storage feature and even add a call to action that will lead to the specific feature page.
So let's jump in and bring this vision to life. But before I move over to the AJO UI, I want to talk about a few prerequisite steps that need to be completed before you start using content cards. The first one is that your organization has access to Adobe Experience Platform and Adobe Journey Optimizer. Once you have these solutions enabled for your org, you will need to create a dataset that will hold all of your customer data.
Now you can either use one of the pre-provisioned datasets or create your own. And for some of you who said you're already using AEP, you might have this dataset, in which case you will need to add a field group to record all the content card interactions that your users are performing in the app.
Then you need to create a data stream that will link your app with this dataset. Be sure to enable the Adobe Journey Optimizer option in the data stream.
For the sake of time, we have already completed this step.
The next prerequisite is to ensure that your organization has the right merge policies enabled for Adobe Experience Platform. And the last step is to implement Adobe Experience Platform Mobile SDKs in your app. And this last step is made really easy with the guided channel setup offered in AJO. So I'm going to take a minute to quickly switch over to my browser.
Now I'm in the home page of experience.adobe.com and right next to this account image, there's a nine tile and when I click on it, I see the Journey Optimizer option. I'm here on the homepage of Adobe Journey Optimizer. This may look slightly different for you based on what actions you've been taking in this solution before. But if you scroll down, you should be able to see a get started section with a card for setting up mobile and web channels. So I'm going to go ahead and click Begin.
You need to create a tag property in the data collection UI for your mobile app. So if you already have one, you can select that in the dropdown here or you can click New. Let's give a helpful name for this.
We'll call it Acrobat-contentcard-demo. And then you can select the data stream that was created in the first step.
Now for our demo today, we are only going to be using the iOS platform, so I'm going to select that and then click on Auto-Create Resources. So behind the scene, this is supposed to create the tag property for you, but we have already performed this step. So at the end of it, you'll have a successful configuration. And you'll also see all the instructions that needed to be added in your app's code. So here you see the package dependencies that need to be imported in Xcode as well as the code that needs to be added in your app delegate class. I'll hand it over to Ryan a little bit later and he will show you exactly where these needs to be placed in the code.
Now let me go back to the home page of Adobe Journey Optimizer. And the first step in actually creating a content card is to create a channel configuration. So a channel configuration has all the technical parameters needed to deliver your content card. So right here on the left navigation, if you scroll down all the way at the bottom, you see this channel's option. Now I will go ahead and create a new channel configuration and first provide a helpful name.
So let's call it Acrobat-contentcards, and I want it to show up on the homepage, so I'll call it homepage. Then we'll select the communication channel, which is Content Cards.
And you can configure the delivery parameters for all three platforms web, iOS, and Android in a single channel configuration. But for our demo, I'll just select iOS. Now you need three pieces of information from your app developer. The first one is the app ID, which, for iOS apps, is the bundle identifier that uniquely identify your app when it's published to App Store. So for our app, it's com.adobe.acrobat.demo.
The next one is a location, which is basically a unique string that identifies the location inside your app where the content card needs to be displayed. I want the cards on the home page, so I will select Homepage. And then finally, you can also provide a preview URL, which should be a deep link that opens your app. This preview URL is used to connect to Adobe Assurance, which is a web-based UI to debug your app implementation. You can even use it to preview your content cards even before they're published to ensure that it matches the look and feel of the rest of your app.
For my app, the deep link is demo. So I'm going to go ahead and click Submit.
Now we can finally go and create a campaign for our content card. So on the left navigation, I'm going to click Campaign, and let's create a content card campaign. Now content card is an inbound channel, meaning that the mobile app requests for the content card on demand from the upstream servers. So I need to select Scheduled Marketing and then click Create.
Let's give a helpful name for our campaign, and let's call it Acrobat-- - That's a sandbox. - Okay. Sorry. I had to switch the sandbox really quickly. Sorry. I was on the wrong sandbox. So let's go ahead and do that again and create campaign.
And then let's give a helpful name to this campaign about cloud storage.
And then select the communication channel, which is content cards.
Now to control who actually sees this content card, there are two ways that you can configure it. The first one is if you want to show your content card to a specific set of users. You can create an AEP audience comprising of these users and select that audience right here. I want my card to be visible to all my app users so I leave it at all visitors. But I do want the card only to be visible to users after they sign in to the app. So for this, I'm going to leverage the additional delivery rules. These rules are client-side triggers that allow a content card to get qualified for a user when they perform some real-time action in the app.
So, Ryan, who built the app, told me that when a user signs into the app, there is an event sent to Adobe Experience Platform with a specific unique string indicating the signed in status of the user. So I'm going to click Edit Rules and then remove this existing application launch condition and select Send Data to Platform. And then add this unique value that Ryan gave me, which is status, and then enter the key, which is signedIn, and then click Done. So to reiterate the difference between audience and the delivery rules, audience controls which users actually receive your content card from the upstream and delivery rules determine when the user is able to see the cards that they're qualified for.
So let me also select the channel configuration that we created and then finally get to the fun part, which is editing the fields that go inside the card.
With content card, there are about five fields that you can configure. The first one is a Close Button, which provides users with the ability to dismiss a card if they don't want to see it anymore. I like this Simple X button, so I'm going to click on that.
For the title and the body, I already have predetermined some text that describe the cloud storage feature, so I'm just going to paste that in.
And then I also want to change an image that I've already uploaded to Experience Manager Assets. So I have created a folder for this session and I can find all my assets right here.
Now on the left here, you can also see a preview of what the card looks like. And if you toggle the sun button, you can even see what the card looks like when the app is in dark mode. I don't really like the contrast of this green against the black, so I'm going to go ahead and enable advanced formatting and provide another image that is going to be used if your phone is in dark mode. So I like this green better against the dark background. But the image still looks pretty wide. And this is something that the app developer can control on their end. And Ryan will show how when I hand it off to him in a minute.
Finally, I also want to add a button that will lead the user to the specific feature page. So I'll call it Try Now.
And then this is the deep link that Ryan shared for the cloud storage feature page. Finally, I also want my reports to show when users have clicked on this button. So I'll provide a string that'll help me identify interactions with this button in my content card report. So all of this is looking great. Let's review our campaign.
So the card itself looks great. I want it to be delivered to the Acrobat app on the homepage. And I only want it to be shown to users after they've signed in. So I'm going to go ahead and activate this campaign. Now I've shown you all the steps that a marketer would need to perform on the AJO Web UI to author and publish a content card. Now I'll hand it off to Ryan, who will be showing all the steps that an app developer needs to take to integrate these cards in an iOS app. Over to you, Ryan. All right. Thanks, Spoorthi. Let me switch over to your presentation.
Okay. Yeah. So I want to show the steps on integrating these, the content card that Spoorthi had created on the AJO UI into your app. And initially, this is just an initialization step for the AEP SDK. We have a list of extensions that I will be showing in within the AppCode and Xcode. And we have a register extensions API, which you provide this list of extensions to. And we also have a configure with App ID API, which takes the tag property, which has your app configuration. And this is set up on the data collection UI.
So let me go to the next slide.
And to retrieve the content cards, we have two API that we have added. The first one is updatePropositionsForSurfaces. And you provide it a list of surfaces to download the content cards from AJO, and we will cache them in memory once they are downloaded. And the second API is getContentCardsUI, and you provide a one surface, an optional customizer, which can be used to apply any app customization you want to give to the card to, for example, brand styling or make the card match your app look and feel. And a listener, it's optional as well. And that listener lets you apply any custom actions you want to take when the content card is interacted with. And finally, there's a completion, which will return the retrieved content card from the cache or an error if an error occurred when retrieving the content card.
So let me go to the next slide.
And this is the basic layout of a content card. Currently, we support one UI template named small image template. We plan to support more templates in the future, but currently, this is the one we have released. And each of these elements, in this content card are SwiftUI views, meaning that each of them can be modified using SwiftUI ViewModifiers. We provide a custom ViewModifier protocol to use in modifying these fields. So I will also show that later on how it's used.
And yeah, let me go to Xcode now to show the actual implementation within the IDE.
So this is Xcode. And I created an app, written in SwiftUI, which I will be integrating the content card that Spoorthi created, into the app itself. And this is the app delegate of the application. And as you can see, we have the extensions that I had shown in that slide. We have the call to register extensions to register these necessary extensions to get the app started. And I have that configured with app ID call to configure the app with the tag property that was set up on the data collection UI. And I can show the API, the two API that I just talked about.
So within the downloadCards function here, we have the call to updatePropositionsForSurfaces, and we're providing it a list of which contains one surface. So the surface is essentially the bundle ID of the app plus the location where you want to display the content card. So the bundle ID can be retrieved if you go to the project properties.
Right at this, the Identity area, you have the bundle ID, which corresponds to the app ID and the AJO UI. So in this case, it's com.adobe.acrobat.demo. If I go back here so I'm building this surface object. And if you look at all this content is just defining the home page location where the content card should be displayed within the app.
Let me return here. And the other API I had talked about was, getContentCardsUI. And again, it takes a surface, an optional customizer, an optional listener, and it returns the result in a completion.
So yeah, like, I could go ahead and I'll run through the demo, and let me just launch it.
I think there's some network issue. It wasn't able to retrieve the card.
Okay. So this is actually the-- We have a sign in content card, which we had created previously. And this is just telling the app user, that they can sign in to access additional features. So let me go ahead and click that. Click Sign In. Sign in with my Adobe account.
So from here, I have signed in to as a premium user of the app. And I can show-- Spoorthi mentioned that we have a send data to platform event that qualifies a user for this content card. So if I go to this view here, I create a xdmData dictionary with the key status and the value signedIn. And I call Edge. That sendEvent to send experienceEvent out to the AEP, Adobe Experience Platform. And that will qualify, the app user using a client side rule to say that they qualify for this content card. So now I have this content card that Spoorthi has just created AJO, and it's displayed within the app. So one thing I do want to mention is the formatting does look a bit wonky. And with the image taking up half of the content card space, then the text kind of squashed to one side. This is because we delivered the content cards in a generic fashion to the app, and the app developer want to use the content card customizer to make sure the card matches the look and feel of the app.
Actually, let me just go ahead and click through now. This, Try Now, button has that deep link that will redirect the app user to the cloud storage feature within the app. So when I hit Try Now, it redirects to this cloud storage feature, and it's just a way for the app user to discover new functionality within the app. So let me show the card customizer, how to use that. So if I go to the FeaturesCardView, so we have this cardCustomizer currently commented out. Let me just enable it. So now I will be passing a non-nil value to the getContentCardsUI, and it's telling it, when you retrieve this card from the cache, please apply this customization to it. So this is a CardCustomizer code. You can see that, you could customize a template title, the text color, the font, the template body, the text and font as well. But the main thing I want to point out is within the ImageModifier, this will modify the image that was currently taking up half the size of the content card, and now it'll shrink it to a width of 90 and a height of 120.
So when I re-launch the app, it should apply that customization to the card, and the card should have a more appealing look that will match the app, the app's look and feel better. Like, with the image taking up less of the content card, and the text is much more readable now.
So yeah. That's about it. Like, I showed, with just a few lines of code, you could implement-- Sorry, you could implement a few lines of code to get the content card within your app. And, yeah, it's quick and pretty easy. So let me hand it back to Spoorthi.
Thank you, Ryan. Let me quickly switch back to the presentation.
Okay, so you saw how in just under 15 minutes and with just three simple steps, we were able to create a content card, publish the campaign, and also integrate it with our iOS app. So to go over our steps again, we created a channel configuration. Then we used that channel configuration in a campaign and then designed all the fields that need to go inside the content card. And then Ryan, who's the app developer, he showed us how easy it is to integrate it into the app with just a few lines of code using the AEP Messaging SDK. Now let me, for a minute, quickly switch back to the AJO UI because I want to show how the reports for these content cards look like.
So we have this content card for the sign in card that Ryan showed, and we have this running for a while. So let me open the reporting for it. These reports are powered by Customer Journey Analytics, and you can see various metrics for this particular card campaign. You can see that it has 282 displays, but there have only been 53 clicks on that card. So like, the click-through rate is about 19%, which is quite low. So I can go back in and modify my campaign to make the card more appealing for users to actually click on. If you scroll down, you can even see other content card campaigns that are targeting this very surface. We had some that we had activated as we were testing this feature, so you can see four of those campaigns and how they've been performing.
And if you want a more live real-time report, you can also find a 24-hour report right here, and this provides a more real-time statistic about the impressions and interaction on the content card.
And then you might remember that I put in a string, when I was authoring the content card at the button part. So that string is what is showing up here. For the sign in card, we had given the identifier of the button as sign in, and we can see that there were nine interactions in the past 24 hours. So let me switch back to my presentation.
And let's look at two more ways in which you can use content cards to improve your app engagement. The first one would be to have meaningful interactions with your app users to strengthen brand loyalty. This can be achieved by using content cards to share personalized messages celebrating milestone and live events. You can even show exclusive deals for your reward points members and motivate them to move to a higher tier using content cards. And you can even go a step further and improve your app by getting firsthand feedback from your app users through ratings and surveys powered by content cards.
And then another way in which you can use content cards is to keep your users informed about upcoming payments, subscription renewals, appointments, or bookings. You can even increase in-app conversions by showing users a new product that they were interested in that has just come back in stock. And then finally, you can improve the app's value to the user by guiding them to external resources that can unlock new ways that they can use your app.
So we saw everything that's possible with content cards today, but we want to give you a sneak peek of some of the future enhancements that we want to make to this channel.
As Ryan told, we only have one template right now with the image on the left side and then the title text, and the body and buttons on the left side. We know that this does not cover all marketing use cases, so we are working on adding additional template choices to provide more UI options to display these cards.
The second one that we're really excited to provide in the future is an easy out-of-the-box container to organize multiple cards that are designed for a single surface. So you can easily organize your cards either in a vertical list, horizontal, stacked, or grid.
Next, we want to provide a dedicated location in your app where your content cards can live in the form of a message inbox. And this can come with some additional functionality like providing users red status and even allowing users to delete the card permanently.
And then the final feature that we want to bring to the content card channel is to allow automatically pairing it with other transient channels like Push and in-app messages. So when a user receives a Push notification and they dismiss it, it still lives on in the app in the form of content card.
So as you saw, you can boost your app's engagement by delivering fully customized content and rich media with minimal effort using content cards. If you're ready to get started with this channel, please scan this QR code for some resources.
I think, yeah, that's about it for our session, and we want to open it up for questions.
- Thank you. - Thank you. [Music]
