AdUp Technology

Contact

+49 (0) 40 350 1698-199

Interested or any questions? Contact us!

© 2019 Axel Springer Teaser Ad GmbH

Responsive-Ads

Voraussetzung

Damit Sie AdUp Werbemittel auf Ihrer Webseite verwenden können, müssen Sie eine Seite, sowie ein entsprechenden Anzeigenblock in Ihrem Publisher-Account angelegt haben.

Mehr dazu finden Sie auf der Seite FAQ für Publisher.

Damit sich Responsive-Ads korrekt verhalten, sollte darauf geachtet werden, dass im

Anzeigenblock-Layout-Formular die "Art der Einbindung" auf "Responsive-Ads" gesetzt ist.

Funktionsweise

Das Werbemittel wird innerhalb einem iFrames an der Stelle auf Ihrer Webseite geladen, an der Sie unseren Einbindungscode bzw. den Platzhalter-HTML-Container positionieren. Die Anzahl und das Design der Anzeigen können von Ihnen über das Anzeigenblock-Layout-Formular im Publisher-Frontend frei konfiguriert werden.

Im Gegensatz zu Static-Ads ist es jedoch wichtig, dass Sie der umgebenden HTML-Container korrekte Höhen- & Breiten-Angaben besitzt, da sich unsere Werbeanzeigen später dynamisch danach ausrichten. Responsive-Ads bieten sich daher insbesondere für Webseiten an, die für unterschiedliche Bildschirmgrößen optimiert sind. 

Sollte die Größe des umgebenden HTML-Containers nicht ausreichen, sodass die Werbeanzeigen mit Ihrem ursprünglich konfigurierten Design nicht passen, dann versucht unsere Responsive-Logik automatisch diese passend zu modifizieren:

  • Texte oder Elemente werden kleiner skaliert

  • Einzelne Elemente werden ausgeblendet (z.B. Anzeigenlink, Button oder Bild)

  • Anzeigen werden innerhalb des Anzeigenblocks anders angeordnet

Einbindungsarten

Es gibt zwei Möglichkeiten Responsive-Ads auf Ihrer Webseite einzubinden.

Im Gegensatz zu Static-Ads ist es für Responsive-Ads ist wichtig, dass der umgebende HTML-Container immer korrekte Höhen- und Breiten-Angaben besitzt, da sich unsere Werbeanzeigen später danach ausrichten!

Asynchron (Empfohlen)

Durch die asynchrone Einbindung wird Ihre Webseite unabhängig vom Werbeaufruf unserer Anzeigen geladen. Zunächst platzieren Sie die gewünschten HTML-Container an den Stellen auf Ihrer Website, an denen  Werbeanzeigen erscheinen sollen. Die Container müssen eine eindeutige ID sowie korrekt Höhen- Breiten-Angaben besitzen. Anschließend wird unsere Auslieferungs-API einmalig und asynchron mittels dynamischem <script>-Tag geladen. Sobald die API fertig geladen ist, wird eine globale Callback-Funktion ausgeführt, in welcher Ihre eigentliche Einbindungslogik hinterlegt ist.

Diese Art der Einbinung bietet sich besonders dann an, wenn Sie mehrere AdUp Werbemittel auf Ihrer Seite platzieren möchten. Durch die programmatische Definition der Werbeblöcke stehen Ihnen hier außerdem auch verschiedene Events zur Verfügung, auf die Sie entsprechende reagieren können (z.B. "onClick" oder "onNoAds").

Synchron

Bei der synchronen Einbindung wird zunächst ein <div>-Tag mit den gewünschten Breiten- und Höhen-Angaben an der Stelle Ihrer Webseite platziert, an der das Werbemittel erscheinen soll. Innerhalb des <div>-Tags wird ein <script>-Tag mit den entsprechenden URL-Parametern platziert. Beim Laden Ihrer Webseite wird das Script dann automatisch (synchron) ausgeführt und erstellt an der entsprechenden Position einen iFrame mit unseren Werbeanzeigen. 

Dies ist die einfachste Art AdUp Werbemittel einzubinden. Durch die Definition des Werbeblocks per URL-Parameter stehen Ihnen hier im Gegensatz zur asynchronen Einbindung jedoch nicht alle Optionen zur Verfügung.

 

Erforderliche Parameter

Name

Beschreibung

Beispiel

placementkey

Der eindeutige Placement-Key ihres Anzeigenblocks.

Asynchron (programmatisch)

Synchron (URL-Parameter)

responsive

Aktiviert/Deaktiviert das Responsive-Ads-Feature für den Anzeigenblock.

Hinweis: Für "Responsive-Ads" in der asyncrhonen Einbindung muss der Parameter immer auf "true" gesetzt werden!

Asynchron (programmatisch)

Synchron (URL-Parameter)

 

Optionale Parameter

Name

Beschreibung

Beispiel

query

Keywords, nach denen die Anzeigen gefiltert werden sollen. Mehrere Keywords können durch Semikolon getrennt werden.

Asynchron (programmatisch)

Synchron (URL-Parameter)

mincpc

