PRODUCT

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.

Follow

This article provides basic knowledge of the crawl Dynamic Creative Optimization (DCO) template and introduces a standard procedure for ad creation with the template.

Overview

The Crawl DCO creative solution allows advertisers to test different display banner versions within a single creative, and optimize toward top performing visuals and copy. It is focused on quick-turn, low-cost, scaled-down DCO creatives for new-to Amazon Ad Server (AAS) and DCO customers.

These templates are based off of the standard banner ad format, available in six sizes, and supports manual DCO versioning. Users do not need to have coding experience to update these templates. There are three dynamic elements (headline, CTA text, and product image) included in these templates and other elements, such as the background image and logo, are drag-and-drop, and can be updated by swapping in a new image in the workspace folder. There are optional customizations more advanced users can make in a single code file included in the template with descriptions clearly listed for each element.

This solution helps drive brand awareness, personalization, and upper-funnel campaigns. It is an effective fit for limited budgets, tests, or an intro to DCO. The Crawl DCO solution is recommended for (but not limited to) a variety of AAS verticals, such as consumer packaged goods, electronics, entertainment, gaming, and telecommunications.

All necessary tools and assets to create ads using this template are included in the package, such as a design guideline, sample demos, and ready-to-go workspaces.

Capabilities and limitations

Feature

Availability

Ad format

Standard banner

DCO

Yes

Responsive

No

Unfriendly iFrame

Yes

MRAID

Yes

Size variations

300x600, 300x250, 160x600, 728x90, 970x250, 300x50 and 320x50

Demo

300x600

Create an ad using Crawl DCO templates

Download the template bundle

When creating ads using the Crawl DCO template, 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.

Best practices

The following are general rules for customizing the 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.

  • The template supports image files in either .png or .jpg. Other image formats will not be recognized.

Note

Note: If you are using Amazon DSP, keep the workspace below 200KB. For more information, see Amazon DSP Guidelines.

Included files in workspace

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/logo.png

Image asset for the logo. The file name should be retained because the name is used in the template. Altering it will cause issues.

Optional

Yes

assets/cta-background.png

Image asset for the background of call-to-action button. The file name should be retained because the name is used in the template. Altering it will cause issues. The workspace for 970x250 ad doesn't include this image due to follow the graphic guidelines of ADSP.

Optional

Yes

assets/background.jpg

A placeholder of the background image. This image is used in 'background_img' smart item.

Optional

Yes

assets/image.jpg

A placeholder of a primary image. This image is used in 'product_img' smart item.

Optional

Yes

Design guidelines

mockup_preview.png

The included PSD file can be used as a design template, using the default settings that match the workspace template, to help plan and design assets for use in the Crawl DCO template. They also contain the Amazon logo area that is reserved in the ad for reference on where to place Amazon logo. As the position and size of the logo is not editable, this can affect the design and placement of other graphic elements. Also the guideline introduces additional details about the template. It’s recommended to start designing from these files.

Replace default imgae

The default image is the fallback image shown in unsupported browsers, which is mandate for all ads in AAS.

  • The image is in the assets folder.

  • This image should be optimized and lightweight.

  • The file format must be .jpg.

  • The dimension must match with the ad size.

Replace static images

Images for logo, and CTA and background are static assets sitting in the workspace and displayed in the ad at all times.

  • Images are and should be in the assets folder. Taking those images out of the folder will cause issues.

  • File names should be retained as those are used in the template.

  • Dimensions of those images are flexible as long as the width and height are reasonable for the ad dimension. The template renders those with their original size and doesn’t alter the dimension.

  • The images should be optimized the lowest k-weight while still retaining the desired quality.

  • Only .png or .jpg images are acceptable.

Add dynamic images

Images for the ad background and primary subject are dynamic. The template loads those images from smart items. Workspaces have background.jpg and image.jpg in the assets folder. These images are used as a placeholder by being assigned in config.js. For local testing, users can add new images to the folder and then set those new images in config.js. They also can replace background.jpg and image.jpg with their own design. The images will then be populated in index.html without further action.

  • The images should be optimized and lightweight to keep the workspace below 200 KB.

  • Dimension of those images are flexible as long as the width and height are reasonably fit to the ad dimension. The template renders those as their original size and doesn’t alter the dimension.

  • Only .png or .jpg images are acceptable.

  • Additional dynamic images can be stored in the Asset Library in AAS, outside of the workspace. This helps keep the weight of the workspace down.

