Video Player Ad Interface Definition (VPAID), as defined by the Interactive Advertising Bureau (IAB), establishes a common interface between video players and ad units, enabling a rich interactive in-stream ad experience. It standardizes the delivery of interactive video ads which are played on a publisher’s media player across different sites. In the Amazon Ad Server (AAS), the ad format for VPAID is called In-Stream Video Interactive.
The VPAID Overlay template is an easy solution that can be used when creating a VPAID ad in AAS. It is in the form of an HTML workspace with video and an overlay asset. It has customizable options including when the overlay will be displayed after the video starts playing and how long will it stay displayed.
This guide covers the process of creating a VPAID ad using the VPAID template. This is a solution that simply requires replacing image assets in the template workspace and setting a few template options, without HTML coding.
Note: The VPAID template is based on the in-stream video interactive ad format. For more information, see About in-stream video interactive.
|
Feature |
Availability |
|---|---|
|
DCO |
No |
|
Responsive |
Yes - only if resizing option is selected in AAS |
|
Unfriendly iFrame |
n/a |
|
MRAID |
n/a |
|
Size variations |
1920x1080 - automatically scales up or down to match any player size with a 16:9 aspect ratio - only if resizing option is selected in AAS |
Here are two examples of ads that uses the VPAID template:
When creating a VPAID ad, start with the official template bundle. This bundle includes a responsive HTML workspace which can be used with any video size with a 16:9 aspect ratio, and an optional 1920x1080 PSD template to be used as a guide to facilitate the design.
Note: The PSD is for creating assets for the workspace and is not intended to uploaded to the Asset Library in AAS.
Included files
The following table describes the list of files that are included in the HTML template.
|
File Name |
Description |
Required |
Customizable |
|---|---|---|---|
|
index.html |
main HTML file for the template |
Required |
No |
|
config.js |
Configuration/manifest file for the ad for Amazon Ad Server. |
Required |
No |
|
template_options.js |
The JavaScript file that contains global variables to provide additional options to customize the template and other graphic elements. |
Required |
Yes |
|
assets/overlay.png |
Image asset with transparent background containing a placeholder logo, product or other brand image, a cta, a headline and a sub-headline, and an optional short terms and conditions text |
Required |
Yes |
|
assets/video.mp4 |
Video file used to test locally. Should be replaced with your own video. |
Required |
Yes |
Template usage
The template has been designed so that HTML coding is not required. The two areas of focus are:
-
Replacing existing assets in the assets folder with your final overlay design and final video, making sure to match both the dimensions and name of the files.
-
Optional: Editing the “template_options.js” file to adjust the options to fit your requirements.
For more details, see the Additional resources section below.
Best practices
The following are general rules when customizing the workspace template:
-
Keep the structure of the folders, the file names and extensions within the workspace template unchanged. Modifying them will cause issues.
-
Ensure that the overlay image asset exported from the PSD design file is optimized to suitable dimensions based on the specifications for the publisher’s video player. The PSD template can export a PNG overlay image with max dimensions of 1920x1080px. If the publisher’s video player is a different size, the overlay can be exported from the design file at different dimensions while maintaining the 16:9 aspect ratio.
-
Use the hidden guide layers to help design the overlay. Elements such as the skip button, close button, terms and conditions button, and the Amazon logo have set locations in the template. You can unhide the guide layers in the PSD while designing to ensure that your design doesn’t overlap these elements.
-
Replace the overlay image with an image file with:
-
The exact same name as the placeholder image found in the template. The file name is used in the code and modifying it will cause issues
-
A matching file format. The template supports a transparent background overlay image file in .png format. Other image formats will not be recognized and will cause the overlay to not be displayed.
-
-
Replace the video file with an MP4 file format video. Please adhere to the video specifications recommended below for best results:
-
File type: MP4
-
Video codec: H.264
-
Audio codec: AAC
-
Dimensions: 1920x1080
-
Aspect ratio: 16:9
-
Frame rate: 30fps
-
Bit rate: 15 Mbps+
-
Duration: 15s or 30s
-
Recommended Maximum File Size: 10mbs
-
After you finish creating your ad, proceed to set up your ad in AAS. For more information, see Set up an in-stream video interactive.
The only way to reliably test the finished ad is by uploading it to AAS directly. This is because the ad is attempting to access events which are commonly fired by the player inside which the ad is served, and local VPAID ads are not served inside a player. Testing VPAID ads locally by opening the index.html file in a browser window will result in unexpected behavior or will not work in all browsers. For this reason we recommend testing your VPAID ad by creating a test tag or preview link from AAS after the workspace has been uploaded to AAS and an ad has been created using the workspace. For more information, see Test your ads and Preview ads in the Amazon Ad Server.
Default image
Unlike other ad formats, VPAID (in-stream) ads do not require any default image.
Template assets
The assets folder contains the overlay image that will appear over the video at an indicated time after the ad is loaded into the publisher’s player, as well as the video which will play in the ad.
-
The file format for the overlay image should be PNG. The template only supports a PNG transparent-background overlay image file.
-
The overlay image is named overlay.png and the exported image from the design file should have the exact same name when replacing the default overlay.png image in the assets folder. Modifying the overlay image file name or extension will cause display issues.
-
The file format for the video should be MP4. The template only supports an MP4 video with a 16:9 aspect ratio. If your video is in a different file format please re-encode it using the H.264 video codec in an encoder/transcoder of your choice. Examples are Adobe Media Encoder, FFMpeg, Handbrake, etc.
-
The name of the video file should be “video.mp4”. It is important that the file matches that exactly or it will cause the video not to play in the ad.
Template options
The template_options.js file provides advanced options to customize the ad. The names of the variables should be preserved as originally defined because these variables are used in the ad code and changing them will cause issues.
The following table describes the list of global variables in the VPAID template.
|
Variable name |
Type |
Description |
Value |
Default value |
|---|---|---|---|---|
|
VPAID options |
||||
|
amzOverlayDelay |
Integer |
Determines the delay in seconds from the beginning of the video play before the overlay image apears |
Numbers (e.i. 1, 2, 3...) Using -1 will prevent the overlay from ever appearing |
3 |
|
amzOverlayTransition |
String |
Determines the time the overlay take to fade-in. |
The time in seconds that the overlay will take to fade-in. Setting the value to 0 will make it have no fade in transition. |
.2 |
|
amzOverlayDuration |
String |
Determines the duration in seconds the overlay image will be visible. If set to "end" the overlay will be visible until the end of the video. |
Numbers in quotation marks (i.e. '1', '2', '3'...) or the string "end" |
’10’ |
|
amzTermsConditionsBtnText |
String |
Determines the copy to display for the terms and conditions link. Used only when the terms and conditions are long and need to be shown in a separate overlay. Leaving this variable empty will not show a terms and conditions link. |
copy for the terms and conditions button |
empty string |
|
amzTermsConditionsCopy |
String |
Determines the copy to display for the terms and conditions in a separate pop-up overlay. It is only being used if amzTermsConditionsBtnText has a non-empty value. Note: If adding terms and condtions in the template options , clicking on the Terms and Condtion button will pause the video and resume when you close it. |
long copy for the terms and conditions |
empty string |
|
Design options |
||||
|
amzTermsButtonColor |
String |
Determines the color of the text for the terms and conditions link button, if this button is available |
RGB, HEX or predefined color names such as 'black' or 'white' |
grey |
|
amzButtonsColor |
String |
Determines the main color of the Skip ad and Close ad buttons. The Skip ad button will appear at the top left corner only if the skip ad option is enabled for the ad when it is built in AAS. The close ad button will appear at the top right corner only after the VPAID ad is clicked on and the video is paused. |
RGB, HEX or predefined color names such as 'black' or 'white' |
grey |
Including the Amazon Logo
Third-party vendors and sellers on the Amazon marketplace are permitted to display the “Available at Amazon” logo in their ads to promote the availability of their products and services at Amazon. Visit the Amazon brand usage guidelines for third-party digital display ads page for more info. You can choose to add the “Available at Amazon” logo directly into your overlay image or have it display as a separate element.
Follow this procedure to use the “Available at Amazon” logo as a separate element:
-
Download the Amazon logo file in the required language on this page.
-
Unzip the downloaded file.
-
Select the appropriate PNG file that matches the desired color and orientation.
-
Rename this file: amazon-logo.png (Must be named this)
-
Move the amazon-logo.png file from the unzipped file into the assets folder of the template.
-
The logo will display in your creative.
Note: The template is set to optimize the size and position of the “available at Amazon” logo and it is recommended to keep the default values.
Custom interactions
The following table is a list of predefined interactions in the VPAID template that will be tracked in the campaign reports.
|
Name |
Type |
Description |
|---|---|---|
|
Video_clicked |
Clickthrough |
The event is triggered when the user clicks anywhere in the ad. |
|
TermsAndConditions_opened |
User Action |
The event is triggered when the user clicks on the terms and conditions link (if one is present) to open the terms and conditions overlay. |
|
TermsAndConditions_closed |
User Action |
The event is triggered when the user clicks on the close button inside the terms and conditions opened overlay (if the ad has this overlay) |
|
Video quartiles |
Automatic Event |
The event is triggered when the video starts playing, has reached 25%, 50%, and 75%, and when it has fully played through. |
|
Video events- user triggered |
User Action |
The event is triggered when video controls such as mute, unmute, play, pause, seeking and volume adjustments are clicked in the publisher's player while the VPAID ad is displayed. |
|
Video events - automatic |
Automatic Event |
The event is triggered when video controls such as mute, unmute, pause, play, etc are fired automatically as a result of actions happening in the ad. |
Comments