Dynamic Media lets you manage and publish dynamic digital experiences—a feature unique to Experience Manager Assets. This documentation describes the integration of AEM Assets and dynamic media with AJO and utilises it at the email designer level in AJO.

In this dynamic media with AJO demo, we will use the smart-crop feature available at the AEM instance level along with a few parameters for different renditions and Dynamic media templates from assets to achieve personalization.

USE CASE (SECURFINANCIAL - CREDIT CARD APPLICATION )

NOTE: If you'd like to replicate the below OOTB demo flow in your sandbox in ADSS or any other org, follow the setup instructions to enable Smart Crop and Renditions for your folder.

SecurFinancial as a brand wants to send the credit card application email in a more personalised way by using dynamic media templates and showcasing there name on the credit card in the email.

2. Select the base image credit-card.png, click create template from the top nav bar, and give proper name.

3. From the rightmost panel, select add text(T+ Symbol) and align accordingly as per your look and feel. Also, for those text properties, go on the parameters tab under text, toggle the include param to on, give the parameter name as name, and add some default value, and click on save.

4. Publish the above template and go to AJO Prod associated with this instance. Go to Credit card application Dynamic media template for Securfinancial.  (You can have your own template copied to your instance, or you can duplicate this template.)

5. Click on edit email body, and you can see the after the email body text you can add HTML component.

6. Click on HTML Component and go to the code view tab by using <> and go to assets from the left panel and go to asset selector and select the right repository(Adobe Demo System Shared Program Dev 1) from the drop down.

7. Go to your folder and select the template you created in the above step. For now, we will go to the securFinancial folder and select the credit card template.

8. Now go to the code view of the component, and in the image URL, you can see the name parameter that we created in the AEM template. Now, at the place of First name add the first name from profile attributes and similarly for last name in the URL. Also, give width = "60%" as an attribute in the img tag and click on Save.

9. Now go to the main banner image and select the image from the right panel image source(Click on the person image) and go inside the personalization tab and now add parameter &smartcrop=169BANNER this is smartcrop rendition for desktop images email. Also, under setting in from left panel under Display options Show only on desktop devices.

10. Duplicate the same image and repeat the above step. Now we will have a rendition for mobile and add parameter &smartcrop=54VERT. Also, under setting in from left panel under Display options Show only on mobile devices. Click on save.

11. Now click on simulate content and select a test profile and see the content for mobile and desktop and you will see different renditions of images and also, you can see the credit card will be personalised with test profile First name and last name.

Please follow the below steps to set this dynamic media feature on your AEM instance and integrate it with AJO. For now, we have showcased the steps at the ADSS AEM instance: AEM  and AJO Prod Sandbo x.

2. Click the hammer symbol and then assets > image profiles and check smart-lock profile is available.

3. Select the smart-crop profile and in the top bar click on Edit image processing profile to check the smart-profile configuration are set correctly.

4. Now go to Assets > files and create a folder with your name.

5. Now go to the home page, click the hammer symbol, and then assets > image profiles. Select the smart-lock profile and, from the top bar, select Apply processing profile to a folder and select the folder that you have created in the previous step and click apply.

6. So the configuration part is completed, and whenever you drop your images in the above folder, the dynamic media processing workflow will kick in and will create smart-crop renditions for the images, which we can utilize at the AJO email designer through the asset picker.



For the base images of the card and SecurFinancial email templates.