Anleitung: Buchen von HTML-Interstitials mit der Cxense Mobile SDK

2016-11-08 15:37:27 UTC

Aktualisiert am 09.04.2015 

Durch die Integration der Cxense (früher: Emediate) Mobile SDK in Ihre iOS- oder Android-App können Rich-Media-/HTML5-Interstitial-Anzeigen in Ihrer ePaper-Publikation gebucht werden. Die HTML-Anzeigen werden als Vollbildanzeigen zwischen den Seiten der Publikation dargestellt.

In diesem Artikel finden Sie Informationen über die Möglichkeiten, die Visiolink zum Buchen von Interstitials in Ihrem ePaper mit der Cxense Mobile SDK bietet, sowie einen Leitfaden zum Buchen von Interstitials über die Cxense-Display-Schnittstelle.

Für das Verständnis der Cxense-Display-Schnittstelle zur Anzeigenbuchung ist vielleicht eine grundlegende Einführung erforderlich. Falls Sie mit dem Interface noch nicht vertraut sind und Sie Fragen zu den Grundfunktionen haben, kontaktieren Sie bitte den Cxense-Support.

Das Erstellen von HTML-Anzeigen erfordert ein hohes Maß an technischen Fähigkeiten. Gemeinsam mit der Digitalanzeigenagentur OnAds stellt Visiolink zwei Methoden zur Verfügung, die Sie bei der Erstellung von HTML-Interstitial-Anzeigen unterstützen sollen:

Rich Media Template Apps: Zugang zu einem Self-Service-Werkzeug zur Anzeigenerstellung zum Anlegen von sechs vorgegebenen Kreativformaten mit einfachem Aufbau. Dieser Artikel enthält Einzelheiten und Video-Beispiele: http://blog.visiolink.com/new-concept-for-interactive-ads  
Rich Media Premium Ads: Umfassende kreative Zusammenarbeit mit unserer Digitalanzeigenagentur zur Erstellung von maßgeschneiderten Anzeigen.

Kontaktieren Sie Visiolink, wenn Sie mehr über diese Lösungen erfahren möchten.

1.0 HTML-Anzeigenlösung von Visiolink

Bei Visiolink haben wir ein klares Konzept für das Einfügen von Content Units in das ePaper für iOS und Android erstellt. Dies umfasst sowohl feste als auch häufigkeitsgesteuerte Platzierungen. Dieses Konzept wird hier vorgestellt.

1.1 Voraussetzungen

Um HTML-Interstitials anzuzeigen, die über die Cxense-Display-Schnittstelle in Ihrer ePaper-App gebucht wurden, benötigen Sie Folgendes:

  • Das Feature Interstitial in Ihrer App
  • Integration der Cxense Mobile SDK in Ihre App
  • Zugang zum Cxense-Display

1.2 Feste Platzierungen

Sie können in Ihrer ePaper-Publikation bis zu fünf feste Platzierungen erstellen. Eine Platzierung wird als ein reservierter Anzeigenplatz nach einer ungeraden Seite in der ePaper-Veröffentlichung definiert, siehe Abbildung 1.

 Es gelten folgende Bedingungen:

  • Sie müssen eine Content Unit (CU) pro Platzierung erstellen
  • Platzierungen können nur nach ungeraden Seitenzahlen erfolgen
  • Zwischen den Platzierungen müssen mindestens drei Seiten liegen. Falls nach Seite 1 eine Platzierung folgt, befindet sich die nächste mögliche Platzierung auf Seite 5, siehe Abbildung 1
  • Nachdem die App übermittelt wurde, können Platzierungen und CUs nicht mehr geändert werden

Abbildung 1

 

1.3 Häufigkeitsgesteuerte Interstitials

Neben festen Platzierungen besteht auch die Möglichkeit, eine CU mit häufigkeitsgesteuerten Interstitials zu erstellen. Diese werden in der App gemäß einer eingestellten Anzahl von Wischbewegungen angezeigt. Wenn die Häufigkeit auf 7 Wischbewegungen eingestellt ist, wird das Interstitial nach jeweils 7 Wischbewegungen zwischen den Seiten angezeigt (Beim erstmaligen Öffnen einer Publikation werden 3 Wischbewegungen von der Häufigkeitsanzahl abgezogen. Dadurch wird die Wahrscheinlichkeit optimiert, dass mehr Leser die Anzeige sehen).

