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

Your creative should be designed using the same dimensions as the selected Ad Format.

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

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
  • 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.