While creating the Overlay 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:

Specifications

Initial to Max Expanded Dimension (WxH)  Max File Size  Video Animation Guidelines  Z-index Range
  • Base: 300×250 / Expanded: 640×480
  • Use any custom Dimensions
 300KB
  • 24 fps
  • 15 sec max length (unlimited user-initiated)
  • 1.1 MB max file size for host-initiated video (unlimited user-initiated)
 5,000 – 1,999,999 (for the entire Ad unit)

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>

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 on 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
varclickArea = 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 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.

The Video may omit controls till the user initiates interaction. On user interaction, the video controls must include Play, Pause, Mute or Volume control to zero (0) output.
Use the Control attributes in the HTML5 video tag for controls instead of providing Custom assets for displaying controls.

Additional Information

  • We recommend you provide 2 HTML files for the Overlay Ad Unit (one for Base ad and the other for Backup). The Expand/Close buttons if implemented in the HTML file.
  • If the HTML file provided by the client does not have Expand/Close options, then you need to implement ZEDO’s functions.
  • 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 in the template will serve only if the canvas property is not supported by browser.

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

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