Carousel banners enable 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 linking to product detail or related resources, and deliver them to any screen - letting you bring new promotional content to market faster.

Carousel Banners are designated by a banner with the word CAROUSELSET:

On your website, a carousel banner can look as follows:

Here you can navigate through the images (by clicking on the numbers). In addition, the slides automatically rotate based on a time interval you can customize. Images that you add in the carousel banner support both hotspots and image maps, where users can either tap or to go to a hyperlink or access a quick view window.

In this example, a user has tapped or clicked an image map and accessed the quick view window for gloves:

Quick Start: Carousel Banners

Start by identifying dynamic variables used by the existing quick view implementation so that you can enter hotspots and image map data properly during the carousel banner creation process in AEM Assets.

Nota:

If you are an AEM Sites or Ecommerce customer, you can use the built-in feature to navigate to product pages and lookup the existing skus in the product catalog. You do not need to manually enter hotspot or image map variables. See information on setting up eCommerce.

If you are an AEM Assets and Dynamic Media customer, you will manually enter data for hotspots and image maps, and then integrate the published URL or Embed code with your third-party content management system.

If you are an administrator, you can customize the behavior and appearance of the carousel by creating your own Carousel viewer preset. The main beneift is that this custom viewer preset can be re-used for multiple carousels. However, users also have the option to customize the behavior and appearance of the carousel directly while authoring the carousel. This is the preferred approach when you want a very specific design for a given carousel.

To create a Carousel Set in Assets, click Create and then select Carousel Sets. Then, add images to slides and click Save. You can also modify the appearance and behavior of the carousel direclty within the editor.

Add one or more hotspots or image maps to an image banner and associate each one with an action such as a link or a quick view. After you add hotspots or image maps, you finish this task by publishing the carousel set. Publishing creates the embed code that you can use to copy and apply to your website landing page.

Identifying Hotspot and Image Map Variables

Start by identifying dynamic variables used by the existing quick view implementation so that you can enter hotspots or image map data properly during the carousel set creation process in AEM Assets.

When you add hotspots or image maps to a banner image in AEM Assets you need to assign a SKU and optional additional variables to each hotspot or image map. Such variables are used later to match hotspots or image maps with quick view content.

Nota:

If you are an AEM Sites and/or AEM Ecommerce customer, skip this step. You do not need to manually identify hotspot or image map variables; you can use the integration with Ecommerce for product integration. See information on setting up eCommerce. In addition, you can use the Interactive component and add it to your web page.

If you are an AEM Assets or Media customer, you publish the URL or Embed code and then integrate with your third-party content management system and identify hotspots and image maps manually.

It is important to properly identify the number and type of variables to associate with hotspot or image map data. Each hotspot or image map added to a banner image must carry enough information to unambiguously identify the product in the existing backend system. At the same time, each hotspot or image map should not include more data than is necessary. The reason is because that would make the data entry process overly complex and on-going hotspot or image map management more error-prone.

There are different ways to identify a set of variables to use for hotspot or image map data.

Sometimes it may be enough to consult with IT specialists responsible for the existing quick view implementation, as they are likely to know what is the minimum set of data needed to identify quick view in the system. However, in most cases it is also possible to simply analyze the existing behavior of the front-end code.

The majority of quick view implementations use the following paradigm:

User activates a user interface element on the website. For example, clicking a Quick View button.

The website sends an Ajax request to the backend to load the quick view data or content, if needed.

The quick view data is translated into the content in preparation for rendering on the web page.

Finally, the front-end code visually renders such content on the screen.

The approach then is to visit different areas of the existing website where the quick view feature is implemented, trigger the quick view and capture the Ajax URL sent by web page for loading the quick view data or content.

Normally there is no need for you to use any specialized debugging tools. Modern web browsers feature web inspectors that do an adequate job. The following are a few examples of web browsers that include web inspectors:

To see all outgoing HTTP requests in Google Chrome, press F12 to open the Developer Tools panel, and then click the Network tab.

In Firefox, you can either activate the Firebug plug-in by pressing F12 and use its Net tab, or you can use the built-in Inspector tool and its Network tab.

When network monitoring is turned on in the browser, trigger the quick view on the page.

Now find the quick view Ajax URL in the network log and copy the recorded URL for future analysis. In most cases when you trigger the quick view there are numerous requests that are sent out to the server. Typically, the quick view Ajax URL is one of the first in the list. It has either a complex query string portion or path, and its response MIME type is either text/html, text/xml, or text/javascript.

During this process it is important to visit different areas of your website, with different product categories and types. The reason is that quick view URLs may have parts that are common for a given website category, but change only if you visit a different area of the website.

In the simplest case, the only variable part in the quick view URL is the product SKU. In this case, the SKU value is the only data piece that you need for adding hotspots or image maps to the banner image.

