HTML5 Creative Guide

Create interactive HTML5 ads that are ready to upload to COADX.

---

1. Choose the correct Ad Format

Before creating your HTML5 creative, select the Ad Format you plan to use.

Ad Format	Size	Required Dimension
Sticky Bottom Bar	Small	640 × 100 px
Sticky Bottom Bar	Large	1456 × 180 px
Premium Top Banner	Small	640 × 100 px
Premium Top Banner	Large	1456 × 180 px
Side Rail Ads	Small	200 × 240 px
Side Rail Ads	Large	200 × 480 px
Popup Banner	Standard	300 × 250 px
Standard Display	Medium Rectangle	300 × 250 px
Standard Display	Half Page	300 × 600 px
Standard Display	Square	300 × 300 px
Standard Display	Small Square	200 × 200 px
Standard Display	Large Rectangle	336 × 280 px
Standard Display	Leaderboard	728 × 90 px
Standard Display	Billboard	970 × 250 px
Standard Display	Mobile Leaderboard	320 × 50 px
Standard Display	Large Mobile Banner	320 × 100 px

Your creative should be designed using the same dimensions as the selected Ad Format. One bundle declares exactly one size.

---

2. Choose the Click Behavior

Every HTML5 creative uses one of two click behaviors. You select this when uploading, and it changes what your bundle must contain.

Option	Clickable area	Bundle requirement
Entire Banner	The whole banner	No extra script needed
Single CTA or Button	Only the marked CTA / button	A clickTag setup script is required in <head>

Entire Banner

The entire banner is clickable. COAD places a transparent click layer over your creative, so a click anywhere on the banner opens your Landing URL.

• You do not need to add any click handling code.
• Do not hardcode the destination URL — COAD fills it in from the campaign Landing URL.
• This is the default and the simplest option.

Single CTA or Button

Only the element you mark (a CTA or button) is clickable. The rest of the banner does not navigate. Use this when you want animations or content that should not trigger a click.

Because your creative controls the click itself, the bundle must initialize clickTag from the URL. COAD passes the destination to your creative as a clickTag query parameter, and your setup script reads it.

See Section 4 — Set up the Single CTA / Button script for the exact steps. If this script is missing, the upload is rejected.

---

3. Bundle Requirements

Upload a single ZIP bundle containing your HTML5 creative.

Supported format

• ZIP (.zip)

Maximum bundle size

• 600 KB

Recommended bundle structure

creative.zip
│
├── index.html
├── main.js (optional)
└── images/
    ├── image-1.png
    ├── image-2.jpg
    └── ...

Requirements

• One index.html file (required)
• One main.js file (optional)
• One images folder
• Maximum 10 images

Declare the creative size with ad.size

Every HTML5 bundle must declare its intended pixel size in the <head> of index.html using a single ad.size meta tag:

<head>
  <meta name="ad.size" content="width=300,height=250">
</head>

Rules the validator enforces:

• Exactly one ad.size meta tag, inside <head>. A second declaration, or one placed in <body>, rejects the upload.

• The content must be exactly width=W,height=H — integer pixels, no spaces, width first, no units:

  <!-- accepted -->
  <meta name="ad.size" content="width=300,height=250">
  
  <!-- rejected -->
  <meta name="ad.size" content="width=300, height=250">
  <meta name="ad.size" content="height=250,width=300">
  <meta name="ad.size" content="width=300px,height=250px">
  

• One bundle declares one size. If your campaign needs several sizes, upload one bundle per size.

• The declared size must be supported by the selected Ad Format and must equal the size you selected in the upload form.

Examples for Standard Display:

<!-- Medium Rectangle (CT-MR) -->
<meta name="ad.size" content="width=300,height=250">

<!-- Large Rectangle (CT-LR) -->
<meta name="ad.size" content="width=336,height=280">

<!-- Leaderboard (CT-LB) -->
<meta name="ad.size" content="width=728,height=90">

When the declaration is wrong, the creative is rejected with a specific reason:

Situation	Result
No ad.size in <head>	Rejected — missing size declaration
Malformed or duplicated declaration	Rejected — invalid size declaration
Valid size that the Ad Format does not offer	Rejected — unsupported size
Valid, supported size that differs from the size you selected	Rejected — size does not match the selection

---

4. Set up the Single CTA / Button script

Follow this section only when you choose Single CTA or Button. For Entire Banner, skip it — no script is required.

Step 1 — Add the clickTag setup script in <head>

Add a <script> inside the <head> of index.html that reads the clickTag query parameter and stores it on window.clickTag:

<head>
  <script>
    window.clickTag = new URLSearchParams(location.search).get("clickTag");
  </script>
</head>

This exact initialization is required. The validator accepts either of these forms:

// Standard form
window.clickTag = new URLSearchParams(location.search).get("clickTag");

// Or, using your own helper
window.clickTag = getQueryParam("clickTag");

• The script must live inside <head>.
• The value must come from the clickTag query parameter (COAD sets it automatically at serve time).
• Do not hardcode the destination URL.

Step 2 — Open clickTag from your CTA

Wire your CTA element (button, link, or image) to open window.clickTag when clicked:

<!-- Button -->
<button onclick="window.open(window.clickTag, '_blank')">Shop Now</button>

<!-- Or an anchor / image -->
<a href="javascript:void(0)" onclick="window.open(window.clickTag, '_blank')">
  <img src="images/cta.png" alt="Shop Now">
</a>

Only the element you attach this handler to is clickable. The rest of the banner stays inert.

---

5. Keep Everything Inside the Bundle

All files required to render your creative should be included inside the ZIP.

Examples:

• Images
• CSS
• JavaScript
• Fonts (if required)

Avoid loading files from external websites or CDNs.

---

6. Preview Before Uploading

Before uploading, verify that:

• The creative displays correctly.
• Images load properly.
• Animations work as expected.
• The click area responds correctly for the behavior you chose:
  • Entire Banner — clicking anywhere opens the Landing URL.
  • Single CTA or Button — only the CTA opens the Landing URL.

---

7. Common Reasons Upload Fails

Your upload may be rejected if:

• The bundle exceeds 600 KB
• The creative size does not match the selected Ad Format
• index.html is missing
• index.html has no ad.size declaration in <head>, or has more than one
• The ad.size content is not width=W,height=H with integer pixels
• The declared ad.size is not supported by the selected Ad Format, or differs from the size you selected
• Too many image assets are included
• Required files are missing
• External resources are referenced
• You chose Single CTA or Button but the clickTag setup script is missing from <head>

---

Need a Quick Start?

COAD provides ready-to-use sample bundles for every supported Ad Format.

Start from the matching sample instead of building your bundle from scratch.

Sample ZIP contains:

• Folder structure
• HTML template
• JavaScript template
• Asset folder
• clickTag example
• Correct creative dimensions

Using the provided sample is the easiest way to ensure your creative passes validation.