HTML5: Unterschied zwischen den Versionen

Aus Technische Spezifikationen
Zur Navigation springen Zur Suche springen
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
(19 dazwischenliegende Versionen von einem anderen Benutzer werden nicht angezeigt)
Zeile 1: Zeile 1:
==Anlieferung==
==Anlieferung==
Ob eine Werbeform als HTML5 (physisch als Zip-File oder via 3rd-Party-Redirect) bereitgestellt und welche Datei-Typen und -Gewichte enthalten sein können, ist den jeweiligen Einzelspezifikationen zu entnehmen.
Ob eine Werbeform als HTML5 (physisch als Zip-File oder 3rd-Party-Redirect via Download-Link) bereitgestellt und welche Datei-Typen und -Gewichte enthalten sein können, ist den jeweiligen Einzelspezifikationen zu entnehmen. Die verantwortliche Kreativagentur muss die im Banner verwendeten Techniken auf Cross-Browser- und Cross-Device-Kompatibilität testen sowie die Lauffähigkeit der Inszenierung in den relevanten Umfeldern sicherstellen. Sie ist ebenfalls für eine entsprechende Fallbacklösung innerhalb der Inszenierung bei nicht kompatiblen Browser verantwortlich, so dass auf Ausschlüsse verzichtet werden kann.
</br>
</br>
===Bereitstellung physisch via HTML5-Zip-File===
===Bereitstellung physisch via HTML5-Zip-File===
{| class="wikitable"
{| class="wikitable"
| style="height:50px; width:850px; text-align:left;font-size:16px" | 1. Anzuliefern ist ein Zip-File mit allen Komponenten des Werbemittels - einzelne Datei-Bestandteile zum Hosting der Werbeinszenierung dürfen nicht angeliefert werden
| style="height:50px; width:850px; text-align:left;font-size:16px" | 1. Anzuliefern ist ein Zip-File via Download-Link mit allen Komponenten des Werbemittels - einzelne Datei-Bestandteile zum Hosting der Werbeinszenierung dürfen nicht angeliefert werden
|-
|-
| style="height:50px; width:850px; text-align:left;font-size:16px" | 2. Auf oberster Zip-Archiv-Ebene muss eine index.html liegen, von der alle weiteren Komponenten (z.B. CSS-, JS-, Bild-Dateien) relativ referenziert werden - vermeiden Sie dabei das Referenzieren von externen Objekten
| style="height:50px; width:850px; text-align:left;font-size:16px" | 2. Auf oberster Zip-Archiv-Ebene muss eine index.html liegen, von der alle weiteren Komponenten (z.B. CSS-, JS-, Bild-Dateien) relativ referenziert werden - vermeiden Sie dabei das Referenzieren von externen Objekten/Ressourcen außerhalb der ZIP-File-Bereitstellung.
|-
|-
| style="height:50px; width:850px; text-align:left;font-size:16px" | 3. Alle zur Anzeigeninszenierung gehörende Komponenten müssen im Anzeigen iFrame-Tag des Vermarkters verbleiben und dürfen nicht auf das Top-Window/Frame der ausspielenden Website zugreifen.
| style="height:50px; width:850px; text-align:left;font-size:16px" | 3. Das HTML5-Project wird über das Templating von iq digital via Cross-Domain-iFrame in die Website integriert. Siehe weitere Informationen zur clicktag-Übergabe weiter unten.
|-
|-
| style="height:50px; width:850px; text-align:left;font-size:16px" | 4. Das HTML5-Project wird über das Templating von iq digital via Cross-Domain-iFrame in die Website integriert.
| style="height:50px; width:850px; text-align:left;font-size:16px" | 4. Videodateien können nicht innerhalb von HTML5-Zip-Files zum Host über iq digital angeliefert werden, anderfalls ist die Bereitstellung als 3rd-Party-iFrame erforderlich. Die max. Größe von 2 MB im Host Initiated Subload darf dabei nicht überschritten werden (siehe [[Dateigewichte und Ladephasen#Host Initiated Subload (Subload)|Dateigewichte und Ladephasen]]).
|-
|-
| style="height:50px; width:850px; text-align:left;font-size:16px" | 5. Videodateien können nicht innerhalb von HTML5-Zip-Files zum Host über iq digital angeliefert werden, anderfalls ist die Bereitstellung als 3rd-Party-iFrame erforderlich. Die max. Größe von 2 MB im Host Initiated Subload darf dabei nicht überschritten werden.
| style="height:50px; width:850px; text-align:left;font-size:16px" | 5. Alle zur Anzeigeninszenierung gehörende Komponenten müssen im Anzeigen iFrame-Tag des Vermarkters verbleiben und dürfen nicht auf das Top-Window/Frame der ausspielenden Website zugreifen.
|-
|-
| style="height:50px; width:850px; text-align:left;font-size:16px" | 6. Alle Bestandteile einer Kampagne und Inhalte eines Creatives sind als HTTPS-kompatible Komponenten anzuliefern bzw. extern bereitzustellen - siehe auch [[SSL-Konformität (HTTPS)]].
| style="height:50px; width:850px; text-align:left;font-size:16px" | 6. Alle Bestandteile einer Kampagne und Inhalte eines Creatives sind als HTTPS-kompatible Komponenten anzuliefern bzw. extern bereitzustellen - siehe auch [[SSL-Konformität (HTTPS)]].
|-
| style="height:50px; width:850px; text-align:left;font-size:16px" | 7. Werbeform muss Sound initial immer deaktivieren und darf diesen nur durch bewusste User-Interaktion aktivieren. Lautstärke ist wie folgt einzustellen: EBU R 128 Rundfung-Normpegel
|-
| style="height:50px; width:850px; text-align:left;font-size:16px" | 8. Animationen sollen 30 Sekunden nicht überschreiten. Looping ist nur innerhalb dieses Zeitrahmens erlaubt.
|}
|}
Die verantwortliche Kreativagentur muss die im Banner verwendeten Techniken auf Browser- und Plattform-kompatibilität testen sowie die Lauffähigkeit der Inszenierung in den relevanten Umfeldern sicherstellen. Sie ist ebenfalls für eine entsprechende Fallbacklösung innerhalb der Inszenierung bei nicht kompatiblen Browser verantwortlich, so dass auf Ausschlüsse verzichtet werden kann.
 
</br>
===Bereitstellung via 3rd-Party-Redirect===
===Bereitstellung via 3rd-Party-Redirect===
{| class="wikitable"
{| class="wikitable"
| style="height:50px; width:850px; text-align:left;font-size:16px" | 1. Anzuliefern ist ein 3rd-Party iFrame-Tag
| style="height:50px; width:850px; text-align:left;font-size:16px" | 1. HTML5-Inszenierungen sind '''nur als 3rd-Party iFrame-Tag''' anzuliefern
|-
|-
| style="height:50px; width:850px; text-align:left;font-size:16px" | 2. Alle zur Anzeigeninszenierung gehörende Komponenten müssen im Anzeigen iFrame-Tag des Rich-Media-Hosts (3rd-Party-Host) verbleiben und dürfen nicht auf das Top-Window/Frame der ausspielenden Website zugreifen.
| style="height:50px; width:850px; text-align:left;font-size:16px" | 2. Für den Fall, dass der Vermarkter Ad Server nicht automatisch die benötigten Makros zum Zählen von Klicks und Cache-Busting dem 3rd-Party Anzeigen-Tag zuordnen  kann, soll durch die Agentur eine Anleitung zur Platzierung der relevanten Makros mitgegeben bzw. die Stellen, an der das jeweilige Makro eingefügt werden soll, mit entsprechenden Platzhaltern im 3rd-Party Tag gekennzeichnet sein. Verlinkung zur Landingpage muss eine neues Fenster öffnen.
|-
|-
| style="height:50px; width:850px; text-align:left;font-size:16px" | 3. Es gelten generell die Voraussetzungen für die Anlieferung von 3rd-Party-Ressourcen - siehe auch [[Anlieferung 3rd-Party-Ressourcen]].
| style="height:50px; width:850px; text-align:left;font-size:16px" | 3. Alle zur Anzeigeninszenierung gehörende Komponenten müssen im Anzeigen iFrame-Tag des Vermarkters bzw. des 3rd-Party-Hosts verbleiben und dürfen nicht auf das Top-Window/Frame der ausspielenden Website zugreifen.
|-
|-
| style="height:50px; width:850px; text-align:left;font-size:16px" | 4. Alle Bestandteile einer Kampagne und Inhalte eines Creatives sind als HTTPS-kompatible Komponenten anzuliefern bzw. extern bereitzustellen - siehe auch [[SSL-Konformität (HTTPS)]].
| style="height:50px; width:850px; text-align:left;font-size:16px" | 4. Alle Bestandteile einer Kampagne und Inhalte eines Creatives sind als HTTPS-kompatible Komponenten anzuliefern bzw. extern bereitzustellen - siehe auch [[SSL-Konformität (HTTPS)]].
|-
| style="height:50px; width:850px; text-align:left;font-size:16px" | 5. Werbeform muss Sound initial immer deaktivierten und darf diesen nur durch bewusste Interaktion durch User aktivieren. Lautstärke ist wie folgt einzustellen: EBU R 128 Rundfung-Normpegel
|-
| style="height:50px; width:850px; text-align:left;font-size:16px" | 6. Animationen sollen 30 Sekunden nicht überschreiten. Looping ist nur innerhalb dieses Zeitrahmens erlaubt.
|-
| style="height:50px; width:850px; text-align:left;font-size:16px" | 7. Änderungen nach initialer Bereitstellung des 3rd-Party-Redirects und Freigabe durch iq Ad Managements sind nicht erlaubt bzw. sind im Vorfeld anzukündigen und abzustimmen.
|}
|}
Die verantwortliche Kreativagentur muss die im Banner verwendeten Techniken auf Browser- und Plattform-kompatibilität testen sowie die Lauffähigkeit der Inszenierung in den relevanten Umfeldern sicherstellen. Sie ist ebenfalls für eine entsprechende Fallbacklösung innerhalb der Inszenierung bei nicht kompatiblen Browser verantwortlich, so dass auf Ausschlüsse verzichtet werden kann.
</br>
</br>


Zeile 39: Zeile 47:
| style="height:50px; width:850px; text-align:left;font-size:16px" | '''URL:''' https://github.com/Unitadtechnologystandards/HTML5Lib/tree/master/localConnect
| style="height:50px; width:850px; text-align:left;font-size:16px" | '''URL:''' https://github.com/Unitadtechnologystandards/HTML5Lib/tree/master/localConnect
|}
|}
iq digital übernimmt keine Gewährleistung für die vom OVK im GIT-Project bereitgestellten  
iq digital übernimmt keine Gewährleistung für die vom OVK im GIT-Project bereitgestellten Code-Vorlagen
</br></br>
{{Click-Tracking}}


 
==Tracking==
 
{| class="wikitable"
===Klickbare Interaktionsflächen innerhalb Ihrer Werbeform===
| style="height:50px; width:850px; text-align:left;font-size:16px" | Das unerlaubte und nicht angekündigte Ausspielen weiterer Scripte/Dienste zum Tracken/Messen anderer Kenngrößen als z.B. Impressions- und Klickzählung ist nicht gestattet und muss zuvor mitgeteilt und abgestimmt werden. iq digital behält sich vor, diese Art von Tracking abzulehnen.  
Für eine bessere User-Erfahrung sowie zur Einhaltung spezifizierter Vorgaben müssen einige Werbeformen Interaktionsflächen für gezielte User-Aktionen bereitstellen. Es ist zu beachten in welchen Fällen diese "Buttons" von Seiten der Kreation im Werbemittel zu implementieren sind, oder die Bereitstellung durch von iq digital genutzte Templates automatisch erfolgen (siehe Einzelspezifikation). Solche durch das Werbemittel bereitzustellenden Interaktionsflächen können z.B. Buttons zum Schließen eines Layers, oder Limitierungen sein, die das Pushen oder Expanden eines Banners nur einmal per Mouseover/out erlauben und Folgeausführungen nur noch per Klick auf einen Button gestatten.
|}
 
Insofern die Kreativagentur selbst für die Bereitstellung einer solchen Schaltfläche im Werbemittel verantwortlich ist und der Klick auf solch einen Button eine durch das iq-Template bereitgestellte Aktion auslösen soll, muss das Template über die Aktivierung des Buttons informiert werden. Da das Werbemittel, wie zuvor beschrieben, bei Verwendung des Vermarkter-Templates als iFrame implementiert ist, greifen die Herausforderungen der Same-Origin-Policy für die Domain-übergreifende Kommunikation (siehe Kapitel: "Local-Connect").
 
Bitte klären Sie mit Ihrem Dienstleister welche Lösungen dieser zur Bereitstellung der Informationsübergabe umsetzt. Welche "Commands" bzw. "function-calls" dabei vom jeweiligen iq-Template zur Aktionsausführung erwartet werden ist in den jeweiligen Einzelspezifikationen vorgegeben.
 
===BESONDERES: iq-initiierte Benachrichtigungen===
iq digital bietet einzelne Werbeformen an, deren Feature-Support hauptsächlich in iq-Werbetemplate implementiert ist. In Fällen, dass diese Templates nach Eintreten einer Aktion eine Benachrichtigung an das Werbemittel-iFrame weiterreichen, so dass die Kreation optional darauf reagieren kann, sind die in der jeweiligen Einzelspezifikation beschriebenen Schnittstellen zur Kommunikation bei Produktion des Werbemittels zu implementieren.
 
''<span class="underline">Nachfolgend finden Sie exemplarische Vorlagen zum Domain-übergreifenden Nachrichtenaustausch. <span class="blue">Es ist zu beachten, dass es sich dabei um auf iq-Templates abgestimmte Lösungen handelt.</span> Die Plausibilität zur Verwendung in Ihrem Werbemittel-Code ist durch die verantwortliche Agentur sicherzustellen. Insofern abweichende Kommunikations-Schnittstellen in den jeweiligen Einzelspezifikation beschrieben sind, ersetzen diese die exemplarischen Vorlagen. Im Falle von interaktiven Werbeformen, die iq-Templates für die Implementierung Ihrer Werbemittel nutzen, ist das nachgelagerter Verfahren zum Nachrichtenaustausch zwingend erforderlich.</span>''
 
Wenn in der jeweiligen Einzelspezifikation nicht anders beschrieben, werden die oben bereitgestellten Funktionen derzeit nur für Ausspielungen im Bereich Display für das stationäre Desktop-Web unterstützt. D.h. im Falle von Ausspielungen in Systemen, die eine abweichende Gesten- und Touch-Steuerung erfordern, erfolgt kein Expanden des Anzeige-Teilauschnittes über das Werbetemplate (dies entspricht ebenfalls der derzeitigen Vorgehensweise bei Flash-Umsetzungen). Insofern Ihre Werbemittel hierfür einen Workaround vorsehen, teilen Sie das Vorgehen bitte dem verantwortlichen Traffic-Manager mit.
 
 
===VORLAGE: <span class="blue">"Werbemittel"-initiierte Benachrichtigungen</span> an das iq-Template "function-calls"===
#'''Dieser Code muss in Ihr Werbemittel im Top-Level-Window "einmalig" eingefügt werden:'''<syntaxhighlight lang="html" line="line">
<script type="text/javascript">
  try {
    var iqdNS={};
    iqdNS.addEvent=function(d,c,b){
      if(typeof d.addEventListener!=="undefined"){
        d.addEventListener(c,b,false);
      } else if(typeof d.attachEvent!=="undefined"){
        d.attachEvent("on"+c,b);
      } else if(typeof d["on"+c]!=="undefined"){
        var a=d["on"+c];d["on"+c]=function(f){a(f);b(f);
      }
    };
    iqdNS.postOrigin=(function(){
      var a=window.location.href.toLowerCase();
      return a.split("iqdurl=")[1].split('&')[0]
    })();
    iqdNS.creativeID=(function(){
      var a=window.location.href.toLowerCase();
      return a.split("iqdcid=")[1].split('&')[0]
    })();
    iqdNS.getElm=function(o){
      return(typeof o==="string")?document.getElementById(o):o;
    };
  }catch(e){}
</script>
</syntaxhighlight>
#'''Implementieren Sie auf gleicher Ebene den "Messenger", der bei Aktivierung des Klick-Buttons eine Aktion meldet:'''<syntaxhighlight lang="html" line="line" highlight="3,6,12">
<script type="text/javascript">
  try {
    iqdNS.postCommand[iq-command] = function() {
      var msgData = {
        info:"startAnimation"+iqdNS.creativeID,
        command:"[iq-command]"
      };  
      if (JSON.stringify){
        window.top.postMessage(JSON.stringify(msgData), iqdNS.postOrigin);
      }
    };
    iqdNS.addEvent(iqdNS.getElm("[action-elmID]"),'click',iqdNS.postCommand[iq-command]);
  }catch(e){}
</script>
</syntaxhighlight>
#'''Ersetzen Sie '''<span class="blue">[iq-command]</span>''' durch die auf den Einzelseiten spezifizierten "commands" sowie das <span class="blue">[action-elmID]</span> durch die Element-ID Ihres "click-buttons". Werbeformabhängig können mehrere "commands" erforderlich sein. In diesen Fällen ist die markierte Funktion entsprechend in Ihrem Code zu duplizieren und die Platzhalter gemäß der Einzelspezifikation anzupassen.'''
 
''<span class=underline">Dieser Code setzt voraus, dass Sie Zugriff auf Ihr HTML5-Projekt und die darin vorhandene Code-Struktur zur Steuerung und Organisation der Animationssequenzen haben sowie, dass alle Elemente im iFrame auf Top-Level definiert sind. Im Falle, dass die Kreation über einen Rich-Media-Dienstleister gehostet wird ist die Kompatibilität durch die Agentur zu klären. Die iq-command-Ausführung muss von der Kreativagentur auf Funktionsfähigkeit vor Anlieferung getestet werden. Lokal definierte Vorlagen in den Einzelspezifikationen ersetzen diese Vorlage!</span>''
 
===VORLAGE: <span class="blue">"iq"-initiierte Benachrichtigungen</span> an das Werbemittel "function-calls"===
#'''Dieser Code muss in Ihr Werbemittel im Top-Level-Window "einmalig" eingefügt werden:'''<syntaxhighlight lang="html" line="line">
<script type="text/javascript">
  try {
    var iqdNS={};
    iqdNS.addEvent=function(d,c,b){
      if(typeof d.addEventListener!=="undefined"){
        d.addEventListener(c,b,false);
      } else if(typeof d.attachEvent!=="undefined"){
        d.attachEvent("on"+c,b);
      } else if(typeof d["on"+c]!=="undefined"){
        var a=d["on"+c];d["on"+c]=function(f){a(f);b(f);
      }
    };
    iqdNS.postOrigin=(function(){
      var a=window.location.href.toLowerCase();
      return a.split("iqdurl=")[1].split('&')[0]
    })();
    iqdNS.creativeID=(function(){
      var a=window.location.href.toLowerCase();
      return a.split("iqdcid=")[1].split('&')[0]
    })();
    iqdNS.getElm=function(o){
      return(typeof o==="string")?document.getElementById(o):o;
    };
  }catch(e){}
</script>
</syntaxhighlight>
#'''Implementieren Sie auf gleicher Ebene den "Listener", der bei Benachrichtigung durch das iq-Template eine Aktion ausführt:'''<syntaxhighlight lang="html" line="line" highlight="14-15">
<script type="text/javascript">
  try {
    iqdNS.initAnimation=function(b){
      var a;
      if(b.origin===iqdNS.postOrigin){
        a=JSON.parse(b.data);
        if(a.info==="startAnimation"+iqdNS.creativeID){
          iqdNS.animationCallback(a.command)
        }
      }
    };
    iqdNS.animationCallback = function(command){
      switch (command){
        case "[iq-command]":
          // Fügen Sie hier den Funktionsaufruf zum Start Ihrer Animation ein.
          break;
      }
    };
    iqdNS.addEvent(window,'message',iqdNS.initAnimation);
  } catch(e){}
</script>
</syntaxhighlight>
#'''Ersetzen Sie '''<span class="blue">[iq-command]</span>''' durch die auf den Einzelseiten spezifizierten "commands" sowie den '''<span class="blue">Kommentarbereich</span>''' durch Ihren jeweiligen Funktionsaufruf zur Aktionsausführung. Je nach Werbeform können aktionsabhängig mehrere "Commands" gesendet werden. In diesen Fällen ist die markierte case-Anweisung entsprechend zu ersetzen (siehe Werbeformspezifikation).'''
 
''<span class="underline">Dieser Code setzt voraus, dass Sie Zugriff auf Ihr HTML5-Projekt und die darin vorhandene Code-Struktur zur Steuerung und Organisation der Animationssequenzen haben sowie, dass alle Elemente im iFrame auf Top-Level definiert sind. Im Falle, dass die Kreation über einen Rich-Media-Dienstleister gehostet wird ist die Kompatibilität durch die Agentur zu klären. Die iq-Command-Ausführung muss von der Kreativagentur auf Funktionsfähigkeit getestet werden. Lokal definierte Vorlagen in den Einzelspezifikationen ersetzen diese Vorlage!</span>''
 
==Click-Tracking==
Der AdServer kann nur dann die Klicks auf ein Werbemittel korrekt messen, wenn im Werbemittel eine klicksensitive Fläche mit Klickfunktion für die Weiterleitung zur Kunden-Zielseite eingesetzt wird, die die entsprechenden ClickCommands des Vermarkters bei Aktivierung auflöst. Diese klick-sensitiven „Exit“-Flächen im Werbemittel durch die Kreation umzusetzen.
 
Da HTML5-Werbemittel bei Verwendung von iq-Werbeform-Templates als iFrame implementiert und ClickCommands des Vermarkters nicht hardcodiert durch die Agentur bereits bei Anlieferung im Werbemittel-Code umgesetzt werden dürfen, muss eine „clicktag“-Übergabe als GET-Parameter an das iFrame-URL vorgesehen sein. Das Werbemittel muss diesen Parameter bei der späteren Klick-Weiterleitung im Werbecode an der relevanten Stelle implementieren. Dieses Vorgehen ist ein bereits etablierter Standard bei der Bereitstellung von 3rd-Party-Ressourcen.
 
Iq digital empfiehlt das vom OVK standardisierte Verfahren zu Übergabe des Vermarkter ClickCommands (inkl. Kunden ClickThrough) für HTML5 Inszenierungen. Eine Beschreibung der dafür erforderlichen Schritte finden Sie auf der Folgeseite. Wenn Sie, oder Ihr 3rd-Party-Rich-Media-Dienstleister einen anderen Ansatz zur Übergabe des ClickCommands verfolgen, kann der darin bereitgestellte Code ggf. nicht verwendet werden.
 
In diesem Fall ist eine Information darüber erforderlich wie der GET-Parameter zur Übergabe des Vermarkter-Trackings umzusetzen ist. Bitte halten Sie die entsprechenden Parameter mit Platzhalter für die ClickCommands in Ihrer iFrame-URL bereit. Teilen Sie dabei mit, ob Ihre Werbeinszenierung bei Übergabe nur den Vermarkter-ClickCommand, oder auch die Kunden-ClickThrough im Parameter erwartet. Insofern Sie die HTML5-Inseznierung via Zip-File zur Verfügung gestellt haben, stellen Sie die entsprechenden Informationen in der Werbemittel-Mail an den Traffic-Manager zur Verfügung.
 
Wenn keines der Verfahren zur Übergabe des Vermarkter-Click-Trackings möglich ist, kann eine Ausweisung der Klickraten auf Seiten des Vermarkters nicht erfolgen. Bitte beachten Sie ebenfalls, dass innerhalb eines Werbemittels keine getrennte Ausweisung von Multi-clicktags möglich ist. Klicks werden immer kumuliert pro Werbeform im Kennzahlen-Report ausgewiesen, vorausgesetzt der Vermarkter ist in der Lage Klicks über das eigene AdServing-System zu erfassen.
 
===clicktag-Übergabe für HTML5-Inszenierungen (ClickCommand + ClickThrough) - OVK Guidlines===
Damit der AdServer des Vermarkters Clicks innerhalb des HTML5-iFrames tracken kann, ist folgende Vorgehensweise aus den OVK-Guidlines erforderlich - andernfalls ist die Klick-Ausweisung im Reporting nicht möglich! Die Schreibweise für Klicktags lautet: clicktag - Die Schreibweise für Multi-Klicktags lautet: clicktag, clicktag1, clicktag2 <n>
 
====Die folgenden Codezeilen sind in das HTML5‐Werbemittel zur Übergabe des Klicktags von der Agentur zu integrieren:====
<syntaxhighlight lang="html" line="line">
<script>
  var getUriParams = function() {
    var query_string = {}, query = window.location.search.substring(1), parmsArray = query.split('&');
    if(parmsArray.length <= 0) return query_string;
    for(var i = 0; i < parmsArray.length; i++) {
      var pair = parmsArray[i].split('=');
      var val = decodeURIComponent(pair[1]);
      if (val != '' && pair[0] != '') query_string[pair[0]] = val;
    }
    return query_string;
  }();
</script>
</syntaxhighlight>
 
Beispiel: HTML und Zuweisung der Links:
<syntaxhighlight lang="html" line="line">
<a href="#clicktag" target="_blank" id="clicktag">IAB clicktag</a>
<a href="#clicktag2" target= "_blank" id=" clicktag2">IAB clicktag</a>
</syntaxhighlight>
 
Mit diesen Javascript Zeilen lassen sich dann die Klicktags den HTML Elementen Ihrer Werbeinszenierung zuweisen:
<syntaxhighlight lang="html" line="line">
<script>
  document.getElementById('clicktag').setAttribute('href', getUriParams.clicktag);
  document.getElementById('clicktag2').setAttribute('href', getUriParams.clicktag2);
</script>
</syntaxhighlight>
 
====Funktionstest der clicktag-GET-Parameter für Übergabe an das Werbemittel:====
Die Werbemittel müssen von der Kreativagentur auf funktionierende clicktag‐Übergabe getestet werden, damit unnötige Feedbackschleifen ausgeschlossen werden können.
 
'''Test:'''
<pre>html5werbemittel.html?clicktag=%LANDINGPAGE%</pre>
 
Im Falle der Multiclick-Einbindung, ist der Test um weitere clicktag-Parameter (&)-separiert zu erweitern:
<pre>?clicktag=%LANDINGPAGE%&clicktag2=%LANDINGPAGE%&… </pre>
 
%LANDINGPAGE% ist mit einer Testzielseite zu ersetzen und muss URL‐encoded übergeben werden (encodeURIComponent‐Funktion).
 
====Anlieferung:====
Im Falle der Werbemittelanlieferung als:
*<span class="underline">HTML5-Zip-File</span>, stellen Sie die clicktag/Landingpage- Kombinationen in Ihrer Werbemittel-Mail zur Verfügung.
*<span class="underline">3rd-Party-Redirect-Iframe</span>, stellen Sie bitte die entsprechenden clicktag-GET-Parameter direkt in der iFrame-URL Ihres iFrame- Tags encodiert zur Verfügung.


[[Kategorie:Allgemein]]
[[Kategorie:Allgemein]]
[[en:HTML5]]

Aktuelle Version vom 3. Juni 2020, 06:30 Uhr

Anlieferung

Ob eine Werbeform als HTML5 (physisch als Zip-File oder 3rd-Party-Redirect via Download-Link) bereitgestellt und welche Datei-Typen und -Gewichte enthalten sein können, ist den jeweiligen Einzelspezifikationen zu entnehmen. Die verantwortliche Kreativagentur muss die im Banner verwendeten Techniken auf Cross-Browser- und Cross-Device-Kompatibilität testen sowie die Lauffähigkeit der Inszenierung in den relevanten Umfeldern sicherstellen. Sie ist ebenfalls für eine entsprechende Fallbacklösung innerhalb der Inszenierung bei nicht kompatiblen Browser verantwortlich, so dass auf Ausschlüsse verzichtet werden kann.

Bereitstellung physisch via HTML5-Zip-File

1. Anzuliefern ist ein Zip-File via Download-Link mit allen Komponenten des Werbemittels - einzelne Datei-Bestandteile zum Hosting der Werbeinszenierung dürfen nicht angeliefert werden
2. Auf oberster Zip-Archiv-Ebene muss eine index.html liegen, von der alle weiteren Komponenten (z.B. CSS-, JS-, Bild-Dateien) relativ referenziert werden - vermeiden Sie dabei das Referenzieren von externen Objekten/Ressourcen außerhalb der ZIP-File-Bereitstellung.
3. Das HTML5-Project wird über das Templating von iq digital via Cross-Domain-iFrame in die Website integriert. Siehe weitere Informationen zur clicktag-Übergabe weiter unten.
4. Videodateien können nicht innerhalb von HTML5-Zip-Files zum Host über iq digital angeliefert werden, anderfalls ist die Bereitstellung als 3rd-Party-iFrame erforderlich. Die max. Größe von 2 MB im Host Initiated Subload darf dabei nicht überschritten werden (siehe Dateigewichte und Ladephasen).
5. Alle zur Anzeigeninszenierung gehörende Komponenten müssen im Anzeigen iFrame-Tag des Vermarkters verbleiben und dürfen nicht auf das Top-Window/Frame der ausspielenden Website zugreifen.
6. Alle Bestandteile einer Kampagne und Inhalte eines Creatives sind als HTTPS-kompatible Komponenten anzuliefern bzw. extern bereitzustellen - siehe auch SSL-Konformität (HTTPS).
7. Werbeform muss Sound initial immer deaktivieren und darf diesen nur durch bewusste User-Interaktion aktivieren. Lautstärke ist wie folgt einzustellen: EBU R 128 Rundfung-Normpegel
8. Animationen sollen 30 Sekunden nicht überschreiten. Looping ist nur innerhalb dieses Zeitrahmens erlaubt.

Bereitstellung via 3rd-Party-Redirect

1. HTML5-Inszenierungen sind nur als 3rd-Party iFrame-Tag anzuliefern
2. Für den Fall, dass der Vermarkter Ad Server nicht automatisch die benötigten Makros zum Zählen von Klicks und Cache-Busting dem 3rd-Party Anzeigen-Tag zuordnen kann, soll durch die Agentur eine Anleitung zur Platzierung der relevanten Makros mitgegeben bzw. die Stellen, an der das jeweilige Makro eingefügt werden soll, mit entsprechenden Platzhaltern im 3rd-Party Tag gekennzeichnet sein. Verlinkung zur Landingpage muss eine neues Fenster öffnen.
3. Alle zur Anzeigeninszenierung gehörende Komponenten müssen im Anzeigen iFrame-Tag des Vermarkters bzw. des 3rd-Party-Hosts verbleiben und dürfen nicht auf das Top-Window/Frame der ausspielenden Website zugreifen.
4. Alle Bestandteile einer Kampagne und Inhalte eines Creatives sind als HTTPS-kompatible Komponenten anzuliefern bzw. extern bereitzustellen - siehe auch SSL-Konformität (HTTPS).
5. Werbeform muss Sound initial immer deaktivierten und darf diesen nur durch bewusste Interaktion durch User aktivieren. Lautstärke ist wie folgt einzustellen: EBU R 128 Rundfung-Normpegel
6. Animationen sollen 30 Sekunden nicht überschreiten. Looping ist nur innerhalb dieses Zeitrahmens erlaubt.
7. Änderungen nach initialer Bereitstellung des 3rd-Party-Redirects und Freigabe durch iq Ad Managements sind nicht erlaubt bzw. sind im Vorfeld anzukündigen und abzustimmen.


Synchronisation

Local-Connect

HTML5-Werbemittel haben sich mittlerweile am Markt etabliert. Dennoch bereiten in der Praxis einige Funktionalitäten, abhängig von der umgebenden Webseite und Implementierung der Anzeige innerhalb Cross-Origin-iFrames, noch immer Probleme. Aus diesem Grund wurde seitens der Unit Ad Technology des OVKs, auf Basis internationaler Standards (IAB), HTML5 Snippets für diese Funktionalität als technische Empfehlung erarbeitet.

Unter folgendem Link stehen die einzelnen Funktionen, inklusive einer genauen Anleitung zur Verfügung:

URL: https://github.com/Unitadtechnologystandards/HTML5Lib/tree/master/localConnect

iq digital übernimmt keine Gewährleistung für die vom OVK im GIT-Project bereitgestellten Code-Vorlagen

Click-Tracking (für Bereitstellung physisch als HTML5-Zip-File)

Der AdServer des Vermarkters kann nur dann die Klicks auf ein HTML5-Werbemittel korrekt messen, wenn im Creative-Code (HTML5 der Creative-Agentur) eine klick sensitive Fläche mit Funktion für die Weiterleitung zur Kunden-Zielseite umgesetzt und das Einfügen von AdServer-Makros zum Zählen von Klicks möglich ist.

Werbemittel, die physisch als HTML5-Zip-File an iq digital geliefert werden, werden bei der Auslieferung als Cross-Domain-iFrame implementiert. Wir empfehlen daher das vom OVK standardisierte Verfahren zu Übergabe des Vermarkter AdServer-Makro zum Zählen von Klicks und Kunden ClickThrough für die Weiterleitung zur Kunden-Zielseite via GET-Parameter.

clicktag-Übergabe für HTML5-Inszenierungen nach OVK Guidlines

Damit der AdServer des Vermarkters Clicks innerhalb des HTML5-iFrames tracken kann, ist folgende Vorgehensweise aus den OVK-Guidlines erforderlich:

Die Schreibweise für Klicktag lautet: clicktag
Die Schreibweise für Multi-Klicktags lautet: clicktag, clicktag2, clicktag3
Verlinkung: Verlinkung zur Landingpage muss eine neues Fenster öffnen

Die folgenden Codezeilen sind in das HTML5‐Werbemittel zur Übergabe des Klicktags von der Agentur zu integrieren:

<script>
  var getUriParams = function() {
    var query_string = {}, query = window.location.search.substring(1), parmsArray = query.split('&');
    if(parmsArray.length <= 0) return query_string;
    for(var i = 0; i < parmsArray.length; i++) {
      var pair = parmsArray[i].split('=');
      var val = decodeURIComponent(pair[1]);
      if (val != '' && pair[0] != '') query_string[pair[0]] = val;
    }
    return query_string;
  }();
</script>

Beispiel: HTML und Zuweisung der Links:

<a href="#clicktag" target="_blank" id="clicktag">IAB clicktag</a>
<a href="#clicktag2" target= "_blank" id="clicktag2">IAB clicktag</a>

Mit diesen Javascript Zeilen lassen sich dann die Klicktags den HTML Elementen Ihrer Werbeinszenierung zuweisen:

<script>
  document.getElementById('clicktag').setAttribute('href', getUriParams.clicktag);
  document.getElementById('clicktag2').setAttribute('href', getUriParams.clicktag2);
</script>

Funktionstest der clicktag-GET-Parameter für Übergabe an das Werbemittel:

Die Werbemittel müssen von der Kreativagentur auf funktionierende clicktag‐Übergabe getestet werden, damit unnötige Feedbackschleifen ausgeschlossen werden können.

Test

html5werbemittel.html?clicktag=%LANDINGPAGE%

%LANDINGPAGE% ist mit einer Testzielseite zu ersetzen und muss URL‐encoded übergeben werden (encodeURIComponent‐Funktion).

Im Falle der Multiclick-Einbindung, ist der Test um weitere clicktag-Parameter (&)-separiert zu erweitern:

?clicktag=%LANDINGPAGE%&clicktag2=%LANDINGPAGE%&… 

Innerhalb eines Werbemittels ist keine getrennte Ausweisung von Multi-clicktags im Vermarkter-Report möglich. Klicks werden immer kumuliert pro Werbeform im Vermarkter-Report ausgewiesen.

Anlieferung

Anlieferung: Stellen Sie die clicktag/Landingpage- Kombinationen in Ihrer Werbemittel-Mail zur Verfügung.

Tracking

Das unerlaubte und nicht angekündigte Ausspielen weiterer Scripte/Dienste zum Tracken/Messen anderer Kenngrößen als z.B. Impressions- und Klickzählung ist nicht gestattet und muss zuvor mitgeteilt und abgestimmt werden. iq digital behält sich vor, diese Art von Tracking abzulehnen.