1. Extreme Reach Help Center
  2. Advertising Campaign Management & Distribution
  3. Digital Ad Serving
  4. Creative

HTML5 Display Creative Guidelines for XR Digital Advertising

Updated

These guidelines apply to all HTML5 display creatives submitted as ZIP bundles for ad serving to XR. 

 

1. Required Structure

1.1 Single Root File

  • Each creative must have a single root file named index.html.
  • All asset references (images, CSS, JS, fonts, video, etc.) must use relative paths.
    • ✅ src="./images/bg.jpg"
    • ❌ src="https://example.com/images/bg.jpg"

 

2. Ad Size Declaration

  • Creatives must declare dimensions using a <meta> tag in the <head> of index.html.

Example:

<head>

  <meta charset="UTF-8" />

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

  <title>300x250 HTML5 Banner</title>

</head>

  • Width and height must match the placement size booked in the media plan.

 

3. Clickthrough Implementation

3.1 Using clickTag

  • The creative must read the clickthrough URL from the clickTag query parameter.
  • Do not hardcode landing page URLs into the creative.
  • Ad servers and verification vendors rely on clickTag to append tracking macros.

Recommended implementation (single exit):

<script>

  (function () {

    var params = new URLSearchParams(window.location.search);

    var clickTag =

      params.get('clickTag') || 'https://defaultlanding.com';

    document.addEventListener('click', function () {

      window.open(clickTag, '_blank');

    });

  })();

</script>

 

3.2 Multiple Exits (Optional)

  • If multiple clickthroughs are required, use clickTag0, clickTag1, etc.
  • Attach those to specific elements instead of adding multiple global listeners.

Example:

<script>

  (function () {

    var params = new URLSearchParams(window.location.search);

    var clickTag0 = params.get('clickTag0') || 'https://defaultlanding.com/a';

    var clickTag1 = params.get('clickTag1') || 'https://defaultlanding.com/b';

    document.getElementById('cta-main').addEventListener('click', function (e) {

      e.stopPropagation();

      window.open(clickTag0, '_blank');

    });

    document.getElementById('cta-secondary').addEventListener('click', function (e) {

      e.stopPropagation();

      window.open(clickTag1, '_blank');

    });

  })();

</script>

 

3.3 Click Event Rules

  • A single global click listener is sufficient for most units.
  • Additional listeners are allowed for specific elements (e.g., multiple exits) as long as:
    • clickTag / clickTagN are used.
    • Conflicts or double‑fires are avoided.

 

4. External Resources and Packaging

4.1 No Unapproved External Dependencies

  • All required assets must be included inside the creative ZIP unless explicitly whitelisted.
  • This includes:
    • JavaScript libraries (e.g., jQuery, GSAP)
    • Fonts
    • Images
    • CSS
    • Video files (when applicable)

Not allowed (unless pre‑approved):

  • Loading libraries directly from CDNs:
    • ❌ <script src="https://cdn.example.com/jquery.min.js"></script>
    • ❌ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" />
  • Loading image, CSS, or video assets via http:// or https:// URLs.

If a shared CDN or font configuration is required, it must be specifically approved in advance.

 

4.2 Packaging Requirements

  • Submit one ZIP file per creative.
  • ZIP must contain:
    • index.html
    • All JS files
    • All CSS files
    • All images, fonts, and icons
    • Any other assets referenced by index.html
  • All references inside index.html, CSS, and JS must be relative paths to files in the ZIP.
  • Total file weight (initial load and polite/subload) must comply with IAB specifications and any placement‑specific limits.

 

5. Prohibited / Non‑Compliant Patterns

5.1 No Nested iFrames

  • HTML5 creatives must not contain an <iframe> element within index.html.

Why this is disallowed:

  • clickTag handling breaks:
    • The inner iframe does not automatically inherit the ad server’s query string.
  • JavaScript isolation:
    • Scripts inside an iframe cannot reliably communicate with the parent context.
  • Measurement failures:
    • Third‑party verification vendors (e.g., IAS, DV, MOAT) may not be able to inspect or measure content inside nested iframes.
  • Rendering and policy issues:
    • Platforms like Google Ad Manager can block, sanitize, or modify nested iframes.
  • Data integrity:
    • Click and impression metrics become unreliable due to an additional sandbox layer.

Therefore:

  • ❌ Do not embed <iframe> tags in index.html.
  • ✅ All content and logic must run directly in index.html and its included JS/CSS files.

 

5.2 No Hardcoded Landing URLs

  • Do not hardcode destination URLs in JS, HTML, or inline handlers:
    • ❌ window.open('https://google.com');
    • ❌ <a href="https://brand.com" target="_blank">
  • Always route clickthroughs through the clickTag parameter(s) so that platforms can:
    • Inject required tracking macros.
    • Swap or update destinations without re‑trafficking creative files.

 

5.3 No Cross‑Origin Asset Links

  • Do not link to creative assets via absolute HTTP(S) URLs:
    • ❌ <img src="https://example.com/assets/banner.jpg" />
    • ❌ <link rel="stylesheet" href="https://example.com/styles.css" />
  • All creative‑specific assets must be downloaded and referenced locally using relative paths within the ZIP.

 

5.4 Audio / Video Autoplay

  • Must follow IAB standards and common browser policies:
    • No autoplay with audio on page load.
    • Autoplay is allowed only when:
      • The media is muted, or
      • The user has explicitly interacted (e.g., click/tap) to initiate playback.
  • Provide clear controls for:
    • Play / Pause
    • Mute / Unmute

 

6. Summary: Vendor‑Facing Requirements

When preparing and delivering HTML5 display creatives, ensure that:

  1. index.html is the entry point and contains:
    1. <meta name="ad.size" content="width=...,height=...">
    2. No <iframe> elements.
  2. The creative:
    1. Reads clickthrough URLs from window.location.search using clickTag (and clickTag0, clickTag1, etc. when multiple exits are needed).
    2. Uses window.open(clickTag, '_blank') (or equivalent) for clickthrough navigation.
  3. The ZIP bundle:
    1. Contains all assets (HTML, JS, CSS, images, fonts, etc.).
    2. Uses only relative asset paths.
    3. Meets IAB and placement‑specific file weight limits.
  4. External resources:
    1. Do not use external JS, fonts, or other assets from CDNs or third‑party domains unless explicitly whitelisted and approved in advance.
  5. Media behavior:
    1. Respects autoplay and user interaction rules for audio/video.

 

Following these standards helps ensure that campaigns run correctly and are compatible with Extreme Reach (XR), Google Ad Manager, The Trade Desk, IAS, DV, MOAT, and other major ad platforms and verification vendors.

 

Items in this section