However, in complex cases, the quick view URL has different varying elements in addition to the SKU, such as category ID, color code, size code, and so forth. In such cases, every element is a separate variable in your hotspot or image map data definition in the carousel banner feature.

Consider the following examples of quick view URLs and their resulting hotspot or image map variables:

Single SKU, found in the query string.

The recorded quick view URLs include the following:

http://server/json?productId=866558&source=100

http://server/json?productId=1196184&source=100

http://server/json?productId=1081492&source=100

http://server/json?productId=1898294&source=100

The only variable part in the URL is the value of the productId= query string parameter, and it is clearly a SKU value. Therefore, our hotspots or image maps only need SKU fields populated with values like 866558,1196184,1081492,1898294.

Single SKU, found in the URL path.

The recorded quick view URLs include the following:

http://server/product/6422350843

http://server/product/1607745002

http://server/product/0086724882

The variable part is in the last portion of the path, and it becomes the SKU value of the hotspots/image maps:6422350843, 1607745002,0086724882.

SKU and category ID in the query string.

The recorded quick view URLs include the following:

http://server/quickView/product/?category=1100004&prodId=305466

http://server/quickView/product/?category=1100004&prodId=310181

http://server/quickView/product/?category=1740148&prodId=308706

In this case, there are two varying parts in the URL. The SKU is stored in the prodId parameter and the category ID is stored in the category=parameter.

As such, the hotspot/image map definitions are pairs. That is, a SKU value and an additional variable called categoryId. The resulting pairs are the following:

SKU is 305466 and categoryId is 1100004.

SKU is 310181 and categoryId is 1100004.

SKU is 308706 and categoryId is 1740148.

Uploading Image Banners

If you have already uploaded the images that you want to use, advance to the next step, Creating Carousel Sets. Please note the images used in the carousel must be uploaded after Dynamic Media has been enabled.

Creating Carousel Sets

In Assets, navigate to the folder where you want to create the Carousel Set and click Create > Carousel Set.

The Carousel Banner Editor opens. Touch Tap to open Asset Selector to select the image for your first slide. See Working with Selectors for more information.

Select your first image and click or tap the checkmark to select it. It displays in your Carousel Banner Editor as Slide 1.

To add additional slides that the carousel rotates, click the Add Slide icon. Select the appropriate image and click or tap the checkmark. Continue to add slides until you have selected all the images you want to rotate through.

To delete a slide, tap or click the slide and tap or click Delete Slide in the toolbar. To move a slide, tap the reoreder icon and hold and move to the desired location.

You can change the visual design and behavior of carousel sets by tapping or clicking the Behavior and Appearance tabs and making adjustments to how your carousel banner looks or how specific components behave. See managing viewer presets for more information on how to use the viewer editor.

Nota:

For carousel banners, the following may be things you want to adjust:

Duration that an image displays. By default, each image displays for 9 seconds.

Animation. By default, each slide transition is a fade. You can change that to a slide transition.

Style of the buttons. Users can rotate through the banners by tapping each dot or number. You can change where the set indicator buttons appear (and if they are numeric or a dotted style) and how large they are.

Change the highlight style of an image map or the icon used for hotspots

Adding Hotspots or Image Maps to an Image Banner

You can add hotspots or image maps to a banner using the Carousel Set editor.

When you add hotspots or image maps, you can define them as a quick view pop-up display or as a hyperlink. As you add hotspots or image maps to an image, remember to save your work. Undo and Redo options, near the upper-right corner of the page, are supported during your current creation/editing session.

When you finish creating your carousel banner, you can optionally use Preview to see a representation of how your carousel banner will appear to customers.

When you add hotspots to an image in an Interactive Image or a Carousel Banner, the hotspot information is stored in the same metadata location - relative to the image's location--regardless of whether it is an Interactive Image or a Carousel Banner. This functionality means that you can easily re-use the same image - along with its defined hotspot data - in either viewer.

Be aware, however, that Carousel Banners support image maps on images that can also contain hotspots; an Interactive Image does not. Keep this in mind if you intend to create an Interactive Image or Carousel Banner that uses the same image. You may want to create Interactive Images and Carousel Banners using separate copies of the same image instead.

Nota:

If you are editing interactive images with hotspots and crop the image, your hotspots are removed.

To add hotspots to an image banner:

From Assets, navigate to the carousel set you want to make interactive.

Select the carousel set and click or tap Edit. The Carousel Viewer Editor opens.

Select the slide you want to make interactive.

Near the upper-left corner of the page, tap or click Hotspot or Image Map.

On the image, tap or click a location where you want the hotspot to appear. Or if creating an image map, click and drag to create the image map area. You can adjust the size of the image map by clicking and dragging the corners.

If necessary, drag the hotspot or the image map to a new location. Add additional hotspots or image maps as necessary.

To delete a hotspot or image map, in the Maps & Hotspots drop-down menu, select the name of the hotspot you want to remove, then click or tap the Trash icon next to the menu.

