Using Content Cards
Content Cards, a digital messaging feature in Adobe Journey Optimizer, deliver personalized, engaging content directly within mobile apps. Unlike conventional push notifications, they blend smoothly into the user interface, providing persistent and non-intrusive updates that enhance interaction and user experience.
This tool allows marketers to present relevant, rich media content to users, boosting engagement and ensuring key messages are noticed without interrupting the user's journey.
The Live Demos app supports Content Cards.
Prerequisites:
Ensure the Data collection datastream has Adobe Journey Optimizer checkbox checked for the Experience Platform.
Setup:
Create a content card configuration
1.Navigate to Channels > Channel configurations menu.
- Click Create channel configuration.
2.Enter Configuration Details
- Provide a name and an optional description for the configuration.
- Note: Names must start with a letter (A-Z) and can only contain alphanumeric characters, underscores (_), dots (.), and hyphens (-).
3.Choose the Content Cards channel for the configuration.
4.Choose the platform where the content card experience will apply:
For Web:
- Specify a Page URL to target a single page.
- Or, create a Pages matching rule to apply changes to multiple URLs that meet the rule. This is useful for making global changes across a website, such as updating a hero banner or adding an image across product pages.
For iOS and Android:
- Enter or select the App ID, Location or path within the app, and provide a Preview URL.
- Location or path inside the app: You can either use the same path as shown in the screenshot below ,luma.home.contentCardArea1 or use a custom surface name using the following recommended naming convention: ldap+projectid-uniqueidentifier
Location or path inside the app : It is is simply a unique identifier that represents a specific area on a page or screen. In DSN Builder, this identifier is used to configure the Content Card component.
If you plan to place multiple Content Cards on the same page, each one must be assigned its unique value. This ensures that DSN can distinguish between the cards and deliver the right content to the right area.
Important:
The surface identifiers in your Adobe Journey Optimizer campaigns must exactly match the surface identifiers used in your app code. Mismatched identifiers will result in no content cards being returned.
5.After configuring the settings, submit your changes.
Once completed, you can use your new configuration when creating a Content card experience.
Template Layouts
Content cards support three template types: SmallImage, LargeImage, and ImageOnly.
SmallImage Template :
- Layout: Horizontal layout with image on the left and content on the right
LargeImage Template
- Layout: Vertical layout with image at top and content below
ImageOnly Template
- Layout: Single image container
Create content cards
To begin building your content cards through a campaign, follow these steps:
1.Navigate to Journey Managment > Campaigns. Create a Campaign.
2.Select Campaign Type as "Scheduled"
3.Define Campaign Properties:
- In the Properties section, provide a name and description for the campaign.
4.Choose Your Audience:
- In the Audience section, click Select audience to choose from the available Adobe Experience Platform audiences.
- In the Identity namespace field, select the appropriate namespace to identify individuals in the segment.
5.Choose the Content card action for the campaign.
6.Select or Create a Content Card Configuration
In our case, select an existing content card configuration
7.Enable Additional Delivery Rules (Optional):
- If needed, toggle Enable additional delivery rules. You can then click Edit triggers to define the events and criteria for message delivery using the rule builder.
Lets keep the triggers empty.
8.Set your campaign to run on a specific date or recur at regular intervals
9.Begin creating the content by clicking Content tab.
Select one of the Content Card Layout. For now we will select Large Image.
Target: To provide target value, it has to be com.adobe.dsn.dxdemo://Name
You can grab Name from mobile project configuration.
Go to mobile project in the builder. Click on any screen where you want to navigate.
Click on pencil icon to see the screen name and use Name property.
Provide sample content as below:
Title: Explore the Fall '24 Collection
Body: Get ready for cooler weather with our latest styles. From cozy knits to chic outerwear, discover must-have pieces for the season.
Media Url : https://t4.ftcdn.net/jpg/09/29/45/99/240_F_929459911_XLhX1UScH55K1JfWU2D1FLFLOC0xJ3ey.jpg
Button Label: Shop Fall Collection
Target : com.adobe.dsn.dxdemo://fall-24-collection
Button Label : Get Styling Tips
Target : com.adobe.dsn.dxdemo://get-styling-tips
Configure Mobile App for Content Cards
- Open mobile project in builder configuration.
- Navigate to Products screen(or any screen)
- Add component - Content Cards under General category.
Provide surface value as luma.home.contentCardArea1.
While using your own Mobile project, users need to use the same location path used in the Content card channel configuration for the surface value of the Live Demos app Content card component.
4.Open the app on the device. Navigate to products screen. It should look as below:
Sample Scenario is implemented in Luma - More Info here
Troubleshooting:
If an existing Content Card stops working after an app upgrade:
- Go to AJO and then go to Campaigns.
- Select the campaign associated with the Content Card.
- Click Modify Campaign, then choose the Content Card layout.
- Click Review to reactivate the campaign.