Setup AEM Assets

Setup AEM Assets for your site.

Site Config

Adding AEM integration

The AEM integration provides an out of the box way to work with your AEM assets. It also allows you to use the DA App SDK to build rich applications that leverages any content stored on your AEM as a Cloud Service instance.

Prerequisites

1. You have AEMaaCS with either a publish instance or Dynamic Media.
2. You can change configurations in Cloud Manager.
3. You can change configurations in DA.

Step 1 - AEM as a Cloud Service

An AEM environment config will need to be set. Details in the screenshot below. Expect a full restart (~10-20 minutes) when this is saved.

Environment Configuration: ADOBE_PROVIDED_CLIENT_ID | darkalley

Step 2 - Document Authoring

1. Visit: https://da.live/config#/{{name-of-da-org}}/{{name-of-da-site}}
2. Add the configuration keys from the table below.
3. Paper plane > Save

Configuration keys

All keys are set in the DA site config. Site-level values take precedence over org-level.

Step 3 - Use it

1. Open any page and notice you have a new image icon in your toolbar. This will open a modal to your AEM Assets.

2. Select the asset you want, and it will import into your document.

3. The asset must be accessible for DA & Edge Delivery Services to use it:

   • Publish tier — The asset must be published in AEM.
   • Dynamic Media delivery — The asset must be approved, and its activation target, if present, must be set to delivery.

Troubleshooting

1. The assets pane pulls up in DA, but I get an error inside it.

   1. Wait 5-10 minutes from when Cloud Manager tells you the variable is saved on your instance.
   2. Make sure the org you are logged into on DA is the same org that is allowed on AEM.

2. When I select an image, it is broken in DA.

   1. Ensure that you have a publish server (author only is not supported).
   2. Ensure that the asset is published.

3. I don't see any folders in the asset picker.

   1. You're pointing to a Dynamic Media instance and these do not support folders.
   2. You can use an author hostname + aem.asset.dm.delivery to browse your assets hierarchy but use Dynamic Media URLs for delivery.

Dynamic Media recommendations

Dynamic Media provides several capabilities you may want to leverage for your project. This could be Smart Crop, image presets, asset transformations via URL manipulation, or even asset management in general.

Edge Delivery provides a scalable, low complexity, and hyper performant image optimization service called Media Bus.

If you require the Dynamic Media features listed above, we recommend using Dynamic Media URLs during authoring and allowing Media Bus to optimize the images for final delivery. This will create a flexible and performant solution that leverages both technologies:

1. Asset management - Authors who are familiar with AEM and prefer this environment for managing assets can continue to do so while still leveraging the performance benefits of Edge Delivery Services.
2. URL-based asset transformations - Configured in AEM or DA and baked into an immutable Media Bus image prevents bad actors from manipulating images in real-time on your live website.
3. Smart Crop - Document Authoring provides affordances to select Smart Crop and AEM-made renditions.
4. Real-time image replacements - It can be enticing to want to swap live images in real-time on your live website. When done at scale, even an asset with minor changes in size, format, and color can create undesired results without proper QA. In leveraging the preview / publish model of Edge Delivery, an entire quality check can be performed on the affected pages before going live.
5. Image delivery optimization - Media Bus supports all modern image formats: AVIF, SVG, WEBP, and more. With modern browsers and evergreen update mechanisms, it is no longer required to sniff user agents to determine what formats a browser supports.

Using Dynamic Media directly on your site

There may be times where it is advantageous to use Dynamic Media directly on your site. Product imagery is one such use case. These scenarios are best handled by creating images during block decoration and not through manual authoring.

If you do find a scenario where you need to create Dynamic Media content that funnels through authoring and onto the final page, please note the following:

1. In order to bypass Media Bus ingestion, you will treat images as links. These links will be delivered as anchor tags and a developer can "hydrate" them into picture / image tags.
2. Please determine a pattern / convention with your content creators to account for conveying alt text information.
3. Placing Dynamic Media links in performance sensitive sections of your page will need to be accounted for. This includes using the same domain for DM as you would your site and ensuring headers have proper cache information.

Swapping existing assets

User story: As an author, I would like to update an existing asset with more vibrant colors without having to change every page on which the asset is currently used.

1. On da.live, use the side navigation panel to navigate to your assets using the "files" icon.
2. In Adobe Experience Manager Assets, navigate to the folder that contains the asset you want to replace.
3. Replace the asset and re-publish it.
4. Navigate to a page in DA that uses the asset in question.
5. Once you can see your changes reflected, Edge Delivery is ready to ingest it. Copy the asset URL.
6. Paste the asset publish URL into DA's search. This will list every page on DA that is using the asset.
7. Use the share button (action bar > share icon) to copy the AEM URLs.
8. Paste the URLs into DA's bulk preview & publish tool. Run a preview on these URLs.
9. QA your content to ensure all pages changed in the way you expect.
10. Once pages have passed QA, publish them.