Introduction to HTML5 Ads

HTML5 makes it possible to build ads with the same technology that makes up any web page. This guide will help you get your desktop and mobile ready ads into our system.

HTML5 is the fifth and latest specification used to describe content for the World Wide Web. One key difference with HTML5 when compared to legacy technology like Adobe Flash, is that your HTML5 ads will work on any modern smartphone, tablet or desktop web browser. HTML5 also simplifies building responsive ads, where content changes and responds to multiple screen- and ad container sizes.

Important requirements

To build a single ad that is valid to run in our ad server you must have the following in place:

Further requirements

  • Source HTML-file - a required source HTML-file conventionally called index.html.
  • CSS/JavaScript-files - optional CSS and JavaScript files.
  • Other assets - optional images, fonts, etc.
  • Material weight - Recommended maximum weight for all resources is 150 kb initial load. Please note that our ad server tags add 20 kb in weight.
  • Animation time - Recommended maximum animation time is 30 seconds.
  • Maximum requests - Maximum requests is not to exceed 13.

Please note: It is recommended to not load resources from external domains since this might cause longer loading times. However it is required to use HTTPS on all external calls.

In regards to creating in-banner video: When you are creating in-banner video material, we recommend that you include the video material in the ad and that they are in the format MP4 and/or WebM and no more than 1 Mb.

Required ad structure

Every ad must be contained in its own ZIP archive and have its own manifest.json, source HTML-file and assets. One possible directory structure looks like this:

  • 300x250

    • ad.min.js
    • ad.min.css

    • assets

      • logo.png

    • index.html

    • manifest.json

Making sure the directory structure is correct can be simplified and automated by using a build tool like Grunt or Gulp. Please take a look at our example ads for tips and tricks.

Source HTML-file

Every ad must provide a source HTML-file used for bootstrapping its contents. This file is used as an entry-point for displaying the ad. Your HTML-file will be loaded into an <iframe> with the width and height specified in your manifest.json file.

For some of our features to work, we assume that the body is not cleared. If you need to use methods like innerHTML make sure that you use an element in the body rather than the body itself.

// Bad:
document.body.innerHTML = 'Hello';

// Good:
document.getElementById('root').innerHTML = 'Hello';

CSS/JavaScript-files and other assets

Other assets can be added and referenced relative to the source HTML-file as long as the loaded files are located at the same level as the source HTML-file or below.

Valid paths: font.otf, images/my-image.png

Invalid paths: ../font.otf, http://my-server.com/my-image.png

Delta only supports loading files from the same domains.

Access to our library code

While JavaScript code can be executed at any time it is not safe to call any of our library functions before getting a callback from html5.ready(). It also serves as a DOM-ready replacement for jQuery#ready() and similar functions:

html5.ready(function() {
  // Safe to run other library functions here
})

For more information continue to read our documentation on Product Feeds, Variables or Geo.

Testing ads locally

Even though the source HTML-file can be viewed directly in any web browser by using the file:// protocol, it is discouraged since our script will automatically load your manifest.json file when served over http://. Please look at our example ads for an example on how to set up a local web server for hosting your ads during development.

Last modified: Mon Sep 23 2024 11:48:54 GMT+0200 (Central European Summer Time)

results matching ""

    No results matching ""