On this page: Learn how to insert, adjust, and personalize Adobe Experience Manager dynamic media, including text overlays and dynamic media templates, within Journey Optimizer content.
Get started with dynamic media gs-aem-dynamic
The Asset selector now supports Dynamic media allowing you to seamlessly select and use approved dynamic media renditions within Journey Optimizer. Changes made to assets in Adobe Experience Manager are instantly reflected in your Journey Optimizer content, ensuring the most up-to-date versions are always in use without requiring manual updates.
Note that this integration is only available for customers using Dynamic Media Manager as a Cloud Service.
To learn more about Dynamic Media in Adobe Experience Manager as a Cloud Service, refer to Experience Manager documentation.
Considerations
-
Ensure that Dynamic Media with OpenAPI is enabled in Adobe Experience Manager as a Cloud Service. Learn more.
-
Dynamic media integration with Adobe Journey Optimizer is available for both Dynamic Media Scene7 mode and with OpenAPI.
-
For Dynamic Media Scene7 assets, Journey Optimizer adds default modifiers (
bfc=off&fmt=png-alpha) at the start of the URL. If your preset also setsfmtorbfc, it takes precedence, since Scene7 uses the last occurrence of a repeated parameter. To avoid unexpected results, removefmt/bfcfrom the preset, or move it before the default modifiers in the URL. -
By design, the asset selector returns a
/images-based URL format. If you want to deliver an asset in its original formatm, for example, GIF or SVG, you need to manually update the URL to use the/contentpath instead. Learn more in Dynamic Media best practices documentation.
Add and manage Dynamic media dynamic-media
Enhance and optimize your content for any screen or browser by inserting dynamic media from Adobe Experience Manager as a Cloud Service directly into your Journey Optimizer content. You can then resize, crop, enhance, and make other adjustments as needed.
To add an Adobe Experience Manager asset in your HTML content, follow these steps:
-
Drag and drop an HTML component into your content.
-
Select Show the source code.
-
In the Edit HTML menu, navigate to Assets then click Open asset selector.
Alternatively, you can copy and paste the URL of your asset.
-
Browse your AEM assets and select the one you wish to add to your content.
-
Adjust the image parameters (e.g., height, width, rotate, flip, brightness, hue, etc.) as needed to match your asset requirements.
For a comprehensive list of image parameters that can be added to the URL, refer to Experience Manager documentation.
-
Click Save.
Your content now includes dynamic media. Any updates you make in Experience Manager will automatically appear in Journey Optimizer.
Personalize your Text overlay text-overlay
Easily customize any dynamic media by replacing the existing text overlay with new text of your choice, allowing for seamless updates and personalization.
For example, using the experimentation functionality, you can update the existing text overlay by replacing it with a different text for each treatment, ensuring it is customized for each profile when they open their messages.
To personalize your text overlay, follow these steps:
-
Drag and drop an HTML component into your content.
-
Select Show the source code.
-
From the Edit HTML menu, access Assets then Open asset selector.
You can also simply copy and paste your assets URL.
-
Browse through your AEM assets and select the one you want to add to your content.
-
Replace the overlay with the desired text.
-
Update the images parameters:
- Layer: enter the base element where your text is placed.
- Size: update the size of your text block.
- TextAttr: adjust the size of your text font.
- Pos: set the position of your text in the image.
note warning WARNING The Layer parameter is required to update your dynamic media. 
-
Click Save.
Your content now includes your updated text overlay.
Add and manage your Dynamic media template dynamic-media-template
Easily add your Dynamic Media template in Journey Optimizer and update your media content whenever needed. You can now incorporate personalization fields into your media, allowing you to create more customized and engaging content within Journey Optimizer.
Learn more about Dynamic media template.
With image component image-component
You can insert your dynamic template directly into your content using the Image component:
-
Open your campaign or journey and access your content.
-
Drag and drop an Image component into your layout.
For more information on Image component, refer to this page.
-
Browse through your AEM assets and select the Dynamic media template you want to add to your content.
-
In the Image settings, navigate to access the parameters of your dynamic media template.
The available fields depend on the parameters added during the template creation in Adobe Experience Manager.
-
Fill in the different fields and use the personalization editor to add personalized content. You can use any attribute, such as the profile name, city, or other relevant details, to create a more customized experience.
Learn more about personalization on this page.
-
Conditional content can be applied to the Dynamic Media component to generate different variants of the content. Learn more
-
Click Save.
Once you have performed your tests and validated the content, you can send your message to your audience.
With HTML component html-component
You can insert your dynamic template directly into your content using the HTML component:
-
Open your campaign or journey and access your content.
-
Drag and drop an HTML component into your layout.
-
Select Show the source code.
-
From the Edit HTML menu, access Assets then Open asset selector.
You can also simply copy and paste your assets URL.
-
Adjust the image text parameters as needed to match your asset requirements.
-
Click Save.
Once you have performed your tests and validated the content, you can send your message to your audience.
Insert countdown timer countdown
Create urgency and maximize conversions with Dynamic Media countdown timers that update in real-time when recipients open your emails. This feature is ideal for flash sales, limited-time offers, and time-sensitive promotions.
For example, as a marketer for a retail brand, you’re running a 48-hour flash sale. By using the countdown timer in your promotional emails:
- Recipients who open immediately see “47 hours remaining”
- Recipients who open 24 hours later see “23 hours remaining”
- Recipients who open after the sale ends see “Time’s up!”
For more information on how to add countdown timers to your Dynamic Media template in Adobe Experience Manager, refer to this document.
-
In Adobe Experience Manager, create a Dynamic Media template and add a countdown timer component to it.
-
In Journey Optimizer, create a new campaign or open an existing one, then access the Email Designer.
-
Drag and drop an HTML or Asset component into your email content.
-
Hover over the component and click Show the source code (for HTML components) or Browse (for Asset components).
-
From the Edit HTML menu, navigate to Assets and click Open asset selector to browse and select your published Dynamic Media template.
-
Enable the pills experience by toggling Pills to On. This improves readability by hiding long attribute paths.
-
In the Custom attributes menu, configure any customizable URL parameters as needed for your template.
Click Save when finished.
-
Alternatively, you can also access the parameters of the Dynamic Media template by selecting the asset in the Email Designer, then accessing the Settings menu.
Configure the following:
- Banner text: The text displayed with your timer
- End time: The date and time when the countdown expires. Enter the time in GMT (Greenwich Mean Time) only. The system does not accept other time zones.
- Fallback text: The message shown after the timer ends
-
Click Preview to view the timer with real-time countdown updates and verify your configuration.
When recipients open the email, they see the accurate time remaining for your flash sale. If they reopen the email later, the countdown automatically updates to reflect the current time remaining. After the end date, the default message appears automatically.
How-to video video
Learn how to integrate Adobe Experience Manager Dynamic Media with Adobe Journey Optimizer to enable real-time content updates and personalization.
This tutorial covers how to modify images directly within AJO, add text overlays using HTML mode, create dynamic media templates in AEM for hyper-personalization, and personalize campaigns by tailoring content for different audience segments. This integration allows marketers to efficiently create engaging and personalized campaigns without switching between applications.