HTML5 Build Options

Technical Specs

Initial / Polite:
Desktop - 80kb max
Mobile - 50Kb max

User interaction

  • Additional assets can be loaded with a max size of 100Kb
  • Video assets may be loaded with a max size of 5MB

Implementation

  • Creative is due 5 working days before campaign start.
  • Ensure all assets are served securely through SSL
  • An active click-through URL must be provided.
  • Please send creative files to [email protected]

Notes & Best Practices

  • Creative may be rejected if it’s considered offensive, misleading, overwhelming, or distracting.
  • Advertising content must have clearly defined borders and must not be easily confused for normal webpage content.

Supported Third Parties

At NZME. we recommend and support Sizmek and DoubleClick as the rich-media HTML5 providers.

Both have built in products to produce HTML5 creative: 
http://www.richmediagallery.com/resources/html5/
https://support.sizmek.com/hc/en-us/categories/200103329-Creating-HTML5-Ads

 

Host With Us

Alternatively, you can send your HTML5 assets in a zip - with the index.html file at the top level - for us to host and traffic.

We support HTML5 files built through:

  1. Google Web Designer
  2. Adobe Edge
  3. Swiffy
  4. Adobe Animate
All scripts must be loaded via SSL.

If intending to run creative on OneRoof, YUDU or iHeart, please build using this guide

Please see below options for integrating one or multiple clickTags in the HTML5 creatives:

Google Web Designer

In order to add a clickTag into Google Web Designer:

  1. Please select ‘Tap Area’ or ‘Image Button’ from Google Web Designer -> Components
  2. Then add the Events:  Touch/Click -> Action -> Custom Code then put the following code as per the screen shot:

clickTag = window.location.search.substring(1).split("clickTag=")[1];
window.open(clickTag);

 

Adobe Edge

In order to add clickTag in Adobe Edge:

  1. Add an Event, click into the stage and add the code below into the stage.click code canvas

clickTag = window.location.search.substring(1).split("clickTag=")[1];
window.open(clickTag);




Or create symbol and add ‘action’ then use ‘click’ events with the code above.

 

Copy-pasting Click Tag script into html source (e.g. Swiffy / Adobe Animate)

Note: PLEASE DO NOT USE THIS CLICKTAG IF YOUR CREATIVE HAS INTERACTIVE ELEMENTS

Open the index.html file in a text editor such as "Sublime Text" or "Notepad++".
Copy the following code as shown below, being careful not to copy any extra characters:

<!-- NZME EasyClickTag Paste this to the bottom of the body - just before the </body> tag -->
<script type="text/javascript">
document.getElementsByTagName('body')[0].addEventListener("click"function(){var clickTag = window.location.search.substring(1).split("clickTag=")[1];window.open(clickTag);}, false);
</script>

<!-- /clickTag -->