This article provides basic knowledge of the crawl Dynamic Creative Optimization (DCO) template and introduces a standard procedure for ad creation with the template.
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.
Feature |
Availability |
---|---|
Ad format |
|
DCO |
Yes |
Responsive |
No |
Unfriendly iFrame |
Yes |
MRAID |
Yes |
Size variations |
300x600, 300x250, 160x600, 728x90, 970x250, 300x50 and 320x50 |
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.
Template bundles |
Photoshop guide (optional) |
---|---|
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 |
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 |
|
assets/background.jpg |
product_img |
image |
|
assets/image.jpg |
headline_content |
string |
|
Headline text comes here. |
cta_content |
string |
|
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. |
|
grey |
Logo options |
||||
amzLogo_position_left |
String |
Decide a horizontal position of logo image. |
|
N/A |
amzLogo_position_top |
String |
Decide a vertical position of logo image. |
|
N/A |
Image options |
||||
amzProduct_position_left |
String |
Decide a horizontal position of liftstyle image. |
|
N/A |
amzProduct_position_top |
String |
Decide a vertical position of liftstyle image. |
|
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. |
|
N/A |
amzHeadline_position_top |
String |
Decide a vertical position of headline. |
|
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. |
|
N/A |
amzCTA_position_top |
String |
Decide a vertical position of headline. |
|
N/A |
A map of top position decision
A map of left position decision
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.
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 |
---|---|---|
|
Replaced to |
in versioning data;
replaced to;
|
|
Replaced to |
in versioning data;
replaced to;
|
|
Replaced to |
in versioning data;
replaced to;
|
|
Replaced to |
in versioning data;
replaced to;
|
|
Replaced to |
in versioning data;
replaced to;
|
|
Replaced to |
in versioning data;
replaced to;
|
|
Replaced to |
in versioning data;
replaced to;
|
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
horizontal_target
vertical alignment
vertical_target
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'} };
Comments