BUILDING HTML5 ADS

Adsolutions / Documentation  / BUILDING HTML5 ADS
a

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 Animate (Edge). 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="http://onecreative.aol.com/ads/jsapi/ADTECH.js"></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.

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:

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 core library

n 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:

here’s something else important to note here. If you need to make ONE by AOL: 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 ourADTECH.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:

2. Track clickthroughs and interactions

Just as for Flash, this is achieved by making a call to ADTECH.click(‘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 ADTECH.click() from HTML:

b. Making a call to ADTECH.click() from JavaScript:

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

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

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 areADTECH.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.

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

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:

Video

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:

If you want to read up on HTML5 video then here’s a good starting point:www.diveintohtml5.org/video.html

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:

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