HTML5 Technical specifications

 

Overview

Smart AD is an advertisement network with its own information system for creating and managing online ad spaces. Therefore the technical requirements of banners are dictated by Smart AD, not individual web sites.

The Smart AD HTML is a banner type that is added into iframe container positioned in specific space in the middle of the HTML content and also in some cases be overlaid on top of the participating web site and is fixed to a certain location in the browser window.

 

Technical specifications

 

Events

To track events made on creative and communicate with parent frame, the following javascript should be added to head section of html

 

var qparams=function(){var r=window.location.search.substr(1).split("&"),o={};if(""==r)return{};for(var n=0;n<r.length;++n){var t=r[n].split("=");2==t.length&&(o[t[0]]=decodeURIComponent(t[1].replace(/\+/g," ")))}return o}();

 

 

window.open(qparams.click_url, '_blank');

 

 

window.open(qparams.dynamic_url+ encodeURIComponent('http://www.website.com/'), '_blank');

 

 

window.parent.postMessage('remove' + qparams.banner_id , '*');

 

 

window.parent.postMessage('close' + qparams.banner_id , '*');

 

 

window.parent.postMessage('expand' + qparams.banner_id , '*');

 

window.parent.postMessage('collapse' + qparams.banner_id , '*');

 

 

 

 <script type="text/javascript">

  var qparams=function(){var r=window.location.search.substr(1).split("&"),o={};if(""==r)return{};for(var n=0;n<r.length;++n){var t=r[n].split("=");2==t.length&&(o[t[0]]=decodeURIComponent(t[1].replace(/\+/g," ")))}return o}();

  _sa_clicker = document.createElement('div');

  _sa_clicker.setAttribute("style","position:absolute;display:block;left:0;top:0;width:100%;height:100%;z-index:1000000;cursor:pointer;");

  document.getElementsByTagName('body')[0].appendChild(_sa_clicker);

  _sa_clicker.onclick = function(){

   window.open(qparams.click_url, "_blank");

   window.parent.postMessage("remove" + qparams.banner_id , "*");

  };

 </script>

 

Suggestions

http://www.iab.net/wiki/index.php/HTML5_for_Digital_Advertising_Resources

 

Use HTML as much as possible and only javascript libraries you actually need - http://www.greensock.com/tag/javascript/

All graphics should be as low quality as possible and optimized -  https://tinypng.com/, http://luci.criosweb.ro/riot/

Degrade gracefully with fallback fonts, feature detection and backup images

For better understanding of the banner clickable area, use CSS: "cursor:pointer;" on your creative.