Submit a request
 
PRODUCT
Privacy Policy |  AAS Advertising Policy | Terms of Use
Cookie Preference
Follow
Last Update:
  viewable by end users
  editable by agents

Important

Important: We highly recommend that you use the new method in AAS to make your standard banners clickable. This method does not require adding extra code to your ads. For more information, see Create a standard banner in any authoring tool.

This article describes the legacy methods for building standard banners. To ensure that these ads are compliant with Amazon Ad Server (AAS), you need to add our library and click-through method.

Working with Your Code Editor

If you are working with the standard banner template, you are prompted to append the AAS EB Clickthrough method correctly to each clickable element with EB.clickthrough();.

The following table describes the list of files to include in your ad folder.

File

Description

Required

index.html

HTML file for the banner.

Required

styles/style.css

CSS file for the banner.

Optional (if CSS code is included in the html file)

scripts/EBLoader.js

Call the JavaScript object EB for enabling capacities and tracking

Required

scripts/script.js

JavaScript (logic and tracking) for the banner.

Required

images/backup.jpg

.jpg, .gif, or .png. A fallback image is shown in unsupported browsers. It should have the same dimensions as your ad.

Required

The following shows an example of the index.html file.

<!doctype html>
<html>

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>HTML5 Standard Banner: 300x250</title>
<link rel="stylesheet" href="styles/style.css" />
<script src="scripts/EBLoader.js"></script> <!-- #1 Call Simzek by Amazon's EBLoader library -->
<script src="scripts/script.js"></script> <!-- #2 Call Simzek by Amazon's script file -->
</head>

<body>
<div id="ad"> <!-- #3 Open main div -->
<div id="clickthrough-button"> <!-- #4 Add Clickthrough div -->

<!-- #5 Your animation here -->

</div> <!-- #6 Close Clickthrough tag -->
</div> <!-- #7 Close main div -->
</body>

</html>

The following shows an example of the script.js file.

var adDiv;

function initEB() {
    if (!EB.isInitialized()) {
        EB.addEventListener(EBG.EventName.EB_INITIALIZED, startAd);
    } else {
        startAd();
    }
}

function startAd() {
    adDiv = document.getElementById("ad");
    addEventListeners();
}

function addEventListeners() {
    document.getElementById("clickthrough-button").addEventListener("click", clickthrough);
}

function clickthrough() {
    // opens the landing page URL set by the campaign manager
    EB.clickthrough();
}

window.addEventListener("load", initEB);

Adobe Animate

Important

Important: Before you begin, make sure that you download the following files:

  • AAS publishing template adkit-secure.html file. Unzip the file, and put it in a folder that you can use for all of your Adobe Animate ads. This file includes the links to AAS adkit.js and Adobe createjs.min.js (version 1.0.0) libraries.

  • This config.js file. Unzip the file, and place the config.js file in the root folder of each ad.

Set up the Publish Settings

Procedure

  1. Open Adobe Animate, and create a new document.

  2. Select the Advanced tab, and under Platforms, select HTML5 Canvas.

  3. Click File > Publish Settings.

  4. On the Basic tab, verify that your export settings are set to the defaults.

    AdobeAnimate_publish-settings_tab-Basic.png

  5. Click HTML/JS, and perform the following actions:

    1. Click Import New.

    2. Locate and select the adkit-secure.html file you downloaded.

    AdobeAnimate_publish-settings_tab-HTMLJS.png

  6. Click Image Settings, and select the method in which to export image assets. If you are not sure about which method to use, and your images were optimized in Photoshop, it is recommended to select Image Assets.

    AdobeAnimate_publish-settings_tab-ImageSettings.png

  7. Click OK.

  8. Place the config.js file in the same folder as the html file for your published ad.

The following table describes the list of files that should be included in the ad folder.

File Name

Description

Required

name_of_your_ad.fla

FLA file of Adobe Animate.

Not required for upload

name_of_your_ad.html

HTML file for the banner.

Required

name_of_your_ad.js

JavaScript (logic and tracking) for the banner.

Required

config.js

A configuration file with static variables and/or dynamic items AdKit dependency.

Required

backup.jpg

.jpg, .gif, or .png. A fallback image shown in unsupported browsers. It should have the same dimensions as your ad.

Required

Design Your Ad

Once your project is set up, you can begin to design your ad. rich media banner can include additional interactions; whereas standard banner can only include one interaction. You need to verify that these interactions are properly fired to fill the campaign reports.

Note

Note: For ads that include looped animation, we recommend putting all of the code for event listeners in frame 1, and starting any animation loops from frame 2. This ensures accurate data reporting; otherwise, the code for each event listener will run on each loop of the animation.

Add Click-through Interaction

Your banners must include at least one clickable element that redirects users to the advertiser landing page upon click or tap.

Procedure

  1. Create a clickable element. We recommend creating a button with a large hit area.

  2. Give the element an instance name, for example, myButton.

  3. Open the Action window.

  4. On the first frame of your timeline, add a click event on the instance name. This event calls the AAS click-through method.

    /*
Clicking on the specified symbol instance opens a new browser window with
the Clickthrough URL value set by the media agency at placement level.
*/
this.myButton.on('click', ClickToGoToWebPage);
function ClickToGoToWebPage() {
    adkit.clickthrough();
}

Publish Your Ad

Once the ad is complete, you are ready to publish. Make sure that your ad includes a backup image, jpg, gif, or png file format. The default image must be less than 200 KB and match the dimensions of the ad.

Important

Important: Adobe Animate will remove your video file and poster image after publishing. Before you zip and set up your ad in AAS, add the video file and poster image again to the folders.

Procedure

  • From the main menu, click File > Publish.

Google Web Designer

Install Amazon Ad Server Google Web Designer Components

Procedure

Before you begin creating your ad with Google Web Designer (GWD), you must install the GWD components. After you complete the installation, it is recommended that you restart GWD.

  1. Click here to download the Amazon Ad Server GWD components, and then unzip the file.

  2. To access the Components pane, open an existing project, or create a new project.

    Note

    Note: If the Components pane is not visible, from the menu, click Window > Components.

  3. To add the downloaded components, in the Components pane, click +.

Set up the Project

Procedure

  1. Create a new blank file.

  2. Make sure that in the Environment list, you select Non-Google Ad.

  3. Perform the following actions:

    1. In the Name box, enter a name for your ad.

    2. In the Dimensions area, enter the width and height of your ad.

    3. Click OK.

    GWD_setupProject.png

  4. Click Components. From the Components pane, drag the AdKit component to the stage.

  5. Select the AdKit component, and then click Properties to configure the AdKit settings.

    Screenshot---Google-Web-Designer.png

The following table describes the required options you must configure in the AdKit component properties. Other options do not require configuration.

For this option

Do this

Config File

Click here to download the config.js file. Once the file downloads, unzip the file.

Note

Note: Currently, GWD does not allow Mac users to click Add and select the config.js file. Instead, go to the published folder and manually add the file.

Default Image

Select your default image. The default image must be less than 200 KB and match the dimensions of the ad.

Ad Format

Select Standard.

Video API

Default is true. standard banners do not allow capturing of video metrics.

Design Your Ad

Once your project is set up, you can begin to design your ad. standard banner is limited to 200 KB and cannot track videos; therefore, you can use video and YouTube components.

Add Click-through Interaction

standard banners can only include one interaction.

Procedure

The following procedure describes the steps for adding a click-through to any element.

  1. Select the element, and in the Events pane, click +. Note that the element is usually a tap area.

  2. In the Event dialog box, click Tap area > Touch/Click > Custom > Add custom action.

  3. Enter a name for the function. Type the name in between gwd and = function(event){"). To prevent overwriting of function names, use szmk_ as a prefix, for example, gwd.szmk_clickButton = function(event){ .

  4. In the text area, type the click-through method, adkit.clickthrough(); .

  5. Click OK.

Publishing the Ad

Once the ad is complete, you are ready to publish.

Procedure

  1. From the main menu, click File > Publish > Locally.

  2. Under the Settings area, select all of the check boxes except the Add borders check box.

    Note

    Note: If the site requires your ads to include borders, select the Add borders check box.

  3. Click Publish. Your project is now saved locally.

  4. Create a zip folder, and include all of the required files you need to upload to AAS.

Dynamic Creative

For more information, see Add Dynamic Elements to Your HTML Ads Using Google Web Designer.

Setting up Your standard banner

After you create your ad, set up the ad in AAS. For more information, see Set up a standard banner.

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

Comments