In the Name text field, type the name of the hotspot or the image map. This name also appears in the Maps & Hotspot drop-down list. Providing a name makes it easy to identify the hotspot or image map for more edits in the future.

Do one of the following in the Actions tab:

Tap Quick View.

If you are an AEM Sites and Ecommerce customer, tap or click the Product Picker icon (magnifying glass) to open the Select Product page. Tap or click the product you want to use, then tap the check mark in the upper-right corner of the page to return to the Carousel Banner Editor.

Then, manually enter the SKU value. In the SKU Value text field, type the product's SKU (Stock Keeping Unit), which is a unique identifier for each distinct product or service that you offer. The entered SKU value automatically populates the variable portion of the quick view template so that the system knows to associate the tapped hotspot with a particular SKU's quick view.

(Optional) If there are other variables within the quick view that you need to use to further identify a product, tap Add Generic Variable. In the text field, specify an additional variable. For example, category=Mens is an added variable.

You can preview carousel banners from the Carousel Editor (preferred method) or from the Viewers list.

To preview carousel banners from the Carousel Editor:

In Assets, navigate to an existing carousel banner that you have created and tap to open it.

Tap or click Edit.

In the viewer presets list in the right-hand corner of the toolbar, select a viewer to preview the carousel banner.

Tap or click Preview.

Tap the hotspots or image maps on the image to test their associated actions.

To preview carousel banners from the Viewers list:

In Assets, navigate to an existing carousel banner that you have created and tap to open it.

Near the upper-left corner of the Preview page, click the Content icon.

In the Viewers list, tap the name of the carousel banner viewer preset you want to use.

Tap the hotspots or image maps on the image to test their associated actions.

Publishing Carousel Banners

You need to publish the carousel in order to use it. Publishing a Carousel Set activates the URL and Embed Code. It also publishes the carousel to the Dynamic Media cloud which is integrated with a CDN for scalable and performant delivery.

Nota:

If you use an existing interactive image with hotspots for your carousel banner, you must publish the interactive image separately after you publish the carousel banner.

Also, if you modify a pre-existing published interactive image that you are using in a carousel banner, you must publish the interactive image before those changes are reflected in the carousel banner.

To publish carousel banners:

In AEM, tap or click the AEM logo and tap or click Assets.

Navigate to the Carousel Set and select the set by hovering over the thumbnail and tapping or clicking the check mark.

Tap or click Publish in the toolbar.

Adding a Carousel Banner to Your Website Page

After you have uploaded banner images to create a carousel, added hotspots and/or image maps to the banner, and published the carousel set, you are now ready to add it to your existing website page.

Nota:

If you are an AEM Sites customer, you can add the carousel banner directly to your page by dragging the Interactive Media component to your page. See Adding Dynamic Media Assets to Pages.

However, if you are a stand-alone AEM assets customer you can manually add the carousel banner to your website landing page as described in this section.

Add the embed code that you copied from AEM Assets to your webpage.
The copied embed code is responsive so it should automatically fit the embedding area of the page.

Integrating the Carousel Banner with an Existing Quick View

Note: this step applies only if you are a standalone AEM Assets customer.

The last step in this process is integrating the carousel banner with an existing quick view implementation on your website. Every quick view implementation is unique and a specific approach is needed that most likely involves the assistance of a front-end IT person.

The existing quick view implementation normally represents a chain of inter-related actions that happen on the web page in the following order:

A user triggers an element in the user interface of your website.

The front-end code obtains a quick view URL based on the user interface element that was triggered in step 1.

The front-end code sends an Ajax request using the URL obtained in step 2.

The backend logic returns the corresponding quick view data or content back to the front-end code.

The front-end code displays a modal dialog box or panel and renders the HTML content on the screen for the end user.

These calls may not represent independent public API calls which can be called by the web page logic from an arbitrary step. Instead, it is a chained call where every next step is hidden in the last phase (callback) of the previous step.

At the same time that the carousel banner is replacing step 1, and partially step 2, when a user clicks a hotspot or image map inside the carousel banner, such user interaction is handled by the viewer. The viewer returns an event to the web page that contains all the hotspot or image map data previously added.

In such an event handler, the front-end code does the following:

Listens to an event emitted by the carousel banner.

Constructs a quick view URL based on the hotspot or image map data.

Triggers the process of loading the quick view from the backend and rendering it on the screen for display.

The embed code returned by AEM Assets already has a ready-to-use event handler in place that is commented out.

So, it is only necessary to uncomment the code and replace the dummy handler body with the code that is specific to the particular web page.

The process of constructing the quick view URL is basically opposite of the process used for identifying hotspot and image map variables covered earlier.

The last step to trigger the quick view URL and activate the quick view panel most likely requires the assistance of a front-end IT person from your IT department. They have the knowledge to know best how to accurately trigger the quick view implementation from the proper step, having a ready-to-use quick view URL.