HTML Banner Guidelines

HTML input

We highly advise to validate and create your HTML banner responsive and to structure the code according a to latest HTML standards with the minimum of  document type declaration – <!DOCTYPE html>, opening and closing <html>,<head> and<body> tags;

HTML content will be placed in same-origin <iframe>, therefore all the limitations of <iframe> will take place and viewport settings will be inherited from parent container (width of the page will follow the screen-width of the device). To ensure click tracking, we provide the following click and message event listeners:

The platform will listen to every click event on <a> tag with fully qualified URLs in href attribute. Every click event on these elements will be captured and registered in our platform. The user will be redirected the corresponding URL in a new browser tab or window. The Following code snippet illustrates a tag captured by the system:

<a href="http://wifi.garden">

In order to bypass this behavior simply add a class “disable-wg” to the <a> tag:

<a href="http://wifi.garden" class="disable-wg">

To register custom click events You can use the JavaScript postMessage API by sending the message to WIFIGarden listener:

window.parent.postMessage('register-click-wg', '*'); 

Unlike the click event listener on <a> tag, this will only register the click and will not influence the behavior of your HTML content;

If Banner Link input field value is set, the HTML content will not be proactive and every click on the banner will redirect accordingly to the value of the input field.

External HTML assets can either be secure or insecure, however insecure assets will not display properly during preview of the banner in dashboard;

Third-party click tracking and impression tracking scripts can be added in the HTML content directly (for Splash Banners, the impression tracking code should be placed only in one of the HTML input fields, since on every exposition both <iframe> contents are loaded). However it is recommended to place tracking codes in the Impression Tracking input field and Banner Link input field accordingly.

Zip Archive upload

If uploaded Zip Archive has index.html in root directory, it will replace the contents of HTML input. You can also upload a Zip Archive without index.html and manually fill the HTML input;

Every string enclosed in double quotes in the HTML input containing the relative path from archives root directory to any file will be replaced with fully qualified URL of the corresponding file. For example, if archive contains css/main.css then every occurrence of “/css/main.css”, “/css/main.css/”“css/main.css/” and “css/main.css” will be replaced with fully qualified URL of the file;

File names and directory names containing the following symbols will be ignored: #%&{}\<>*?/$!”:@;

Please do not upload archives containing file system links, they are not going to work and will disclose information of your file system to public.

Important: Asset path replacements are performed only to the contents of the HTML input field, none of the uploaded files will be modified.