Articles in this section

See more

HTML5 advertising material

Support
  • Updated
Follow

Conditions for the use of HTML5 advertising 

  • The ad must be delivered as a ZIP compressed file.
  • Any number of graphics, CSS, JavaScript, and other files are used
  • All files must be located in a shared directory path within a zip file per advertisement. For example werbung.zip extracted to advertising/Skyscraper/*. The files may not be directly included in the zip but in a subfolder are (all files together or in various sub-dispensing).
  • there can only be one HTML file per advertisement. These must act called index.html and as the actual advertising. This file must be in the directory path on the same level or above the resource files (images, JS, CSS) are (eg advertising/Skyscraper/index.html)
  • All files must be relatively linked (eg src="css/meinedatei.css" not src="/css/meinedatei.css")

Best practices

HTML5 advertising material as simple and compatible to make, we recommend to keep you the following recommendations for implementation:

  1. Pro advertising materials there must be exactly one HTML file named index.html.
  2. All files must be located in a common path per advertising. CSS, images, JavaScript, and other files should be located in a path below the index.html (eg banner/index.html, banner/css/styles.css, banner/js/scripts.js etc.)
  3. All files must be relatively involved (eg src = "js/scripts.js"). The only exceptions are external resources such as frameworks and so on; they must be completely integrated with a complete domain (eg src="http://mycdn.myadserver.com/frameworkxyz/script.js").
  4. The HTML file is found as IFrame. therefore, the HTML file must order tracking click the parameter &clickTag=... query.

 

Requirements for the click tracking

To here Click tracking must be requested within the code of the URL parameter clickTag allow. At these AdSpirit passes to invoke the click URL. The following sample code can be used to retrieve the parameter:

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 ''; 
} 

// Example call: 
<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>!

 

Example: Google Swiffy

Flash files were convertiert with Google Swiffy HTML5 are typically only a single HTML file. This can as it is uploaded to AdSpirit. AdSpirit recognize the file and sets automatically the parameters for the Flash clickTag (note correct spelling!).

Example: DoubleClick Studio

An exit must be created to make generated in DoubleClick Studio HTML5 files clickable. For details, see here: https://support.google.com/richmedia/answer/2672517?hl=de

To create an exit only needs a <div> to add carrying the ID bg-exit:

<Div id = "bg-exit"> </ div>

This following features should be given via CSS:

# bg-exit { 
   background-color: rgba (255,255,255,0); 
   cursor: pointer; 
   height: 100%; 
   left: 0px; 
   position: absolute; 
   top: 0px; 
   width: 100%; 
 }

The exit is then communicated via JavaScript what to do:

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

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

Example: Adobe Edge Promotional Products

To use this several things are needed:

  1. Adobe Edge is the advertising material 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:
 window.open (clickTag (), "_ blank");}

  1. For example, create a folder "MeineKampagneXYZ" and create in each advertising material another example folder "Werbemittel_1", "Werbemittel_2" etc. Export the advertising material from Adobe Edge out incl. All necessary files in the advertising media folder.
  2. Pack the campaign folder including all subfolders in a zip file.
  3. Now the folder from the file upload can be loaded in the ad server. (See point: Upload HTML5 advertising)

  4. Requirements for expandables

    To deliver Expandables which are integrated via IFrame code needed three things:

    1. The IFrame is assigned an ID, which is awarded by AdSpirit (<iframe id = "% creativeId%" ...>). By means of this ID can address AdSpirit the IFrame and adjust its size.
    2. The ad informed by mail message AdSpirit about the fact that it wants to open or close. To this end, the ad parent.postMessage(dhtml.getVar("expand"),"*") and should parent.postMessage(dhtml.getVar("collapse"),"*") used to from the IFrame URL parameters passed to the right list to learn identifier for the EXPAND or Collapse function. If this is not possible, can alernativ parent.postMessage("expand","*") and parent.postMessage("collapse","*") are used.
    3. The ad needs to know automatically that its size is changed and it has to adjust accordingly in style.

    Requirements Sidebar Ads

    To Sidebar Ads must implement via IFrame code as expandables an ID will be awarded and the content must adapt to the design (see points 1 and 3 above). To sending postMessage can be dispensed with.

Next article: HTML5 Creative - upload

 

Keywords: html5, adobe edge

Related articles

Related articles