Dies ist der Preis, den Sie für einen Klick mindestens verdienen wollen.

Generell gilt, je niedriger der Minimumpreis, desto mehr Kampagnen werden Ihnen vorgelegt und desto mehr Geld können Sie aufgrund des größeren Wettbewerbs auf der Position verdienen. 

Asynchron (programmatisch)

Synchron (URL-Parameter)

pageurl

Die aktuelle URL der Seite, auf der die Werbung ausgespielt wird.

Sollte immer dann gesetzt werden, wenn unser Werbemittel innerhalb eines oder mehrerer verschachtelter iFrames auf Ihrer Seite eingebunden ist, da dann unter Umständen die Url von uns nicht mehr ermittelt werden kann.

Asynchron (programmatisch)

Synchron (URL-Parameter)

skip

Anzahl der Anzeigen, die bei der Auslieferung übersprungen werden sollen. Nützlich wenn Sie mehrere Werbemittel auf einer Seite platzieren.

Synchron (URL-Parameter)

Asynchron (programmatisch)

lazy

Aktiviert das "Lazy Loading"-Feature.
Das bedeutet, dass das Werbemittel erst geladen (und somit auch erst die Impression getrackt) wird, sobald es im für den User sichtbaren Bereich der Seite ist.

Asynchron (programmatisch)

Synchron (URL-Parameter)

lazyoffset

Standardmäßig werden beim "Lazy-Loading" unsere Werbemittel erst angezeigt, wenn diese für den Benutzer sichtbar sind.

Mithilfe der Option "lazyoffset" haben Sie zusätzlich die Möglichkeit einen Versatz (in Pixel) zu definieren. Unsere Werbemittel laden so bereits etwas früher, sobald diese in der „Nähe“ des sichtbaren Bereiches sind.

Asynchron (programmatisch)

Synchron (URL-Parameter)

placeholdervalues

Hier können Werte für Dynamic-Ads  Platzhalter übergeben werden.

Asynchron (programmatisch)

Synchron (URL-Parameter)

flyin

Aktiviert das "Fly-In-Ads"-Feature für den Anzeigenblock.

Weitere Informationen und Optionen dazu finden Sie in der Dokumentation zu Fly-In-Ads.

Asynchron (programmatisch)

Synchron (URL-Parameter)

adtest

Impressions und Klicks werden nicht getrackt, wenn aktiviert. Sollte nur für Testzwecke verwendet werden!

Asynchron (programmatisch)

Synchron (URL-Parameter)

 

Events / Callbacks

Name

Beschreibung

Beispiel

onClick

Wird automatisch aufgerufen wird, sobald eine Werbeanzeige angeklickt wurde. Als erster (und einziger) Parameter wird der Rang der Anzeige innerhalb des Werbemittels zurückgegeben.

Asynchron (programmatisch)

Synchron (URL-Parameter)

onResize

Wird automatisch aufgerufen wird, sobald sich die Größe des Werbemittels ändert (z.B. bei Advertorial-Ads). Als erster Parameter wird wird neue Breite und als zweiter Parameter die neue Höhe zurückgegeben.

Asynchron (programmatisch)

Synchron (URL-Parameter)

onAds

Wird automatisch aufgerufen wird, sobald das Werbemittel erfolgreich geladen wurde. Als erster (und einziger) Parameter wird die Container-ID zurückgegeben.

Asynchron (programmatisch)

Synchron (URL-Parameter)

onNoAds

Wird automatisch aufgerufen wird, sobald das Werbemittel nicht ausgespielt werden konnte. Als erster (und einziger) Parameter wird die Container-ID zurückgegeben.

Asynchron (programmatisch)

Synchron (URL-Parameter)

 

Beispiele

Einfaches Beispiel für eine asynchrone Einbindung

Völlig ausreichend wenn der Einbindungscode an nur einer Stelle auf Ihrer Seite platziert werden soll.

Schritt 1

Erstellen Sie zuerst die <div>-Container mit eindeutigen IDs und korrekten Höhen- und Breiten-Angaben an den Stellen im <body>-Bereich Ihrer Webseite, an denen die Werbeanzeigen geladen werden sollen.

Die Containergrößen können entweder direkt per Inline-Style-Attribut ...

Tipp: Verwenden Sie zusätzlich CSS-Media-Queries um unterschiedliche Containergrößen basierend auf der aktuellen Größe des Browserfensters bzw. Endgerätes zu definieren.

... oder vorher per CSS-Definition innerhalb eines <style>-Tags gesetzt werden.

Schritt 2

Laden Sie unsere Auslieferungs-API und initialisieren Sie den Callback "window.uAd_init" einmalig am Ende Ihrer Seite. Innerhalb des Callbacks haben Sie nun die Möglichkeit die Werbemittel mit Hilfe der "window.uAd.embed" Methode und den gewünschten Parametern zu konfigurieren.

Erweitertes Beispiel für eine asynchrone Einbindung

