HTML5 Creatives
Keywords:
html5, adobe edge
English Datum:
11.01.2018
verfügbare Sprachen:
Deutsch
Dieses Dokument ist evtl. nicht auf dem aktuellsten Stand. Aktuellere Informationen finden Sie evtl. in einer der anderen verfügbaren Sprachversionen.

Important note: Unfortunately HTML5 creatives still enforced no real standard like these creatives to be compiled. Therefore, the following descriptions reflect the way AdSpirit can handle best way these creatives.
Also note that the recommendations may change at any time if the market adjusts in a certain way.

With some software tools like Adobe Edge creative, consist of multiple files, can be created. In general, these are referred to as "HTML5 creative", although this is not entirely true, since in principle each HTML creative, delivered by us, is an HTML5 creative.

Requirements for the use of HTML5 creatives

  • The creative must be delivered as a ZIP compressed file.
  • Any number of graphics, CSS, JavaScript and other files can be used
  • Per creative all files have to be in the same directory path within a ZIP file. For example, ad.zip unpacked by Ads/Skyscraper/*. Included files may not be included directly in the ZIP root but in a subfolder within the ZIP (all files together or in various sub-distributing).
  • Per creative only one HTML-file is allowed, so to speak acts as a true creative. This file must be in the directory path on the same level or above the resource files (images, JS, CSS), (e.g. ads/Skyscraper/index.html)
  • All files must be relatively interrelated (eg src = "css/my-file.css")
  • AdSpirit will remove <head> and <body> infromation fron the HTML file, leaving only the contents of the <body>. This means that all <body> attributes are ignored. These should be defined elsewhere (CSS / JavaScript).

Best practices

To create HTML5 creatives as simple as possible and compatible, we recommend you comply with the following recommendations for implementation:

  1. Per creative it must be exactly one HTML file named index.html.
  2. Per creative all files must be located in a common path. CSS, images, JavaScript, and other files should be all in a path below the index.html (e.g. banner/index.html, banner/css/styles.css, banner/js/scripts.js etc.)
  3. All files must be relatively integrated (e.g. src = "js/ cripts.js"). The only exceptions are external resources such as frameworks and so on; this must be absolutely integrated with a complete domain (eg src = "http://mycdn.myadserver.com/frameworkxyz/script.js").
  4. The HTML file is included as an iFrame. In order to do click tracking the HTML file must requier the tracking parameter & clickTag = ... .

Upload of HTML5 Creatives

To upload a HTML5 creatice, pack the creative in a directory and pack this directory into a ZIP file. Upload this zip file tn the ad server.

Please note that the ad server displays depending on the type of HTML5 creativeone or two code proposals in the upload window:

a) the code of the HTML file is extracted and displayed as an creative code
b) the code of the HTML file is unchanged; the HTML file is included as an IFrame

Depending on what type your creative are you need to choose a variant.

Important: To ensure greater compatibility on long term AdSpirit only will offer variant b (included as IFrame). It is therefore advisable to use already this variant.

Requirements for Clicktracking

In order to enable clicktracking the parameter clickTag must be gathered by the code. These AdSpirit passes the requested URL when clicking. The following sample code can be used to integrate the parameters:

function getParameter(name)
{
 var query = window.location.search.substring(1);
 var vars = query.split("&");
 for (var i=0;i<vars.length;i++)
 {
  var itm = vars[i].split("=");
  if(itm[0] == name){return decodeURIComponent(itm[1]);}
 }
 return '';
}

//Sample request:
<a href="#" onclick="window.open(getParameter('clickTag'), '_blank'); return false">Click here!</a>
//or:
<a href="http://www.zielseite.de" onclick="window.open(getParameter('clickTag')+encodeURIComponent(this.href), '_blank'); return false">Click here!</a>

Requirements for Expandables

In order to deliver the expendables which are integrated via IFrame code three things are necessary:

  1. The IFrame is provided with an ID which is assigned by AdSpirit (<iframe id = "%reativeid%" ...>). Using this ID AdSpirit can address the IFrame and adjust its size.
  2. The creative informes via PostMessage AdSpirit about the fact that it wants to open or close.
    To this end, should the ad parent.postMessage (dhtml.getVar("Expand"),"*") and parent.postMessage (dhtml.getVar("collapse"),"*") to use from the IFrame URL parameters passed to the right list identifier to learn for the EXPAND or Collapse function. If this is not possible, alernativ can parent.postMessage ("expand", "*") and parent.postMessage ("collapse", "*") be used.
  3. The ad must automatically recognize that its size is changed and it needs to be adapted accordingly in the design.

Requirements for Sidebar-Ads

To adjust the ad server to deliver Sidebar Ads via IFrame an ID similar to Expandables will be assigned and the content must adapt to the design (see points 1 to 3 above). On sending postMessage can be dispensed.

Example: Clicktracking overwrite

In some cases, the Clicktracking of a creative can not be adjusted. In these cases, you can try to do a manual override of the given clicktracking. To do so, place a clickable transparent GIF over the creative. If the user clicks on the ad, he no longer triggers the original click command of the creative, instead he triggers the click command of the GIF. A sample implementation might look as follows within AdSpirit:

<div style="position:relative;">
<iframe width="300" height="250" noresize="noresize" scrolling="no"
        frameborder="0" marginheight="0" marginwidth="0"
        src="..."
        ALLOWTRANSPARENCY="true"></iframe>
<div><a href="%urlredirect%" target="_blank"><img src="http://%imgsvr%/1x1.gif" width="%width%" height="%height%" border="0" alt=""></a></div>
</div>

The green highlighted part indicatets the part of the original creative, while the part marked in red is the newly added code which serves to override the click tracking.

Example: Google Swiffy

Flash files that have been converted with Google Swiffy into HTML5 are typically only a single HTML file. This can be uploaded into AdSpirit as it is . AdSpirit detects the file and automatically sets the parameters for the Flash clickTag (note correct spelling!).

Example: DoubleClick Studio

In order to make HTML5 files generated with DoubleClick Studio clickable, an exit has to be created. For details read also here: https://support.google.com/richmedia/answer/2672517?hl=en

The code of the exit function can be adjusted as follows:

function bgExitHandler(e) {
    Enabler.exitOverride('Background Exit', dhtml.getVar("clicktag","http://www.adspirit.de"));
}

document.getElementById('bg-exit').addEventListener('click', bgExitHandler, false);

Example: Adobe Edge Creative

To use this several things are needed:

  1. In Adobe Edge, the creative must be prepared so that it supports click tracking. This is done by linking the click event of the banner with the function clickTag (). example:
function getParameter(name)
{
 var query = window.location.search.substring(1);
 var vars = query.split("&");
 for (var i=0;i<vars.length;i++)
 {
  var itm = vars[i].split("=");
  if(itm[0] == name){return decodeURIComponent(itm[1]);}
 }
 return "%urlredirect%";
}
function clickTag(){ window.open(getParameter("clickTag"),"_blank");}
  1. Create a folder, for example, "MyCampaignXYZ" and create therein per creative another folder, for example, "Creative_1", "Creative_2" etc. Export the ads from Adobe Edge including all necessary files into the creative folder.
  2. Pack the campaigns folder including all subfolders into a zip file.
  3. Upload the zip file via the creative uploader provides by AdSpirit.
  4. The AdServer unzipps the given Zip file and will automatically detect graphics and HTML files. If graphics were detected, remove them from the "Graphics" list in the Upload window (but keep all the files into the "Files" list of the upload window).  In the "codes" list the HTML file should appear. The AdServer has already made changes here.
  5. If two code variants were detected for the HTML file, please use the IFrame variant.





  6. Cose the upload.