Optimise support HTML5 Ads based on IAB Standards. You should read HTML5 for Digital Advertising 1.0: Guidance for Ad Designers & Creative Technologists before reading this guide.

Notes:

HTML 5 Ads must be supplied to Optimise that have been designed to comply with IAB standards. If you supply HTML 5 Ads based on other standards that are not compatible with IAB standards, there may be a charge if we are able to convert them.

Please ensure your zip files contain only one HTML file and don’t contain any unnecessary files of folders, or unsupported image file types (JPG / GIF is preferred) .

An HTML 5 Ad is contained in an iframe so css properties such as margin could affect the display of the Ad.

Using Bannerflow? Optimise is integrated with Bannerflow. Find out more.

Dimensions

Where possible we automatically detect the Ad dimensions from the ad.size Meta tag:

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

If there is not ad.size Meta tag present you will need to supply the associated dimensions so they can be manually updated.

Adding a ClickTag

You will need to include a ClickTag in your HTML so that we correctly send a user via our click tracking URL & redirect to the right destination URL when they click on your Ad.

To do this you should add the following in the head of your document:

<script>
var clickTag = "http://www.yourwebsite.org";
</script>

And wrap the banner or any element you want to click with the following:

<a href="javascript:window.open(window.clickTag,'_blank')">
%CONTENT%
</a>

Remember that JavaScript is Case Sensitive and therefore your clickTag variables must always be in the same case.

Please note, at present, we do not provide support for multiple ClickTags in the same Ad.

Links to assets

Any links in the html page or associated css files which link to other assets e.g. images, must either be relative to the html document (example <img src=”images/header.jpg” ) and these assets be included in the zip file, or if they link to external assets, they must be referenced as secure links (example (<img src=”https://someserver/images/header.jpg”)

Example

The following is a simple example of an HTML 5 Ad:

<!DOCTYPE html>
<head>
<title>CSS3 Animated Web Banner | onlyWebPro.com</title>

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

<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script>
        var clickTag = "http://www.yourwebsite.org";
</script>

</head>

<body>

<a href="javascript:window.open(window.clickTag,'_blank')">

<div id="banner_wrapper">
    <div id="content">
    </div><!-- END content -->

    <div id="moving-clouds">
        <ul id="group-1">
            <li class="cloud-1"></li>
            <li class="cloud-2"></li>
            <li class="cloud-3"></li>
            <li class="cloud-4"></li>
       </ul>
        <ul id="group-2">
            <li class="cloud-1"></li>
            <li class="cloud-2"></li>
            <li class="cloud-3"></li>
            <li class="cloud-4"></li>
        </ul>
    </div><!-- END moving-clouds -->

    <ul id="flying-man">
        <li></li>
    </ul><!-- END flying-man -->

    <ul id="bottom-cloud">
        <li></li>
    </ul><!-- END water -->

</div><!-- END banner_wrapper -->

</a>

</body>