Die Häufigkeitsanzahl kann nicht unter 5 liegen. Sie können in dieser CU gleichzeitig mehrere Interstitials (Kampagnen) buchen.

1.4 App-Logik und allgemeine Anforderungen und Einschränkungen

Um das Verhalten des Interstitial-Displays in der App vollkommen verstehen zu können, müssen Sie die nachfolgenden, für die Steuerung der Display-Logik geltenden Regeln beachten:

  • Die App lädt vorab das Interstitial, das der Seite, die gelesen wird, am nächsten ist. Die Interstitials werden vorab geladen, um die Ladezeit zu minimieren, wenn der Leser eine Interstitial-Platzierung erreicht. Das bedeutet, dass schnelles Wischen zwischen den Seiten dazu führen kann, dass ein Interstitial nicht angezeigt wird.
  • Aus Performance-Gründen kann die App immer nur das Interstitial einer Platzierung vorab laden.
  • Simulieren Sie beim Testen von fest platzierten Interstitials ein normales Leserverhalten. Wenn schnell zwischen Interstitials gewechselt wird, reicht die Zeit für das Gerät möglicherweise nicht aus, um zu registrieren, dass ein Interstitial aktiv ist, und die Platzierung wird übersprungen.
  • Wenn in einer CU mehrere Interstitials gebucht sind (nur bei häufigkeitsgesteuerten Interstitials möglich), zeigt die App das Interstitial an, das auf dem Gerät des Lesers bisher die wenigsten Male angezeigt wurde.
  • Sobald ein beliebiges Interstitial angezeigt wird, wird der Häufigkeitszähler von häufigkeitsgesteuerten Interstitials zurückgesetzt.
  • Ein Bereich von drei Wischbewegungen vor und nach einer festen Platzierung wird von häufigkeitsgesteuerten Interstitials freigehalten, um zu verhindern, dass der Leser mit mehreren Anzeigen innerhalb einer kurzen Zeitspanne überhäuft wird.
  • Wenn in einer CU innerhalb der App keine Kampagnen gebucht sind, wird die Platzierung übersprungen, und der Benutzer wird zur darauffolgenden Seite der Publikation geführt.
  • Eine Kampagne kann nicht auf eine bestimmte Ausgabe Ihrer Publikation beschränkt werden. Sobald sie in einer CU gebucht ist, wird sie während des gebuchten Zeitraums in allen auf der App verfügbaren Ausgaben angezeigt.
  • Interstitials werden nur angezeigt, wenn das Gerät online ist
  • Visiolink lässt zu, dass ein Interstitial den gesamten Bildschirm einschließlich der Kontrolle von Bewegungen übernimmt. Um zu verhindern, dass der Leser bei einem Interstitial hängenbleibt, das die Wischbewegung übernommen hat, die normalerweise verwendet wird, um zur nächsten/vorherigen Seite zu blättern, haben wir drei verschiede Umblätter-Optionen eingebaut:
    • Kantenwischen: Durch Wischen von der Kante des Geräts zum Bildschirm blättern Sie zur nächsten/vorherigen Seite, siehe Abbildung 2
    • Pfeile: Durch drücken der Pfeile auf der linken oder rechten Seite blättern Sie zur nächsten/vorherigen Seite. Die Pfeile werden jedes Mal angezeigt, wenn der Leser innerhalb der App wischt, siehe Abbildung 2
    • Mehrfaches Wischen (nur iOS): Wenn innerhalb von zwei Sekunden drei Mal in die gleiche Richtung gewischt wird, wird auf die nächste/vorherige Seite umgeblättert, da dieses Verhalten anzeigt, dass der Leser die Botschaft der Anzeigen nicht mehr aufnimmt und eher daran interessiert ist umzublättern.

 

Abbildung 2

 

2.0 HTML5 Anzeigenansicht über die Cxense Mobile SDK

Die Cxense Mobile SDK verarbeitet HTML-Interstitials, die auf Smartphones und Tablets als Vollbild sowie im Quer- und Hochformat angezeigt werden. Der Ersteller des Interstitials ist dafür verantwortlich sicherzustellen, dass dieses reagiert und auf Bildschirmen aller Größen und in beiden Ausrichtungen wie gewünscht dargestellt wird.

