Einbau

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&param2=value2...">
    </script>
</div>

Erforderliche Parameter

Name Beschreibung Beispiel
placementkey

Der eindeutige Placement-Key ihres Anzeigenblocks.

Asynchron (programmatisch)
placementkey: "dd9e2c6e8a1ec4bc5d1561564fcf946d"
Synchron (URL-Parameter)
placementkey=dd9e2c6e8a1ec4bc5d1561564fcf946d
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)
responsive: true
Synchron (URL-Parameter)
// nicht verfügbar

Optionale Parameter

Name Beschreibung Beispiel
query

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

Asynchron (programmatisch)
// string
query: "Mallorca;Flug"

// array
query: ["Mallorca", "Flug"]
Synchron (URL-Parameter)
query=Mallorca;Flug
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)
mincpc: 0.15
Synchron (URL-Parameter)
mincpc=0.15
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)
pageurl: "http://www.example.com"
Synchron (URL-Parameter)
pageurl=http%3A%2F%2Fwww.example.com
skip

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

Asynchron (programmatisch)
skip: 2
Synchron (URL-Parameter)
skip=2
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)
lazy: true
Synchron (URL-Parameter)
lazy=1
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)
lazyoffset: 500
Synchron (URL-Parameter)
lazyoffset=500
placeholdervalues

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

Asynchron (programmatisch)
placeholdervalues: {
    "destination": "Paris",
    "price": "299,99€"
}
Synchron (URL-Parameter)
// nicht verfügbar
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)
flyin: true
Synchron (URL-Parameter)
flyin=1
adtest

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

Asynchron (programmatisch)
adtest: true
Synchron (URL-Parameter)
adtest=1
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)
gdpr: true,
gdpr_consent:"[CONSENT_STRING]"
Synchron (URL-Parameter)
gdpr=1&gdpr_consent=[CONSENT_STRING]

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)
onClick: function(rank) {
    console.log("ad " + rank + " clicked");
}
Synchron (URL-Parameter)
// nicht verfügbar
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)
onResize: function(width, height) {
    console.log("new size is " + width + "x" + height);
}
Synchron (URL-Parameter)
// nicht verfügbar
onAds

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

Asynchron (programmatisch)
onAds: function(id) {
    console.log("ads for " + id);
}
Synchron (URL-Parameter)
// nicht verfügbar
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)
onNoAds: function(id) {
    console.log("no ads for " + id);
}
Synchron (URL-Parameter)
// nicht verfügbar

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)