Update dynamic elements

Dynamic elements are defined in config.js. Versions are built based off those smart items and the template uses the values of smart items in config.js for local testing. Please do not add or remove dynamic elements that can potentially cause issues.

Key

Type

Usage

Default value

background_img

image

  • A relative path to the background image file in the same workspace.

  • An absolute path of the background image file from the AAS Asset Library.

assets/background.jpg

product_img

image

  • A relative path to the image file in the same workspace

  • An absolute path of the image file from the AAS Asset Library

assets/image.jpg

headline_content

string

  • Texts for the headline (HTML tags are acceptable).

  • Image for the headline. .png format is recommanded.

Headline text comes here.

cta_content

string

  • Texts in CTA button (HTML tags are acceptable).

  • Image for CTA button texts. .png format is recommanded.

Shop Now

Update global variables

Global variables provide advanced options to customize an ad. Those are defined in template_options.js. The names of the variables should be reserved as originally defined. Otherwise, it will cause issues. The following table describes all global variables used in the template.

Variable name

Type

Description

Value

Default value

Design options

amzBorder

String

Determines the color of the 1px border around the creative or if it should be disabled.

  • For a color: RGBA, HEX, or predefined color names such as black or white

  • To disable the border: None

grey

Logo options

amzLogo_position_left

String

Decide a horizontal position of logo image.

  • Center, left, right, or position in px.

  • 0 (zero) places the logo at the left of the ad.

  • If this value is empty, the template will follow the default setup.

N/A

amzLogo_position_top

String

Decide a vertical position of logo image.

  • Top, center, bottom, or position in px.

  • 0 (zero) places the logo at the top of the ad.

  • If this value is empty, the template will follow the default setup.

N/A

Image options

amzProduct_position_left

String

Decide a horizontal position of liftstyle image.

  • Center, left, right, or position in px.

  • 0 (zero) places the logo at the left of the ad.

  • If this value is empty, the template will follow the default setup.

N/A

amzProduct_position_top

String

Decide a vertical position of liftstyle image.

  • Top, center, bottom, or position in px.

  • 0 (zero) places the logo at the top of the ad.

  • If this value is empty, the template will follow the default setup.

N/A

Headline options

amzHeadline_color

String

Decide a color of headline.

RGBA, HEX, or predefined color names such as black or white

black

amzHeadline_size

String

Decide a size of headline.

Number of the size in pixels

Varies per ad size

amzHeadline_position_left

String

Decide a horizontal position of headliine.

  • Center, left, right, or position in px.

  • 0 (zero) places the logo at the left of the ad.

  • If this value is empty, the template will follow the default setup.

N/A

amzHeadline_position_top

String

Decide a vertical position of headline.

  • Top, center, bottom, or position in px.

  • 0 (zero) places the logo at the top of the ad.

  • If this value is empty, the template will follow the default setup.

N/A

CTA Button options

amzCta_color

String

Decide a color of the CTA button.

RGBA, HEX, or predefined color names such as black or white

black

amzCta_size

String

Decide a size of the CTA button.

Number of the size in pixels

25

amzCTA_position_left

String

Decide a horizontal position of headliine.

  • Center, left, right, or position in px.

  • 0 (zero) places the logo at the left of the ad.

  • If this value is empty, the template will follow the default setup.

N/A

amzCTA_position_top

String

Decide a vertical position of headline.

  • Top, center, bottom, or position in px.

  • 0 (zero) places the logo at the top of the ad.

  • If this value is empty, the template will follow the default setup.

N/A

A map of top position decision

Crawl-DCO_vertical_Guideline.png

A map of left position decision

Crawl-DCO_horizontal_Guideline.png

Note

Note: Margin here is a hardcoded value in the template to set images with decent padding from the edge of the stage. The values are different per size and not editable.

Ad size

Margin value

970x250

20

300x600

15

160x600

300x250

10

728x90

300x50

5

300x50

