A carousel is an interactive feature to showcase multiple images that users can navigate thanks to previous and next buttons.
This solution is commonly used to show multiple products within a single ad, multiple images of a single product or tell a story about a brand. It is recommended for (but not limited to) a variety of Amazon Ad Server (AAS) verticals, such as consumer packaged goods, beauty, and electronics and is aimed at personalization, brand awareness and upper-funnel campaigns.
This guide covers the process of creating a carousel ad using a rich media template. This is a solution that simply requires replacing image assets from the template and without HTML coding.
Note
Note: The rich media carousel template is based on the rich media banner ad format. For more information, see About rich media banner.
Feature |
Availability |
---|---|
DCO |
No |
Responsive |
No |
Unfriendly iFrame |
Yes |
MRAID |
Yes |
Size variations |
300x600, 300x250, 160x600, 728x90, 970x250 |
Here are two examples of the rich media carousel template:
Download the template bundle
When creating a rich media carousel, start with one of our official template bundles. Each bundle includes one of the available sizes and an optional .psd template, to be used as guides and facilitate the design.
Template bundles |
Photoshop guide (optional) |
---|---|
Included files
The following table describes the list of files that are included in each template.
File name |
Description |
Required |
Customizable |
---|---|---|---|
index.html |
HTML file for the banner. |
Required |
No |
config.js |
Configuration/manifest file for the ad.Use this file to test smart items locally. |
Required |
Yes |
template_options.js |
The JavaScript that contains global variables to provides additional options to customize the ad and other graphic elements. |
Required |
Yes |
assets/default.jpg |
Fallback image shown in unsupported browsers or when no valid image for the carousel is provided. |
Required |
Yes |
assets/image-1.jpg |
Image asset for the carousel on index number 1.This image can also be a .png file. |
Required |
Yes |
assets/image-2.jpg |
Image asset for the carousel on index number 2. This image can also be a .png file. |
Required |
Yes |
assets/image-3.jpg |
Image asset for the carousel on index number 3. This image can also be a .png file. |
Optional |
Yes |
assets/image-4.jpg |
Image asset for the carousel on index number 4. This image can also be a .png file. |
Optional |
Yes |
assets/image-5.jpg |
Image asset for the carousel on index number 5. This image can also be a .png file. |
Optional |
Yes |
This template has been designed so that no HTML coding is required. The two areas of focus are:
-
Replacing existing assets in the assets folder with your final design, making sure to match both the dimensions and name of the files.
-
Optional: Editing the template_options.js file to adjust the options to your liking.
For more details, see the Additional resources section below.
The following are general rules in customizing the workspace template:
-
Keep the structure of the folders and the file names within the workspace template as is. Modifying them will cause issues.
-
Ensure that the image assets exported from your design files are optimized to suitable file sizes based on publisher specifications.
-
If you are using Amazon DSP, keep the final zipped folder below 2MB. See Amazon DSP guidelines for more details.
-
Replace the images with the same file names found in the template. The filenames are being used in the code and modifying them will cause issues.
-
Replace the images with matching file format to the targeted images. The template supports image files in either .png or .jpg. Other image formats will not be recognized.
After you finish creating your ad, proceed to setting up your ad in AAS. For more information, see Set up a rich media banner.
Default image
The default image of the ad is the fallback image shown in unsupported browsers or when there is no valid image provided for the ad. It is located in the root folder of the workspace template.
-
This image should be optimized and lightweight.
-
The file format can be .jpg or .png.
-
The dimensions should match that of the ad.
-
The name and location should be retained. Modifying it will cause issues.
Template assets
The assets folder contains the images that will appear in the carousel slideshow. The image filenames are indicated with index numbers that are matched in the code. Replace the assets to be used and remove the unused ones.
-
The file format for each of the carousel images can be .png or .jpg. The template can support a combination of both.
-
The carousel images follow the naming convention: image-[index number from 1 to 2]. Images above 2 will not display and add unnecessary k-weight to the ad.
-
The file names of the assets should be retained to match what have been predefined in the template. Modifying them will cause display issues.
-
carousel images with larger dimensions than the ad will be trimmed to match that of the ad.
Static elements with the background image (optional)
The assets/background.jpg image is an optional image that you can use if some elements of the design should not slide with the carousel.
In this example, the background color, the logo, and the CTA are part of the background image. Images of the products and their associated text are slides with a transparent background so they can overlay on top of the background image.
Template options
The file template_options.js file provides advanced options to customize the ad. The names of the variables should be reserved as originally defined. Otherwise, it will cause issues.
The following table describes the list of global variables in the rich media carousel template.
Variable name |
Type |
Description |
Value |
Default value |
---|---|---|---|---|
Carousel options |
||||
amzLoop |
Boolean |
Determines if the carousel is looping when the user clicks on previous and next on the first and last slides. |
|
TRUE |
amzBulletsVisibility |
Boolean |
Determines if the navigation bullets are visible or not. |
|
TRUE |
amzAutoPlay |
Boolean |
Determines if the carousel is automatically animated once initiated. |
|
TRUE |
amzAutoPlayDelay |
Integer |
Time spent in seconds on each slide when the carousel is autoplaying (Will be ignored if autoplay is turned off). |
Number (e.i. 1, 2, 3...) |
3 |
amzDirection |
String |
Determines the direction of the Carousel |
|
Horizontal |
Design options |
||||
amzBorder |
String |
Determines the color of the 1px border around the creative or if it should be disabled. |
|
Grey |
amzButtonsColor |
String |
Determines the main color of the buttons and slider. |
RGBA, HEX, or predefined color names such as black or white |
White |
You can chose to add the Amazon logo directly into your images or have it displaying as a separate element.
Follow this procedure to use the Amazon logo as a separate element:
-
Download the Amazon logo file in the required language on this page. Comply with the Amazon logos and imagery guidelines at all times.
-
Unzip the downloaded file.
-
Select the appropriate .png file that matches the desired color and orientation.
-
Rename this file: amazon-logo.png
-
Move the amazon-logo.png file from the unzipped file into the in assets folder of the template.
-
The logo will display in your creative.
Note
Note: The template is set to optimize the size and position of the Amazon logo, and it is recommended to keep the default values.
Custom interactions
The following table is a list of predefined interactions in the rich media carousel template that will be tracked in the campaign reports.
Name |
Type |
Description |
---|---|---|
Auto_Carousel_01_shown |
Automatic Event |
The event triggered when the carousel is automatically animated on load displaying the first image. |
Auto_Carousel_02_shown |
Automatic Event |
The event triggered when the carousel is automatically animated on load displaying the second image. |
Auto_Carousel_03_shown |
Automatic Event |
The event triggered when the carousel is automatically animated on load displaying the third image. |
Auto_Carousel_04_shown |
Automatic Event |
The event triggered when the carousel is automatically animated on load displaying the fourth image. |
Auto_Carousel_05_shown |
Automatic Event |
The event triggered when the carousel is automatically animated on load displaying the fifth image. |
Carousel_01_shown |
User Action |
The event triggered when the user has clicked on a navigation arrow directed to the first image. |
Carousel_02_shown |
User Action |
The event triggered when the user has clicked on a navigation arrow directed to the second image. |
Carousel_03_shown |
User Action |
The event triggered when the user has clicked on a navigation arrow directed to the third image. |
Carousel_04_shown |
User Action |
The event triggered when the user has clicked on a navigation arrow directed to the fourth image. |
Carousel_05_shown |
User Action |
The event triggered when the user has clicked on a navigation arrow directed to the fifth image. |
Carousel_01_clicked |
Clickthrough |
The event triggered when the user has clicked on carousel while the first image is being displayed. |
Carousel_02_clicked |
Clickthrough |
The event triggered when the user has clicked on carousel while the second image is being displayed. |
Carousel_03_clicked |
Clickthrough |
The event triggered when the user has clicked on carousel while the third image is being displayed. |
Carousel_04_clicked |
Clickthrough |
The event triggered when the user has clicked on carousel while the fourth image is being displayed. |
Carousel_05_clicked |
Clickthrough |
The event triggered when the user has clicked on carousel while the fifth image is being displayed. |
Carousel_goNext |
User Action |
The event triggered when the user has clicked on the next button. |
Carousel_goPrevious |
User Action |
The event triggered when the user has clicked on the previous button. |
Carousel_navigateTo |
User Action |
The event triggered when the user has clicked on the navigation dots. |
Comments