Submit a request
 
PRODUCT
Privacy Policy |  AAS Advertising Policy | Terms of Use
Cookie Preference
✖

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.

Please note that on October 1, 2024, the ability to create new campaigns, placements, and tag managers will be disabled.

Follow
Last Update:
  viewable by end users
  editable by agents

Note

Note: To learn more about this format, or to see build guides for other authoring tools, see About rich media banner.

This article describes how to make your ad compliant with Amazon Ad Server (AAS) specifications in Adobe Animate, using Adobe Animate 2021 (21.0 - build 35450).

Important

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

  1. Choose only one of the AAS publishing templates below, 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.

  2. This config.js file. For each ad, use one config.js file.

Creating your ad

Perform the following steps when creating ads:

  1. Set up the publish settings.

  2. Design your ad.

  3. Add a click-through interaction.

  4. Publish your ad.

Set up 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 itemsAdKit de, pendency.

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; 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. For more information, click here.

Procedure

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

  2. Create a zip archive of the published files, and include all of the required files that you need to upload to AAS.

Setting up a rich media banner

After you finish creating your ad, proceed to Set up a rich media banner.

Additional resources

Prepare for bulk upload

You can upload and set up multiple ads in a single process using the Ad Creation Wizard.

For more information about uploading ads in bulk, see Set up multiple ads using Ad Creation Wizard

Shared libraries

If you are developing ads with third-party libraries, we recommend that you call these libraries from a CDN (Content Delivery Network) when possible. This will help improve loading time and caching.

Dynamic Creative Optimization

If you need to add Dynamic Creative Optimization (DCO) elements to your creative, see Add Dynamic Elements to your HTML Ads Using Adobe Animate.

Adding Rich Media capabilities

Track interactions

If your banner contains advanced animations, features, or user interactions, you need to add specific code that allows AAS to track each event/interaction.

The main types of measurement are the following:

  • With EB.userActionCounter(''); AAS tracks the user activity and provides the amount of interactions within the campaign reports. The following shows an example of code in frame 1 of the timeline.

    /*
Clicking on the specified symbol instance moves the playhead
to the specified frame number in the timeline and continues playback
from that frame.
*/
this.replayButton.on('click', ClickToReplayAnimation);
function ClickToReplayAnimation(){
    this.gotoAndPlay(2);
    EB.userActionCounter('user_clicked_replay');
});

  • With EB.automaticEventCounter(''); AAS tracks an event that occurs during the ad animation without any user action. The following shows an example of code in the last frame of the timeline.

    /*
End of the animation.
*/
this.stop();
EB.automaticEventCounter('animation_completed');

If there are multiple interactions or events, you can track them using dynamic variables. For more information, see Work with Dynamic Interaction Names. For additional tracking capabilities and methods, see Methods.

Additional methods

The AAS HTML API provides a set of methods, such as user interactions, automatic interactions, and timers that you can use in your code. For more information about these methods, see About modules.

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

Comments