HTML5 Banner Preview and Testing Tool Guide (2026)

To test an HTML5 banner before trafficking, you need two things: a check of the ZIP against the platform's rules, and a live preview that behaves like an ad server, meaning a sandboxed frame where clicks can be inspected. AdCheckLab does both in your browser. Drop the ZIP into the validator, pick Google Ads, CM360 or DV360, and read the results next to the running creative. Nothing is uploaded.

1. Why preview banners before trafficking

Ad platforms refuse noncompliant ZIPs at upload, and a creative that uploads can still render blank or send clicks nowhere. When a campaign ships thirty sizes, finding a missing clickTag or an oversized image during trafficking holds up the launch for every size.

A preview in the browser lets designers, developers and QA check the animation, the click and the weight before the files reach the media team. Because the ZIP never leaves the machine, it is safe for unreleased work under NDA.

2. The checks that decide an upload

The three Google platforms set different limits, which is why the validator has a separate mode for each:

The sources and the remaining rules are in the Google Ads vs CM360 vs DV360 comparison and, for Google Ads upload errors, the Google Ads HTML5 validator guide.

3. How the sandboxed preview works

Ad servers deliver HTML5 banners inside isolated iframes to protect the publisher page. The AdCheckLab preview does the same: the creative runs in an iframe with scripts allowed and nothing else, so it cannot read the page around it, other loaded ZIPs or storage. To render without a server, every file the banner references is swapped for an inline copy, including image paths inside Adobe Animate and CreateJS JavaScript, and the CreateJS preloader is adapted so those inline images load.

Two consequences are worth knowing. A banner that depends on localStorage or cookies can fail in the preview the same way it can fail in a strict ad slot, which is one of the causes in why a preview stays blank below. And a reference that points at a file missing from the ZIP stays broken, exactly as it would after upload.

4. How to test the click

1. Drag the ZIP into the HTML5 Banner Validator and pick the platform.
2. Read the clickTag result: clickTag Variable passes when a correct declaration is found, and the result names the file it is in.
3. Click inside the live preview. The click is intercepted instead of opening a tab, and a Click Intercepted panel appears in that banner's report.
4. Check the panel. It shows the clickTag value the banner read and the URL the click tried to open. If it says the clickTag was not defined, or no click registers at all, review the click binding in index.html.

If the declaration is missing, the missing clickTag guide has the code, and the clickTag Editor can inject it into the ZIP directly.

5. Fixing common display ad errors

Missing primary asset: the main HTML file must be named index.html and sit at the root of the ZIP, not inside a folder. Zip the files, not the folder, as the primary asset fix shows for macOS, Windows and the terminal.

Weight over the limit: compress the PNG and JPEG files with the Banner Compressor, which keeps every file name, and remove unused frames, symbols and embedded audio from Adobe Animate projects.

clickTag casing: JavaScript is case sensitive. The declaration and every reference must be spelled exactly clickTag, not Clicktag or clicktag.

GIF running too long: the validator reads every frame delay and the loop count, and shows the total running time against the 30 second limit. The rules are in the animated GIF guide.

Before sign off, run the whole batch against the HTML5 banner QC checklist and export the CSV report from the validator for the trafficker.

6. Why a preview stays blank

A white box where the banner should be almost always means one of two things: the browser never found a file the banner needs, or a script failed before the animation started. Work through the causes below in order. Most take a minute to rule out, and the validator reports several of them directly next to the preview.

index.html is not where the preview expects it

If the ZIP contains a folder with the banner inside it, the primary file is one level down and relative paths may not resolve as expected. The validator reports index.html Nested in Subfolder. Zip the files, not the folder.

A path points at nothing

• Absolute paths: a reference like /Users/name/project/img/hero.jpg or C:\banner\img\hero.jpg only works on the designer's machine. Use relative paths such as img/hero.jpg.
• Wrong case: paths inside a ZIP are case sensitive. Logo.png in the code and logo.png in the folder works on a Mac and fails on a server.
• A file left out of the ZIP: the reference is right, but the image or script was never packaged.

A script throws before the animation starts

In the sandboxed frame, code that touches localStorage, sessionStorage or document.cookie can throw an error, and if the startup code does not catch it, nothing draws. Open the browser console to see the error. CM360 and DV360 refuse storage anyway, as the storage rules explain.

An external library did not load

If the banner loads GSAP, CreateJS or a font from another host and that request fails, every animation that depends on it fails too. For Google Ads, a host outside Google's allowlist is refused at upload anyway, and the validator reports Disallowed External References. Bundle the file or use the Google hosted copy from the Google Ads allowlist.

An insecure http link was blocked

On an https page, browsers block http:// scripts and stylesheets as mixed content. The validator reports these as Insecure HTTP Connections, and the HTTPS section of the QC checklist shows where they hide.

The creative waits for something the preview does not send

• Studio creatives often wait for the Enabler to initialise before starting. If the Enabler script is missing from the head, they wait forever.
• Polite load code that waits for a publisher page event can sit on its first frame in a standalone preview.
• An animation that starts off screen or at zero opacity looks blank if its first tween fails. Check the console for the first error.

A quick diagnosis order

1. Drop the ZIP into the validator and fix every error it reports first, especially primary asset, external references and insecure links.
2. Open the browser console with the preview visible and read the first red error.
3. Unzip the package and open index.html directly in a browser. If it works there but not in the preview, the problem is a sandbox restriction such as storage.