HTML5: Unterschied zwischen den Versionen

Zur Navigation springen Zur Suche springen

HTML5 (Quelltext anzeigen)

Version vom 4. März 2020, 18:04 Uhr

8.989 Bytes entfernt ,  4. März 2020
keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 40: Zeile 40:
|}
|}
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  
===Klickbare Interaktionsflächen innerhalb Ihrer Werbeform===
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}}
{{Click-Tracking}}


[[Kategorie:Allgemein]]
[[Kategorie:Allgemein]]
Abgerufen von „https://techspecs.iqd-ao.de/de/index.php?title=Spezial:Mobiler_Unterschied/1828“

Navigationsmenü