A cross slider is an interactive feature to showcase one image at a time out of two images that the user can navigate using the slider button.
The rich media cross slider solution is commonly used to show before and after images, products in multiple colors or a product and lifestyle image. 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 cross slider 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 cross slider 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 cross slider template:
Download the template bundle
When creating a rich media cross slider, 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 cross slider on index number 1.This image can also be a .png file. |
Required |
Yes |
|
assets/image-2.jpg |
Image asset for the cross slider on index number 2. This image can also be a .png file. |
Required |
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 cross slider. 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 cross slider images can be .png or .jpg. The template can support a combination of both.
-
The cross slider 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.
-
Cross slider images with larger dimensions than the ad will be trimmed to match that of the ad.
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 cross slider template.
|
Variable name |
Type |
Description |
Value |
Default value |
|---|---|---|---|---|
|
Cross slider options |
||||
|
amzTeasing |
Number |
Determines a duration in seconds during which the slider will slightly move to catch the user's attention. It will stop once the slider has been clicked or after 10 seconds. |
Numbers (e.g. 1, 2, 3...) - Using -1 will disable the teasing entirely |
2 |
|
amzAutoPlayDelay |
Number |
Determines the delay in seconds before the slider automatically plays. |
Numbers (e.i. 1, 2, 3...) - Using -1 will disable autoplay. |
25 |
|
amzOrientation |
String |
Determines the orientation of the Slider |
Horizontal or vertical |
Vertical |
|
amzStartPosition |
Number |
Determines the starting position of the slider in percentage from the left or top of the ad depending on the slider orientation.The px equivalent of 1/3 of the width (or height) of the slider button of the second image will always remain visible, even if amzStartPosition is set to 0. |
Numbers (e.g. 5, 10, 50...) |
5 |
|
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 cross slider template that will be tracked in the campaign reports.
|
Name |
Type |
Description |
|---|---|---|
|
Image1_clicked |
Clickthrough |
The event triggered when the background image is clicked. |
|
Image2_clicked |
Clickthrough |
The event triggered when the revealed second image is clicked. |
|
Close |
User Action |
The event triggered when users press the close button. |
|
Image2_shown |
User Action |
The event triggered when the second image is entirely revealed. |
|
Slider_dragged |
User Action |
The event triggered when users click and drag the slider. |
|
Auto_Image2_shown |
Automatic Event |
The event triggered when the second image is revealed as a result of autoplaying animation. |
Comments