|Summary||Discusses how to work with Experience Manager Digital Assets and Dyamic Media.|
|Digital Marketing Solution(s)||Adobe Experience Manager 6.3|
|Required Skills||CSS, HTML|
If you do not configure Experience Manager as described in the above link to work with Dynamic Media, you are not able to follow along with this article.
Carousel banners (also referred to as carousel sets) enable digital marketers to drive conversion by easily creating interactive rotating promotional content, and delivering it to any screen. Creating and modifying content featured in promotional banners can be time-consuming, limiting your ability to quickly publish new content, or make it more targeted. Carousel Banners enable you to quickly create or modify rotating banners, add interactivity such as hotspots that link to product detail and related resources, and deliver them to any screen—letting you bring new promotional content to market faster.
This article walks you through how to work with Dynamic Media and Assets, such as the one shown in the following illustration.
This section walks you through how to modify digial assets located in the sample carousel. Navigate to the carousel sample by performing these tasks:
1. Click on the AEM logo on the top left corner of the screen to open the global navigation.
2. Click on Assets.
3. Click Files, Summit.
Ensure that you install the two packages that are available at the start of this article. Otherwise, you will not have the assets discussed in this article.
Modify the assets in the carousel set, and add additional content. To edit the carousel set, perform these tasks:
5. Select the top two images Running Couple Mountain and Running Desert Woman by
hovering over the two thumbnails and clicking on them.
Dynamic Media Carousel sets support both hotspots and image maps allowing digital marketers to link product detail to regions of interest that are located within an asset. Perform these tasks:
1. Observe the regions of interest defined on the various slides, as shwon in the following illustration.
2. Click on a hotspot or image map to see the name and configured action in the Actions panel. The action type can be a quickview referencing a product in the system, or an external hyperlink.
3. Add a hotspot by selecting the Running Couple Mountain slide that your previously added. Click on the Hotspot button located in the action bar above the slide bar. Place the hotspot by clicking on the purple gloves within the slide as shown in the following illustration.
4. Configure an action from the Actions panel on the right by performing these sub tasks:
- Type a descriptive name for the hotspot, such as purple gloves.
- Associate this hotspot with an existing product by selecting the Quickview action.
- Click on the search icon in the field below to open the product picker.
7. Switch to the Running Desert Woman slide, and toggle the image map control. Drag an image map region over the blue jacket.
8. Configure a Hyperlink action by performing these sub tasks:
- Type a name for the image map, such as blue jacket.
- Associate this image map with a hyperlink by selecting Hyperlink as the action type.
- Enter a test URL of your choice.
Using the carousel editor, you can configure and preview the customizations. Perform these tasks:
1. Select the Appearance tab to customize the hotspot appearance and perform these sub-tasks:
- Select the ImageMapEffect component and expand the Background widget
to select custom art, or simply use one of the out of the box gallery icons.
- Click the gallery button.
- Select an out of the box hotspot icon.
3. Select the SetIndicator component. Perform these sub-tasks:
- Inside the position widget, adjust the bottom slider to any desired value.
- Under the Dotted Style section, adjust the sliders within the size widget.
- Explore setting a shadow or a border.
In addition to customizing the Appearance, you can also adjust behavioral modifiers in the Behavior tab. The carousel viewer is built from several components that expose modifiers that can be customized. Perform these tasks:
1. Select the CarouselView component under the Behavior tab. Perform these sub-tasks:
- Open the Slide Transition widget to reveal animation options.
- Change the default fade animation to side.
2. Select the SetIndicator component under the Behavior tab. Change the Set Indicator Mode to numeric to observe the effect.
Once you are satisfied with your appearance and behavior customizations, you can save the carousel set. This article covers just a small sample of the many aspects that can be configured.
The carousel editor makes a distinction between the carousel content and the viewer configuration made in the Appearance and Behavior tabs. Viewer configuration is saved separately in a viewer preset. This provides a lot of flexibility because it allows many carousel sets to share common viewer appearance and behavior configuration.
Custom changes can be overwritten while out of the box presets are read-only. Customizations requires you to save the changes.
Perform these tasks:
1 Click the Save button.
2. Provide a new preset name such as Demo.
3. Click the Confirm button to save and exit the Carousel Banner Editor.
Using Dynamic Media, you can create interactive videos that drive conversion. You can add product details to defined segments of videos to allow customers to link directly to their shopping cart for immediate purchase, as well as other services.
Perform these tasks:
1. Navigate to Assets, Files, Summit, Shoppable Video.
2. Click on the asset card titled Kitchen Video to preview the video.
You can modify an existing interactive video and add new content. Perform these tasks:
1 Click Edit in the top left of the screen to open the Interactive Video Editor.
2. Click the Preview button in the top right corner.
3. Adjust the Timeline Scale Slider to scale and examine the timeline contents.
4. Click on a segment in the timeline to adjust and inspect the associated products.
3. Adjust the segment duration by dragging the blue handles. Clicking on a segment handle moves the playhead to that position and displays the frame of video at that position.
Complete the incomplete interactive video by adding some missing products. First, add the desired products to the workspace. Perform these tasks:
1. Click the Content tab, then click Select Assets to open the asset picker. Perform these sub-tasks:
- Navigate to Summit, Shoppable Video, Products.
- Select the following images by hovering over the thumbnails and clicking on them: Glass, Wine Bucket, Candle Dish, Candles, Wine Decanter, Small Glass.
- Click the Select button.
To start segmentation of the video, choose a position. Perform these tasks:
1. Set the video to position 1:18. To do this, drag the red video seek thumb to quickly jump around the timeline,
2. Click the Add Segment button.
3. Adjust this new segment so that it spans from about 1:18 to 1:23 on the timeline. This
will represent the wine decanter and glass.
3. Associate the segment with the products by performing these sub-tasks:
- Make sure only the single segment is highlighted by clicking on it in the timeline
- Scroll through the Content tab and click on Wine Decanter and Glass to add them to the selected segment.
- Click on the respective products in the segment to customize their name and action type. (This is similar to the Carousel Banner example. In this case, we can leave the defaults as is.)
You can preview the video and see the new segments in the video. Notice in the following video, the newly created segment is displayed.
Perform these tasks:
1. Click on the Preview button to see the completed video.
2. Click on the Shoppable_Video_Dark drop down select list to choose the viewer option.
3. Once satisfied with the interactive video, we can click the blue Save button to save changes and exit the editor.
Join the AEM community at: Adobe Experience Manager Community.