Billboard mit Reminder: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied

Billboard mit Reminder (Quelltext anzeigen)

Version vom 30. März 2022, 09:02 Uhr

2.782 Bytes hinzugefügt , 30. März 2022

keine Bearbeitungszusammenfassung

Tlohmann

Bürokraten, Oberflächenadministratoren, Administratoren

2.627

Bearbeitungen

@@ Zeile 1: / Zeile 1: @@
 {{TechSpecsOnline
-|galerie=[[Datei:Billboard_reminder.png|300px]]
+|galerie=
-|beschreibung=
+<gallery mode="packed" heights="200px">
+Online_Billboard_mit_reminder1.png|1. Initialer Zustand
+Online_Billboard_mit_reminder2.png|2. Billboard bleibt beim Scrollen für 5s am Bildschirmrand sticky
+Online_Billboard_mit_reminder3.png|3. Nach 5s Transformation zu einer sticky Reminder-Leiste
+Online_Billboard_mit_reminder4.png|4. Nach Expandieren sind Billboard + Reminder-Leiste sichtbar und sticky
+</gallery>
+|beschreibung=Das Billboard ist für 5 Sek. Immer in voller Größe sichtbar, auch beim Scrollen. Danach zieht es sich zu einer Sticky-Reminder-Leiste zusammen, die jederzeit wieder zu voller Billboard-Größe expandiert werden kann.
 |3rdParty={{3rdParty|erlaubt=nein}}
 |technischeDaten={{AnlieferungKombination
@@ Zeile 8: / Zeile 14: @@
 |bezeichnung1=Billboard
 |text1=
-|teil1={{AnlieferungKombination|zeichen=|teil1={{Anlieferungselement|mandanten=karriere, ingenieur, zeit,  handelsblatt, ze.tt, wiwo, areamobile, spektrum, n-tv , edison, apotheken-umschau, baby&familie|abmessung={{Abmessung|w=940|h=200(250)}}|format=jpg, png, gif, html5|gewicht={{Gewicht Online Standard}}}}}}
+|teil1={{AnlieferungKombination|zeichen=|teil1={{Anlieferungselement|abmessung={{Abmessung|w=970|h=250}}|format=jpg, png, gif, html5|gewicht={{Gewicht Online Standard}}}}}}
 |bezeichnung2=Reminder
-|teil2={{AnlieferungKombination|zeichen=|teil1={{Anlieferungselement|mandanten=karriere, ingenieur, zeit,  handelsblatt, ze.tt, wiwo, areamobile, spektrum, n-tv , edison, apotheken-umschau, baby&familie|abmessung={{Abmessung|w=940|h=60}}|format=jpg, png, gif, html5|gewicht={{Gewicht Online Standard}}}}}}
+|teil2={{AnlieferungKombination|zeichen=|teil1={{Anlieferungselement|abmessung={{Abmessung|w=970|h=60}}|format=jpg, png, gif, html5|gewicht={{Gewicht Online Standard}}}}}}
 }}
 |besondereInformation=
-{{Baustein|titel=Funktionsweise|text=Billboard bleibt beim Scrollen für 5 Sekunden am Bildschirmrand sticky. Nach Ablauf der 5 Sekunden erfolgt eine Transformation zu einer Reminder-Leiste, die ebenfalls sticky bleibt. Der Nutzer kann diese öffnen, um das Billboard wieder komplett zu sehen (Die Reminder-Leiste bleibt an dem Billboard angedockt). Durch betätigen eines Schließen- Buttons wird das Stickiness aufgelöst und der inititale Billboard wird wieder sichtbar. Schließen, Expandieren und Kollabieren der Werbeinszenierung wird von iq digital umgesetzt.}}
+{{Baustein|titel=Interaktion|text=Scroll-Event des Users fixiert das Billboard sichtbar für 5 Sek. am oberen Viewport des Browsers. Nach Ablauf der Zeit kollabiert das Billboard zu einer weniger hohen Reminder-Leiste, die ebenfalls fixiert am oberen Viewport des Browsers verbleibt. Durch Klick kann dieser erneut auf das initiale Format geöffnet werden (die Reminder-Leiste bleibt dauerhaft unterhalb am Billboard angedockt). Durch Klick auf Schließen-Buttons wird das Fixierung bzw. stickiness aufgelöst und das Billboard mit itialem Format im originären Werbeplatz zurückgesetzt und verbleibt dort. Die Features zur Steuerung werden von iq digital umgesetzt - siehe nachfolgende Anforderung zur Umsetzung Creation .
+}}
+{{Baustein|titel=Feature-Steuerung|text=
+Bei Anlieferung des Werbemittels als HTML5-Zip-File müssen die Funktionen und Elemente für '''Klick-Interaktion''' nach obigen Interaktions-Regeln durch die Creative-Agentur umgesetzt werden. Da das HTML5-Project innerhalb eines Cross-Domain-iFrames in den Werbeplatz implementiert wird, sind abgestimmte '''Commands''' für das Messaging mit dem Anzeigen-Template von iq digital erforderlich.
+<br/><br/>
+'''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>
 {{ReminderSteuerungBaustein}}
+}}
+|pagenameEN=Billboard with reminder
+<includeonly>|wirdReferenziert=true</includeonly>
 }}