Specification: Billboard HTML5 File

While creating the Billboard  HTML5 creative, we suggest that you follow the IAB Guidelines (http://www.iab.net/media/file/HTML5DAv101.pdf). Agency/Creative developers who are developing the HTML5 creative should make the required changes before providing it to ZEDO for it to work correctly. Also refer to the summary of the specifications stated below.

Specification

Main Ad Dimension Residual Branding Vertical Residual Branding Horizontal
970×250 88×62  196×31

Parameters to be read from ZEDO

There are three ZEDO parameters that need to be read by the HTML5 creative developer as needed. There are two possible ways by which these parameters can be read.

Method I

<script type="text/javascript">

//1. Code to read clickTag data

var clickStr = location.search.match(/[\?\&]clickTag=([^\&]*)\&?/i);
window.clickTag = clickStr ?decodeURIComponent(clickStr[1]) : "[DUMMY URL]";

Customer can decide on the dummy URL. Execution of dummy URL is rare and possible ONLY when the clickthrough condition in the statement fails.

//2. Code to read zzadid

var adidStr = location.search.match(/[\?\&]adid=([^\&]*)\&?/i);
window.zzadid = adidStr ?adidStr[1] : 0;

//3. Code to read iframeid

var iframeStr = location.search.match(/[\?\&]frameid=([^\&]*)\&?/i);
window.frameid = iframeStr? iframeStr[1] : "";
</script>

Method II

Include the script in the creative code as shown below. [Including this script in the code will read all the above parameters on its own]

<script type="text/javascript" src="http://c14.zedo.com/utils/zedo-html5param-fn.min.js"></script>

ClickTAG Implementation

Do not hardcode the clickTAG value in the HTML file.

Click Destination Methods

Use the window.clickTag variable for the click event.

If you are using an anchor tag, then set the target attribute to “_blank” to ensure that the click destination opens in a new page or a tab:

For example:

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

A typical method is to give the anchor tag a unique ID and assign the href dynamically after pageload via JavaScript.

  • HTML
<a id="clickArea" target="_blank"></a>

  • JavaScript

var clickArea = document.getElementById("clickArea"); clickArea.href = window.clickTag;

  • Multiple Clickthrough URLs

Currently, Multiple clickthrough URLs are NOT supported.

Refer IAB Guidelines: http://www.iab.net/media/file/HTML5DAv101.pdf (Point no: 2.4.1)

Minimum Required Controls

Control = “Close X” on expanded panel and “Expand” on collapsed panel Font = 8pt (11px) – 16pt (21px)

Retract Feature = Either Click to Close/Expand or Enable Mouse-Off Retraction.

In case ZEDO animation code is to be implemented for the Expand/Close function there are two parameters ZEDO expects the HTML5 designer to implement in the code.

'zdhtmlexpand_' + [adid]; => for expand
'zdhtmlcollapse_' + [adid]; => for collapse

Read the adid from ZEDO parameters as below:

var adidStr = location.search.match(/[\?\&]adid=([^\&]*)\&?/i);
window.zzadid = adidStr ?decodeURIComponent(adidStr[1]) : 0;

This is how it is implemented

  • Expand

Example:

function expand() { //function inside HTML 5 creative
//Below two lines are required to intimate zedo that zedo’s expand function should execute
 var _emsg = 'zdhtmlexpand_' + window.zzadid;
 window.parent&&window.parent.postMessage(_emsg, '*');

//If the script mentioned in Method II is loaded than the above two lines can be replaced by single line statement below

zedo_emsg_expand();
}

This function has to be called when the Expand button is clicked.

  • Close

Example:

function collapse() { //function inside HTML 5 creative
//Below two lines are required to intimate zedo that zedo’s collapse function should execute
 var _cmsg = 'zdhtmlcollapse_' + window.zzadid;
 window.parent&&window.parent.postMessage(_cmsg, '*');

//If the script mentioned in Method II is loaded than above two lines can be replaced by single line statement below

zedo_cmsg_collapse();
}

This function has to be called when the Collapse button is clicked.

Additional Information

  • We have a basic “canvas” property check for browsers HTML5 support. If the browser supports HTML5 canvas properties then it will serve an HTML5 creative. If the creative has HTML5 properties other than canvas [those not supported by browser] than some of the creative functionalities may not work. In such cases, the creative code should check for browser support and serve the backup ad if required. The Backup Ad if uploaded will serve if the canvas property is not supported.

Refer IAB Guidelines: Point 2.5 at IAB HTML5 Link: http://www.iab.net/media/file/HTML5DAv101.pdf

HTML5 Best Practices Notes

The best practices are provided in more detail in IAB’s “HTML5 for Digital Advertising” guide for Ad designers & Creative Technologists.

Improve Initial Display

HTML5 ads are like mini web pages. You can improve initial display by following a few guidelines:

  • Limit initial dependencies on any render-blocking .js or .css.
  • Load interactive elements as a deferred or secondary subload, but keep them efficient using techniques such as caching.
  • Defer heavy file weights until user initiates interaction.
  • Use techniques such as byte-serving to download partial content and to optimize for auto-play video.
  • Avoid any unnecessary downloads.

Improve time-to-visual start and complete download

In order to provide the fastest time to a visual experience do the following:

  • Combine all supporting files e.g. JavaScript toolkits, libraries, HTML, and CSS whenever possible
  • Use well-distributed, cached libraries to provide supporting files instead of providing them with the ad
  • Check device, bandwidth and tailor supporting files and other elements to the environment and experience

Image Assets

  • Consolidate images wherever possible
  • Use sprite sheets for multiple display assets and animation
  • Cache all reusable objects

Video Assets

  • Defer heavy payload until user interaction
  • Use techniques such as byte-serving to download partial content and to optimize for auto play video
  • Avoid unnecessary downloads

Assets and Resources Delivery

  • Package assets to allow for maintaining a persistent connection
  • All assets and files should be delivered using Gzip and use relative paths
  • Minimise or compress where applicable to reduce the file load size

http://www.iab.net/media/file/IAB_AdTech_Creative_Guidelines15_11x17_v7.pdf

http://www.iab.net/media/file/HTML5forDigitalAdvertising2.0PublicCommentDraft.pdf

Contact ZEDO Technical Support team at support@zedo.com with Queries and Suggestions

 

 

0 0