Einbau

Wie verbaue ich einen responsive Anzeigenblock?_

10. März 2026

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 Key Ihres Placements.	Asynchron (JSON) `placementkey: "dd9e2c6e8a1ec4bc5d1561564fcf946d"` Synchron (URL-Parameter) `placementkey=dd9e2c6e8a1ec4bc5d1561564fcf946d`

Optionale Parameter

Name	Beschreibung	Beispiel
responsive	Aktiviert das Responsive-Ads-Feature für den Anzeigenblock.	Asynchron (JSON) `responsive: true` Synchron (URL-Parameter) `// nicht verfügbar`
query	Keywords, nach denen die Anzeigen gefiltert werden sollen. Mehrere Keywords können durch Semikolon getrennt werden.	Asynchron (JSON) `// 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 (JSON) `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 eingebunden ist, und dadruch unter Umständen die URL von AdUp nicht mehr ermittelt werden kann	Asynchron (JSON) `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 und doppelte bzw. sich wiederholende Anzeigen zu vermeiden wollen.	Asynchron (JSON) `skip: 2` Synchron (URL-Parameter) `skip=2`
lazy	Aktiviert das "Lazy Loading"-Feature. Das bedeutet, dass die Anzeige erst geladen (und somit auch die Impression erst getrackt) wird, sobald diese im für den User sichtbaren Bereich der Seite ist.	Asynchron (JSON) `lazy: true` Synchron (URL-Parameter) `lazy=1`
lazyoffset	Standardmäßig werden die Anzeigen beim "Lazy-Loading" 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. Die Anzeigen laden so bereits etwas früher, sobald diese in der „Nähe“ des sichtbaren Bereichs kommen.	Asynchron (JSON) `lazyoffset: 500` Synchron (URL-Parameter) `lazyoffset=500`
colormode	Standardmäßig basiert der für die Platzierung verwendete Farbmodus auf dem vom Benutzer definierten Farbschema des Betriebssystems (Hell/Dunkel) – nicht auf dem Designmodus der jeweiligen Website. Wenn eine Website selbst keinen nativen Dunkelmodus unterstützt, kann eine speziell dafür konfigurierte Platzierung auf einer hellen Seite optisch unpassend wirken. Hier haben Sie die Möglichkeit, einen Farbmodus zu erzwingen: auto (Standard) light dark	Asynchron (JSON) `colormode: "light"` Synchron (URL-Parameter) `colormode=light`
placeholdervalues	Hier können Werte für Dynamic-Ads Platzhalter übergeben werden.	Asynchron (JSON) `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 (JSON) `flyin: true` Synchron (URL-Parameter) `flyin=1`
adtest	Impressions und Klicks werden nicht getrackt, wenn aktiviert. Sollte nur für Testzwecke verwendet werden!	Asynchron (JSON) `adtest: true` Synchron (URL-Parameter) `adtest=1`
gdpr	Im Normalfall ermitteln wir die erforderlichen GDPR Informationen 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. true bzw. 1 = GDPR gilt false bzw. 0 = GDPR gilt nicht	Asynchron (JSON) `gdpr: true` Synchron (URL-Parameter) `gdpr=1`
gdpr_consent	Im Normalfall ermitteln wir die erforderlichen GDPR Informationen 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 den IAB Consent String (base64url-encoded) zu übergeben.	Asynchron (JSON) `gdpr_consent:"[CONSENT_STRING]"` Synchron (URL-Parameter) `gdpr_consent=[CONSENT_STRING]`

Events / Callbacks

Name	Beschreibung	Beispiel
onAds	Wird automatisch aufgerufen, sobald das Werbemittel erfolgreich geladen wurde. Als Parameter wird die eindeutige Container-ID des Placements übergeben.	Asynchron (JSON) `onAds: function(id) { console.log("ads for " + id); }` Synchron (URL-Parameter) `// nicht verfügbar`
onNoAds	Wird automatisch aufgerufen, sobald das Werbemittel nicht ausgespielt werden konnte. Als Parameter wird die eindeutige Container-ID des Placements übergeben.	Asynchron (JSON) `onNoAds: function(id) { console.log("no ads for " + id); }` Synchron (URL-Parameter) `// nicht verfügbar`
onClick	Wird automatisch aufgerufen, sobald eine Anzeige geklickt wurde. Als Parameter wird der Rang der geklickten Anzeige innerhalb des Werbemittels übergeben.	Asynchron (JSON) `onClick: function(rank) { console.log("ad " + rank + " clicked"); }` Synchron (URL-Parameter) `// nicht verfügbar`
onResize	Wird automatisch aufgerufen, sobald sich die Größe des Werbemittels ändert. Als Parameter wird die neue Größe des Werbemittels übergeben.	Asynchron (JSON) `onResize: function(width, height) { console.log("new size is " + width + "x" + height); }` Synchron (URL-Parameter) `// nicht verfügbar`

FAQ

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)