Building HTML5 Ads

Here’s the good news. If you can build web pages, you can build HTML5 ads. Our advice is to use whichever web design tool/HTML editor you’re accustomed to, be that Dreamweaver, CoffeeCup or even Notepad! Then, in your software of choice, design the ad exactly how you would design a page, albeit quite a small one and with a flat file structure. When we serve the ad, we render it in its own iframe so you can genuinely build the ad as though it was any other page. When we say page, we mean page, so you need to include the usual <html>, <head>and <body> tags. Within the opening and closing <head> tags you must include a reference to our core JavaScript library like so …

<script type="text/javascript" src=""></script>

If you want to work on your HTML without an internet connection, then feel free to download the script file and reference it from your local drive. Please retain the file name ADTECH.js though as this is important for Creative.

The rest of the HTML is up to you. We of course encourage you to adopt good design practices and split your code into HTML, CSS and JavaScript, separating each into a separate file. We’d therefore expect your main HTML file to look something like:

<script type="text/javascript" src=""></script>
<script type="text/javascript" src="myscript.js"></script>

You can thus design your ad how you wish, and the only requirement is the usual adherence to the 5 rules of ad building. Here’s the 5 rules with an HTML5 flavour to them:

1. Include the Creative core library

In this case, you’re including the core JavaScript library. We’ve already covered this but it’s very important so we’ll repeat it: please include this tag in the head of your HTML:

<script type="text/javascript" src=""></script>

There’s something else important to note here. If you need to make Creative API calls in JavaScript prior to user interaction (eg. if you’re using ADTECH.getFileUrl to load files to render your ad), then you need to wait for our API to be ready. To achieve this, all you need to do is put your initial code in a function and pass this function to our ADTECH.ready(initialFunction) method. Our code will then call your function at the point it can begin. For example, if your initial function is called init() then you would need to write something similar to the following:

function init() { /* My initial code goes here */ } ADTECH.ready(init);

2. Track clickthroughs and interactions

Just as for Flash, this is achieved by making a call to‘clickName’, ‘clickUrl’) for clickthroughs and ADTECH.event(‘interactionName’) for interactions. It may be JavaScript instead of Actionscript but the rules are the same. Here follows a couple of code snippets to illustrate how this can be used:

a. Making a call to from HTML:

<a href="'Twitter', '')">
Click to Twitter page

b. Making a call to from JavaScript:

var twitterButton = document.getElementById('twitter-button');
twitterButton.onclick = function() {'Twitter', '');

c. Making a call to ADTECH.event() from HTML:

<div onclick="ADTECH.event('Play Game');startMyGame()">Play game</div>

d. Making a call to ADTECH.event() from JavaScript:

var playGameButton = document.getElementById('play-game-button');
playGameButton.onclick = function() {
 ADTECH.event('Play Game');

3. Load files the ADTECH way

With HTML ads, you can do it YOUR way. Just reference additional files exactly how you would usually do so when building a web page. We detect all these file references and make sure the files are referenced and served correctly when the ad is live. This includes files referenced from html (eg.  <img src="company-logo.png" />) and files referenced from css (eg. #logo-div {background: url(company-logo.png) no-repeat}).

4. Think about your (file) weight!

Actually, we make this easy for you in HTML5 ads. We thought about how you’d have to code your ads to be polite in the HTML/JavaScript world and decided it was too complicated. Instead, we will control the loading of your ad so that it doesn’t interfere with the page load. All we ask you to do is be sensible with heavy files, just as you would be if you were developing a web page. Optimize images and video for the web, preload images when you think you need to, make use of CSS Sprites and generally be a good internet citizen.

5. Tell us if your ad expands or contracts

Exactly as with Flash, our requirement is that you call our functions to tell us when you’re about to expand the ad, and when it’s back in it’s contracted state. The two methods you need to call are ADTECH.expand() and ADTECH.contract(). Some example JavaScript follows for code you might have as part of a simple 728×90 expand banner that snaps open to 728×270 on click and snaps back on another click.

var myExpandButton = document.getElementById('myExpandButton');
var myMainDiv = document.getElementById('myMainDiv');
myExpandButton.onclick = function() {
 ADTECH.expand(); = '270px';
myCloseButton.onclick = function() {
 ADTECH.contract() = '90px';

For more exciting expanding and contracting animations we recommend you read about CSS3 transitions and animations. Here’s a good starting point:

So that’s the 5 rules with an HTML5 flavour. There are however a few extra things we need to make you aware of when you’re building HTML5 ads:


Probably THE most talked about feature of HTML5 is the <video> tag and we expect that you will want to use it. You can use it in any way you wish – embed the video tag directly in your HTML, insert it using JavaScript or use a third party JavaScript library. There’s just one thing you need to do if you want to see our standard video reporting metrics – register your video element with our code. You do this by calling ADTECH.registerVideoPlayer(videoElement). Here’s some example code:

var myVideoElement = document.getElementById('my-video');

If you have multiple videos and would like to see the video reporting metrics separately for each video then you can pass a second “reporting id” parameter to the registerVideoPlayer method. Here’s some example code:

var myVideoElement = document.getElementById('my-video');
ADTECH.registerVideoPlayer(myVideoElement, "Video 1");

If you want to read up on HTML5 video then here’s a good starting point:

JavaScript Libraries

The message here is simple: feel free to use them. You can either upload the JavaScript files alongside your other ad files or reference them from our CDN. Currently we have several libraries including jQuery, Greensock and video.js available but we’re happy to add more on demand. You can reference jQuery using the following:

<script type="text/javascript" src=""></script>

If you would like other libraries or plugins to be made available then let us know by emailing

In Creative

Once your HTML5 ad is built, you upload, preview, configure and share it in Creative just as you would a Flash ad. Since HTML5 ads can consist of many files and folders, we recommend zipping them up and uploading the zip during the create new ad process. Once uploaded you can use all the regular panels on the right to edit clickthrough urls, layout, third party tracking etc etc.

A requirement, for any ad, is to include the following HTML meta tag at the top of your html doc:

<meta name="ad.size" content="width=160,height=600">

In the case of a 728×90 ad that expands to 728×270 this would be:

<meta name="ad.size" content="width=728,height=270">

Creative will then use these values to set the width and height correctly in the Layout panel after you’ve created your ad. If you don’t include them, you need to make sure that you go to the Layout panel as soon as you’ve created an expanding ad and ensure that the width and height values in the Layout panel are set to the expanded width and height.

We started this article with some good news and we’ll end with more. You can edit the HTML file, CSS file(s) and JavaScript file(s) that make up your ad from within Creative.  Just go to the Code panel and you can choose which file to edit. You can also click on the arrows in the top right to expand the panel and give you more editing space. Click Save and see your edits reflected in the ad preview straight away.

Download the files of an example HTML5 Expand Ad.

Feedback and Knowledge Base