PRODUCT

Amazon Ad Server will be sunset in Q4 2024, please visit this page (AAS offboarding information) for offboarding support resources and sunset FAQs. Details shared on that page represent the most up to date information in the Help Center, if you find disparate information in other resources please default to the information in the AAS offboarding information page accordingly.

Follow

Overview

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.

Capabilities and limitations

Feature

Availability

DCO

No

Responsive

No

Unfriendly iFrame

Yes

MRAID

Yes

Size variations

300x600, 300x250, 160x600, 728x90, 970x250

Demo

Here are two examples of the rich media carousel template:

Create an ad using a 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)

300x250

300x250

300x600

300x600

160x600

160x600

728x90

728x90

970x250

970x250

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

Template usage

This template has been designed so that no HTML coding is required. The two areas of focus are:

  1. Replacing existing assets in the assets folder with your final design, making sure to match both the dimensions and name of the files.

  2. Optional: Editing the template_options.js file to adjust the options to your liking.

For more details, see the Additional resources section below.

Best practices

The following are general rules in customizing the workspace template:

  1. Keep the structure of the folders and the file names within the workspace template as is. Modifying them will cause issues.

  2. Ensure that the image assets exported from your design files are optimized to suitable file sizes based on publisher specifications.

  3. If you are using Amazon DSP, keep the final zipped folder below 2MB. See Amazon DSP guidelines for more details.

  4. 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.

  5. 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.

Set up your ad in Amazon Ad Server

After you finish creating your ad, proceed to setting up your ad in AAS. For more information, see Set up a rich media banner.

Additional resources

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: Carousel will loop

  • False: Carousel will not loop

TRUE

amzBulletsVisibility

Boolean

Determines if the navigation bullets are visible or not.

  • True: Bullets are visible

  • False: Bullets are hidden

TRUE

amzAutoPlay

Boolean

Determines if the carousel is automatically animated once initiated.

  • True: Turn on autoplay

  • False: Turn off autoplay

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: Left is previous, right is next

  • Vertical: Top is previous, bottom is next

Horizontal

Design options

amzBorder

String

Determines the color of the 1px border around the creative or if it should be disabled.

  • For a color: RGBA, HEX, or predefined color names such as black or white

  • To disable the border: None or transparent

Grey

amzButtonsColor

String

Determines the main color of the buttons and slider.

RGBA, HEX, or predefined color names such as black or white

White

Including the Amazon logo

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:

  1. Download the Amazon logo file in the required language on this page. Comply with the Amazon logos and imagery guidelines at all times.

  2. Unzip the downloaded file.

  3. Select the appropriate .png file that matches the desired color and orientation.

  4. Rename this file: amazon-logo.png

  5. Move the amazon-logo.png file from the unzipped file into the in assets folder of the template.

  6. 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.

Advanced configuration

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.

Was this article helpful?
0 out of 1 found this helpful
Have more questions? Submit a request

Comments