Wie verbaue ich einen responsive Anzeigenblock?_
Damit du AdUp Werbemittel auf deiner Webseite verwenden kannst, musst du deine Seite sowie ein entsprechenden Anzeigenblock in deinem Publisher-Account angelegt haben.
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 deiner Webseite geladen, an der du unseren Einbindungscode bzw. den Platzhalter-HTML-Container positionierst. Die Anzahl und das Design der Anzeigen können von dir ü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 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 deine Webseite unabhängig vom Werbeaufruf unserer Anzeigen geladen. Zunächst platzierst du die gewünschten HTML-Container an den Stellen auf deiner 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 die eigentliche Einbindungslogik hinterlegt ist.
Diese Art der Einbinung bietet sich besonders dann an, wenn du mehrere AdUp Werbemittel auf deiner Seite platzieren möchtest. Durch die programmatische Definition der Werbeblöcke stehen hier außerdem auch verschiedene Events zur Verfügung, auf die sie entsprechend reagieren können (z.B. "onClick" oder "onNoAds").
<!-- 1. Definieren des HTML-Container mit einer eindeutigen ID
und korrekter Höhe- & Breite -->
<div id="adup1" style="width:90%;height:200px;">
<!-- 2. Laden unserer Javascript-API und Ersetzen des HTML-Platzhalters durch
die gewünschten Werbemittel im Callback sobald die API verfügbar ist -->
<script type="text/javascript">
window.uAd_init = function() {
window.uAd.embed("adup1", {
param1: "value1",
param2: "value2"
...
});
};
if (typeof window.uAd === "object") window.uAd_init();
else (function(d, t) {
var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
g.src = "https://s.d.adup-tech.com/jsapi";
g.async = true;
s.parentNode.insertBefore(g, s);
}(document, "script"));
</script>Synchron
Bei der synchronen Einbindung wird zunächst ein <div>-Tag mit den gewünschten Breiten- und Höhen-Angaben an der Stelle deiner Webseite platziert, an der das Werbemittel erscheinen soll. Innerhalb des <div>-Tags wird ein <script>-Tag mit den entsprechenden URL-Parametern platziert. Beim Laden deiner 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 hier im Gegensatz zur asynchronen Einbindung jedoch nicht alle Optionen zur Verfügung.
<!-- Das gewünschte Werbemittel erscheint an der Stelle Ihrer Website,
an der Sie dieses Script positionieren -->
<div style="width:90%;height:200px;">
<script type="text/javascript"
src="https://s.d.adup-tech.com/ads/responsive.js?param1=value1¶m2=value2...">
</script>
</div>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 "Static-Ads" in der asyncrhonen Einbindung muss der Parameter immer auf "false" 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. | Asynchron (programmatisch) Synchron (URL-Parameter) |
| 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) |
| gdpr gdpr_consent | Im Normalfall ermitteln wir die erforderlichen GDPR-Daten automatisch über die auf der Website verbauten TCF API. Sollte diese nicht vorhanden sein, oder es aus technischen Gründen nicht möglich sein diese zu verwenden, dann haben Sie hier die Möglichkeit die GDPR-Daten manuell zu übergeben. gdpr true bzw. 1 = GDPR gilt false bzw. 0 = GDPR gilt nicht null bzw. (weglassen) = Unbekannt (Standard) gdpr_consent Der IAB Consent String (base64url-encoded) | 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) |
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 deiner 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 deiner 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)