Wenn ein Interstitial angezeigt werden soll, fordert die App die Cxense SDK auf, die in der CU gebuchte Anzeige zu schalten, die der folgenden Platzierung in der App entspricht. Ist eine aktive Kampagne verfügbar, öffnet sich eine In-App-Cxense-Web-Ansicht, und die Kontrolle wird an die Logik innerhalb der HTML-Anzeige übergeben.

Die Anzeige erscheint als Vollbild, d. h. Sie haben alle regulären Möglichkeiten zur Nutzung des Vollbilds wie bei einer normalen Webseite. In der Web-Ansicht gibt es keine Einschränkungen. Dementsprechend gelten die Best Practices zur allgemeinen Webentwicklung . Wenn Links in der Anzeige aktiviert sind, wird der Benutzer in einer „Pop-Over“-Browser-Ansicht auf die Angebotsseite geführt, die wieder geschlossen werden kann, um zur Anzeige zurückzukehren.

Die iOS SDK ist mit MRAID kompatibel. Die Android SDK ist noch nicht mit MRAID kompatibel.

Bitte beachten Sie, dass wir für Android 4.3 und ältere Versionen den Einsatz von statischen Anzeigen als Alternative/Fallback empfehlen, da diese Android-Versionen nicht für alle HTML5-Elemente geeignet sind. 

2.1 SDK-Vorabladen und „Polite Load“ (HTML5)

Die SDK und die Visiolink-App laden Ihre nächste Anzeige vorab auf das Gerät des Benutzers, um den Fluss und das Schalten der Anzeige zu beschleunigen. Doch bei großen HTML5-Anzeigen kann es trotz Vorabladen zu Verzögerungen kommen, bis die Web-Ansicht dargestellt wird. Für eine zusätzliche Optimierung können Sie die „Polite-Load“-Funktion zu Ihrer Anzeige hinzufügen, bevor die Anzeige vollständig dargestellt soll. „Polite Load“ lässt sich so einrichten, dass die Anzeige zunächst als statisches Bild und erst danach mit den umfangreichen Animationen und Videoelementen dargestellt wird. 

Häkchen zum Starten und Stoppen von Animationen (nur iOS)

Sollen in Ihrer Anzeige Animationen starten, wenn der Benutzer die Anzeige sieht, stellt Visiolink eine Java-Script-Funktion zur Verfügung, die Sie in Ihre Anzeige integrieren können:

vl_adview_will_appear();

Um sicherzustellen, dass Animationen stoppen, wenn der Benutzer die Anzeige verlassen hat, setzen Sie bitte dieses Häkchen: 

vl_adview_did_disappear();

Dieses Häkchen ist besonders hilfreich, wenn Anzeigen mit Audio durchgeführt werden, da Sie damit sicherstellen können, dass das Audio-Element stoppt, sobald der Benutzer die Anzeige verlässt.

2.2 Erfassen von Klicks und Tracking

Für das korrekte Erfassen von Klicks und das Tracking muss das Cxense-Klick-Makro korrekt in das Interstitial eingebaut werden.

Cxense-Klick-Makro: EASLink=

Beispiel für die Verwendung des Cxense-Klick-Makros in einem HTML5-Banner:
<a href=”EASLink=http://yourhomepage.com”>Go to homepage</a>

oder mit JavaScript

