How to prepare an HTML5 banner for the ad server

A banner can look perfect on your screen and still be rejected by the ad server. Almost always the reason is the same: a technical detail nobody checked. This guide goes through, in order, what to verify before uploading an HTML5 banner.

Before you start

Ask whoever publishes (or read the target platform's documentation) three things: which sizes it accepts, how much each piece can weigh, and whether it allows external resources. Those three answers define everything else, and each platform has its own.

The package: a .zip with an index.html at the root

The banner is delivered as a .zip file. Inside it, index.html must be at the root (not inside a folder), and resources such as images or fonts sit next to it or in subfolders. A very common mistake is compressing the whole folder instead of its contents: the ad server opens the .zip, does not find index.html at the root, and rejects it.

If you have several sizes or languages, each combination is a separate piece with its own .zip. BannerMotion packages them that way by default ("One .zip per piece") and can also group the languages into folders ("One .zip per size").

The declared size

The banner states its size with a meta tag in the <head>. The platform reads it to know how to display the banner and to check that it matches the space you bought.

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

The size in the tag, the size of the banner container, and the size of the purchased slot must match to the pixel. A 300×250 banner inside a 300×600 slot is a production error, not a platform error.

The clickTag: the destination link

The destination link is not written as a fixed value inside the banner. The banner reads a variable called clickTag, which the platform defines, and uses it when someone clicks. That way the ad server can count each click before redirecting to your page.

<script>
  var clickTag = "https://your-site.com";
</script>

<div id="hit" role="link" tabindex="0"></div>
<script>
  document.getElementById("hit").onclick = function () {
    window.open(window.clickTag, "_blank");
  };
</script>

Three details that are often overlooked: the variable must be written exactly clickTag (capitalization matters); the address you leave in the file is a test address, because many platforms replace it when they serve the ad; and the banner must have a single click action that covers the whole piece. Some platforms use their own library or a different name: check their guide.

The maximum weight of the .zip

Each platform sets a maximum for the .zip. Always measure the final .zip, not the uncompressed folder, and leave a margin: it is easier to reduce before uploading than to fix a rejection. Some platforms also distinguish between the initial load and the total load (called the polite load).

BannerMotion measures the weight of each piece when exporting and compares it with a configurable limit; that limit does not replace the real one on your platform. The banners do not include third-party libraries, which helps keep the weight low. [PLACEHOLDER: typical weight measured for one piece, once there is publishable measurement.]

What adds the most weight, from most to least: videos, images (especially at double resolution for retina screens), fonts with many styles, and libraries. To bring it down: use text and vector shapes (SVG) instead of images where you can, group small icons into a sprite, compress photos, and load only the font weights you use.

No external resources

Everything the banner needs must be inside the .zip: images, fonts, and libraries. Many platforms block or penalize files requested from another server (a font from a CDN, a library hosted elsewhere), because they cannot guarantee that those files will be available or safe. In BannerMotion the package is self-contained: it makes no requests to other domains.

Animation, duration, and repetitions

Platforms usually limit how long the animation lasts and how many times it repeats (often around 30 seconds at most and a small number of loops). The exact value depends on each platform. The BannerMotion exporter starts from a maximum duration of 30 seconds in its generic preset.

Two good practices that do not depend on anyone: make sure the message and the button are complete in the last frame (because that frame stays on screen), and use smooth easing curves over a few well-chosen keyframes instead of many jumpy movements.

Backup image

Some platforms require a backup image (JPG, PNG, or GIF) of the same size, shown if the browser does not run the HTML5. The usual choice is the last frame of the animation. Confirm whether your platform requires it, whether it goes inside the package or separately, and with what maximum weight. In BannerMotion, the static backup appears as "Coming soon" on the export screen.

Test before uploading

Unzip your .zip into a new folder and open index.html in the browser. Check that the animation plays through completely, that no text is cut off, that the click opens the address you expect, and that no error appears in the browser console. Repeat at the smallest and the largest size in the campaign.

A banner you cannot test is not finished.

Review checklist

• The .zip has index.html at the root.
• The ad.size tag matches the banner size and the purchased slot.
• The click uses clickTag and there is a single click action.
• The .zip weighs less than the platform limit (BannerMotion warns you with the limit you configure).
• No external resources: nothing is requested from another domain.
• Duration and repetitions are within what the platform allows.
• The last frame has the complete message and the button.
• Tested in the browser, at the smallest and the largest size.

When uploading: what trafficking is

Uploading the banner and assigning it to its campaign, dates, and slots is the job of trafficking. When the package arrives well prepared, that step is reduced to uploading, testing in the platform's preview, and assigning. After publishing, confirm in the ad server's reports that the clicks are being counted.

BannerMotion exports each piece with the declared size, the clickTag included, and the validated weight, and warns you if something is missing. Direct delivery to ad servers is part of the product plan; for now you download the package and upload it by hand.