Hierbei wird die Logik aus dem (obigen) einfachen Beispiel in eine Funktion mit dem Namen "adup" ausgelagert. Diese kümmert sich darum, dass unsere Auslieferungs-API nur einmalig geladen wird. Als Parameter wird eine Callback-Funktion mit Ihrer gewünschten Einbindungslogik übergeben, welche automatisch ausgeführt wird sobald die API bereit ist. Dies ist besonders dann Nützlich wenn Sie beispielsweise mehrere Werbemittel an unterschiedlichen Stellen auf Ihrer Seite verbaut haben und/oder Werbemittel erst während der Laufzeit auf ihrer Seite platziert werden sollen.

Schritt 1

Platzieren Sie folgenden Code in den <head>-Bereich Ihrer Webseite.

Schritt 2

Platzieren Sie die <div>-Container mit eindeutigen IDs und korrekten Höhen- und breiten-Angaben an den Stellen im <body>-Bereich Ihrer Webseite, an denen die Werbeanzeigen geladen werden sollen und binden diese anschließend unter Verwendung der globalen Funktion "adup" und den gewünschten Parametern ein.

Die Containergrößen können entweder direkt per Inline-Style-Attribut ...

... oder vorher per CSS-Definition innerhalb eines <style>-Tags gesetzt werden.

Tipp: Verwenden Sie zusätzlich CSS-Media-Queries um unterschiedliche Containergrößen basierend auf der aktuellen Größe des Browserfensters bzw. Endgerätes zu definieren.

Beispiel für eine synchrone Einbindung

Fügen Sie die <div>-Tags mit korrekten Höhen- und Breiten-Angaben inklusive der <script>-Tags mit den gewünschten URL-Parametern an der Stellen im <body>-Bereich auf Ihrer Seite ein, an der die Werbemittel angezeigt werden sollen.

Die Containergrößen können entweder direkt per Inline-Style-Attribut ...

... oder vorher per CSS-Definition innerhalb eines <style>-Tags gesetzt werden.

Tipp: Verwenden Sie zusätzlich CSS-Media-Queries um unterschiedliche Containergrößen basierend auf der aktuellen Größe des Browserfensters bzw. Endgerätes zu definieren.

 

Problemlösungen

Das Responsive-Werbemittel ist zu klein, zu groß, wird nicht angezeigt oder überlappt andere Elemente.

  • Der HTML-Container besitzt keine expliziten Größenangaben, diese werden jedoch benötigt

  • Es befinden sich neben dem Script-Tag noch andere Elemente innerhalb des HTML-Containers

Es werden weniger Anzeigen über Responsive-Ads ausgespielt als über die Static-Ads bzw. die Anzahl der Anzeigen stimmen nicht überein.

  • Die "Art der Einbindung" im Anzeigenblock-Layout-Formular wurde nicht auf "Responsive-Ads" gesetzt

  • Die "Anzahl der Anzeigen" im Anzeigenblock-Layout-Formular wurde nicht korrekt konfiguriert

Die Responsive-Werbeanzeigen werden in mobilen Browsern (Smartphones/Tablets) nicht korrekt dargestellt.

  • Damit unsere "Responsive-Ads" auch in mobilen Browsern lesbar sind ist es notwendig, dass auf Ihrer Webseite der Meta-Tag "viewport"  korrekt gesetzt ist

Das Layout der Werbeanzeigen (Zeilen/Spalten) stimmt nicht mit dem vorkonfigurierten Layout überein.

  • Die Responsive-Logik entscheidet selbst welches Layout anhand der aktuellen Größe des HTML-Containers am besten passt und versucht immer das Layout mit der größten Schriftgröße und dem größten Anzeigenbild (sofern vorhanden) anzuzeigen

Die angezeigte Schriftgröße stimmt nicht mit der vorkonfigurierten Schriftgröße überein

  • Die Schriftgröße wird automatisch kleiner skaliert sobald die Werbeanzeige mit der konfigurierten Schriftgröße nicht in den gegebenen HTML-Container passt

  • Damit unsere "Responsive-Ads" auch in mobilen Browsern lesbar sind ist es notwendig, dass auf Ihrer Webseite der Meta-Tag "viewport"  korrekt gesetzt ist

Die Anzeigenbilder sind zu klein oder füllen nicht den verfügbaren Platz

  • Je nach ausgewähltem Layout skalieren die Anzeigenbilder immer proportional mit der Höhe bzw. Breite der Werbeanzeige, wobei das Seitenverhältnis immer beibehalten wird

  • Die Anzeigenbilder werden jedoch nie größer skaliert, als die im Anzeigenblock-Layout-Formular vorkonfigurierte (maximal-) Bildgröße

Anzeigenbilder, Texte oder Links werden nicht angezeigt

  • Sollte der HTML-Container so klein sein, dass selbst das kleiner skalieren der Texte nicht ausreicht um die Werbeanzeige vernünftig darzustellen, dann versucht unsere Responsive-Logik im letzten Schritt einzelne Elemente (Link, Text, Button oder Anzeigenbild) auszublenden um Platz zu sparen

  • Das Layout Ihres Anzeigenblocks sollte in diesem Fall grundsätzlich platzsparender designed werden (z.B. kleinere Schriftgrößen oder Abstände)