window.open (’EASLink=http://yourhomepage.com’);

Falls Sie die Weiterleitung auf Ihre Homepage/Ziel-URL auf eine andere Weise einrichten, setzen Sie einfach EASLink= vor der URL ein.

2.3 Einrichten des Cxense-Displays zum Buchen von Interstitials

Um das Anzeigen von HTML-Interstitials in Ihren ePaper-Apps vorzubereiten, gehen Sie wie folgt vor:

  • Erstellen Sie bis zu fünf einzelne Content Units für feste Platzierungen
    • Benennen Sie diese CUs logisch gemäß der Platzierung in der App, z. B. „ZeitungTitel_S1“, „ZeitungTitel_S5“ usw.
  • Erstellen Sie eine CU für häufigkeitsgesteuerte Interstitials
  • Hinweis: Bei der Erstellung der CUs werden Sie aufgefordert, die Höhe und Breite der CU anzugeben. Falls Sie ausschließlich HTML-Anzeigen erstellen möchten, ist die Größe irrelevant, da die Skalierung von der Anzeige kontrolliert wird. Stellen Sie die Größe z. B. auf 1x1 px ein (es ist wichtig, dass Sie beim Erstellen von Kampagnen die gleiche Größe verwenden, da CU-Größe und Kampagnengröße übereinstimmen müssen).
  • Sie müssen an Visiolink die ID-Nummer (vier oder fünf Ziffern) jeder CU und die entsprechenden Seitenzahlen (nur ungerade Zahlen) übermitteln, nach denen Sie die CUs platzieren möchten.

Bei Visiolink verwenden wir JavaScript-Tags zum Erstellen von Anzeigen. Nachfolgend finden Sie eine Anleitung, in der die einzelnen Schritte zum Buchen eines JavaScript-Tags für die Interstitial-Anzeige erläutert werden.

  • Erstellen einer neuen Kampagne
    • Benennen der Kampagne
    • Geben Sie ein Anfangsdatum („First date“) und ein Enddatum („Last date“) an, um den Zeitraum festzulegen, in dem die Kampagne aktiv sein sollte
    • Das „Priority Level“ muss „Available impressions“ sein
    • Der Typ sollte „Banner“ sein
    • Die Größe muss der Größe der Content Unit entsprechen, die Sie in dieser Kampagne verwenden möchten
    • Klicken Sie auf „Add“ (Hinzufügen).

 

Abbildung 3

  • Jetzt können Sie der Kampagne ein „Creative“ hinzufügen
    • Klicken Sie auf „Add creatives“
    • Klicken Sie im nächsten Bild auf „[HTML]“
    • Klicken Sie im nächsten Bild auf „Paste in your own HTML content“ (Eigene HTML-Inhalte einfügen)
    • In diesem Fenster müssen Sie das JS-Tag in dieses einfache HTML einbetten und das JS-Tag im <div>-Tag platzieren.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--cx autoScale=false; --> DIESER KOMMENTAR IST FÜR DIE KORREKTE ANZEIGE VON INTERSTITIALS WICHTIG
<html>
<head>
<style type="text/css">
html, body
{

    padding: 0px;

    left: 0px;

}
</style>
</head>
<body>

    <div>

JS-TAG HIER PLATZIEREN

    </div>
</body>
</html>

 

Abbildung 4

  • Klicken Sie auf „Update“ (Aktualisieren).
  • Klicken Sie auf „Commit“ (Übertragen).

Sie können Ihre Kampagne nun in der Übersicht unter „Advertising -> View Campaign“ sehen, und von hier aus müssen Sie die Kampagne zur gewünschten CU hinzufügen. Außerdem müssen Sie den Status der Kampagne von „Waiting for Approval“ zu „Approved“ ändern

Nun kann die Kampagne ab dem Anfangsdatum der Kampagne in der App durchgeführt werden.

 

2.4 Beispiele für JS-Tags

Nachfolgend finden Sie zwei Beispiele für JavaScript-Tags, die zwei verschiedene HTML-Anzeigen ausführen. Die Tags enthalten Bilddateien sowohl für Tablets als auch Smartphones im Hoch- und im Querformat. Außerdem enthalten sie Logik, die den Gerätetyp (anhand der Bildschirmgröße) und die Ausrichtung des Geräts feststellt.

Beispiel für eine Responsive-Image-Anzeige:

<script type="text/javascript" src="http://pool.static.onads.dk/static/20120/banner.php?bnid=30fa2200740b901d1ca9f5f5270dbcc4&clickTAG=EASLink=&landingUrl=http%3A%2F%2Fonads.dk"></script>

 

Beispiel für einen 3D-Kubus mit bis zu vier Seiten:

<script type="text/javascript" src="http://pool.static.onads.dk/static/20124/banner.php?bnid=a17cb1e456aa58774f202a326f7c280e&clickTAG=EASLink=&landingUrl=http%3A%2F%2Fonads.dk"></script>

War dieser Beitrag hilfreich?
0 von 0 fanden dies hilfreich
Haben Sie Fragen? Anfrage einreichen

Kommentare