A banner ad with video features the video content with additional details on the same ad. It has a lower cost in terms of cost-per-thousand-impression (CPM) price and is considered to be less invasive in comparison to in-stream video ads.
This solution is a great supplement to TV ads, with the benefit of additional messaging in the creative and can complement lower-funnel, performance focused campaigns. This solution is aimed at personalization, brand awareness and upper-funnel campaigns. This solution is recommended for (but not limited to) a variety of Amazon Ad Server (AAS) verticals, such as consumer packaged goods, entertainment, and electronics.
This guide covers the process of creating a video 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 video in banner 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 video in banner template:
Download the template bundle
When creating a rich media video in banner, 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 |
No |
|
template_options.js |
The JavaScript that contains global variables to provides additional options to customize the ad and other graphic elements. |
Required |
Yes |
|
assets/background.jpg |
Image asset for background that includes content other than the video. This image can also be a .png file. |
Required |
Yes |
|
assets/video-thumbnail.jpg |
Image asset for the video area that is displayed when the video ends. |
Optional |
Yes |
|
assets/video.mp4 |
The primary video file. Only .mp4 files are supported. |
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 video. 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 video images can be .png or .jpg. The template can support a combination of both.
-
The file format for the video is limited to .mp4
-
The file names of the assets should be retained to match what have been predefined in the template. Modifying them will cause display issues.
-
The dimensions of the video and the video thumbnail can be defined in the file “template_options.js”
-
The template is set to autoplay the video with the sound on mute. This is a recommended setup for a video in online ads as they should be less disturbing to end users.
Recommended video specifications
|
Supported formats |
Video: H.264 Audio: AAC |
|
Aspect ratio |
16:9 |
|
Recommended duration |
15 or 30 seconds |
|
Recommended video bitrate |
8mbps |
|
Minimum audio bitrate |
192kbps |
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 video in banner template.
|
Variable name |
Type |
Description |
Value |
Default value |
|---|---|---|---|---|
|
Video options |
||||
|
amzVideoPlayerWidth |
Number |
Determines the width of the video player. Height will be automatically set to maintain the ratio. |
Number in pixels |
280 |
|
amzVideoPlayerLeft |
Number |
Determines the horizontal position of the video player from the left of the creative. |
Number in pixels |
10 |
|
amzVideoPlayerTop |
Number |
Determines the vertical position of the video player from the top of the creative. |
Number in pixels |
100 |
|
amzVideoControlVisibility |
Boolean |
Determines if the video controls are visible. |
|
True |
|
amzReplayVisibility |
Boolean |
Determines if the replay button is visible once the video is ending. |
|
True |
|
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 video in banner template that will be tracked in the campaign reports.
|
Name |
Type |
Description |
|---|---|---|
|
Generic_clicked |
Clickthrough |
The event triggered when the background image is clicked. |
|
Video_clicked |
Clickthrough |
The event triggered when the video is clicked. |
Comments