Set up the ad in Amazon Ad Server

Once a workspace is completed and looks ready to go, please move to AAS and set up a master ad with the workspace. Before uploading the workspace to AAS, please remove unused images and files. This helps to keep the workspace light. For more information about AAS ad setup, see Set up a standard banner and Add dynamic elements to your HTML ads using a code editor.

Set up a spreadsheet for versions

One of the advantages that this template delivers is generating DCO feature with minimum effort. You can manually set versions one-by-one in AAS. You can also have a batch for mass versions. You can find the batch template Crawl-DCO_ver1.0.1.CSV. For more details to set versions in a DCO ad, please see Work with versions of a dynamic creative ad.

Note

Note: If an ad requires line break tokens or custom alignment, please reach out to your Customer Success Manager.

Additional configuration for internal teams

Line break tokens

There are size-specific special tokens to make line breaks in a headline. These tokens will be useful when a campaign runs ads in several different sizes and needs to manage versions for all ads with one batch CSV. The token is formatted as [<Ad width>x<Ad height>] and can be placed at the breaking point of a new line.

Token

Description

Example

[300x250]

Replaced to <br/> in 300x250 ads and a blank in other sizes.

in versioning data;

IS NOW [300x250]EVEN [160x600]MORE [728x90]REWARDING

replaced to;

IS NOW <br/> EVEN MORE REWARDING

[300x600]

Replaced to <br/> in 300x600 ads and a blank in other sizes.

in versioning data;

IS NOW [300x250]EVEN [300x600]MORE [728x90]REWARDING

replaced to;

IS NOW <br/> EVEN MORE REWARDING

[160x600]

Replaced to <br/> in 160x600 ads and a blank in other sizes.

in versioning data;

IS NOW [300x250]EVEN [160x600]MORE [728x90]REWARDING

replaced to;

IS NOW <br/> EVEN MORE REWARDING

[970x250]

Replaced to <br/> in 970x250 ads and a blank in other sizes.

in versioning data;

IS NOW [300x250]EVEN [160x600]MORE [970x250]REWARDING

replaced to;

IS NOW <br/> EVEN MORE REWARDING

[728x90]

Replaced to <br/> in 728x90 ads and a blank in other sizes.

in versioning data;

IS NOW [300x250]EVEN [160x600]MORE [728x90]REWARDING

replaced to;

IS NOW <br/> EVEN MORE REWARDING

[320x50]

Replaced to <br/> in 320x250 ads and a blank in other sizes.

in versioning data;

IS NOW[300x50] EVEN MORE [320x50]REWARDING

replaced to;

IS NOW <br/> EVEN MORE REWARDING

[300x50]

Replaced to <br/> in 300x50 ads and a blank in other sizes.

in versioning data;

IS NOW[300x50] EVEN MORE [320x50]REWARDING

replaced to;

IS NOW <br/> EVEN MORE REWARDING

Custom alignment

The template has an extra variable, amzCreativeAligns, in the index.html. This is a special variable for adjusting positions of graphic elements. This variable is also useful to debug ads or for customizing particular creative needs.

Property

Type

Usage

Sample Value

gap

Integer

This indicates an amount of padding around the ad container.Value should be a number in pixel.

logo

Object

Change a position of logo.

horizontal alignment

  • 'left', 'center', 'right'

  • left position in px

  • before' or 'next' along with horizontal target value

horizontal_target

  • The id of targeted DOM

vertical alignment

  • 'top', 'center', 'bottom'

  • top position in px

  • 'above' or 'below' along with vertical target value

vertical_target

  • The id of targeted DOM

i.e.

{x:'center', y:'top'},

{x:'center', y:'below_logo'},

{x:'center', y:'below_product'},

{x:'20', y:'15'}

cta

Object

Change a position of CTA button.

product

Object

Change a position of the product.

headline

Object

Change a position of headline.

/*
     amzCreativeAligns variable in the head tag of index.html
*/
var amzCreativeAligns = {
      gap : 15,
      logo : {x:'center', y:'top'},
      product : {x:'center', y:'below_logo'},
      headline : {x:'center', y:'below_product'},
      cta : {x:'center', y:'bottom'}
};
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments