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