Preparing HTML5 Ads

HTML5 creatives must meet the IAB standards for HTML5, which are defined in HTML5 for Digital Advertising v2.0. If you upload your HTML5 creative to Basis, it must also meet these requirements:

1. All code needed for the creative (HTML, CSS, and JavaScript) must be compressed into a single ZIP file. If your HTML5 creative is already a single HTML file, you must zip it and upload it to the DSP as a ZIP.

2. The primary HTML file must be in the root directory of the ZIP file. If there is only one HTML film (*.html or *.htm), it is the primary HTML file. If the ZIP contains multiple HTML files, the primary file must be named "index.html".

   Basis DSP automatically inserts code into the primary HTML file to ensure that clickthrough works correctly in all environments. If the creative consists of multiple HTML files, you must insert a SCRIPT call into the secondary files if there are any outbound links. Insert this code into the HEAD of the HTML files (before the closing </head> tag):

   <script src="https://cdn01.basis.net/assets/basis/hc.js" type="text/javascript"></script>

   Copy

3. The ZIP file must be smaller than 200 kB.

4. The clickable area on the creative must be either:

   • A single clickable area that covers the entire creative:

     • No interactivity
     • No additional tracking events
     • If a user clicks anywhere on the creative, the ad opens one landing page.

     or;

   • Designed with a click tag query string parameter. There are two options available here based on whether you declare the destination URL with the DSP or let the destination URL be decided by the creative at runtime:

     • The ad's Destination URL is declared with the DSP when you upload the creative.

       JavaScript code inside the HTML5 creative must read the clicktag from a query string parameter named "clickTag" or "clickTAG".

       This example reads the click tag URL from a query string parameter named "clickTag" and then opens that URL in another window:

       function getParameterByName(name) {
           var match = RegExp( "[?&]" + name +  "=([^&]*)" ).exec(window.location.search);
           return match && decodeURIComponent(match[ 1 ].replace(/\+/g,  " " ))
           }
           window.open(getParameterByName( "clickTag" ),  "_blank" )

     • The ad's Destination URL is not declared with the DSP, but instead is decided at runtime when the ad is clicked:

       When the ad is clicked, the JavaScript code inside the HTML5 creative must read the click tag from a query string parameter named "clickTag" or "clickTAG", and then append the Destination URL where you want to take the user.

       This example reads the click tag URL from a query string parameter named "clickTag" and then opens that URL in another window:

       function getParameterByName(name) {
           var match = RegExp( "[?&]" + name +  "=([^&]*)" ).exec(window.location.search);
           return match && decodeURIComponent(match[ 1 ].replace(/\+/g,  " " ))
           }
           var clickRedirect = getParameterByName("clickTag") + getDestinationURLBasedOnClickLocation();
           window.open(clickRedirect, "_blank" );

5. The creative code cannot interact directly with the parent window. HTML5 ads are served into an IFrame, meeting publishers' security requirements. This IFrame prevents a creative from manipulating or reading objects in the browser or the publisher's page.