Wie verbaue ich einen responsive Anzeigenblock?

Damit du AdUp-Werbemittel auf deiner Webseite anzeigen kannst, musst du zunächst:

1. deine Webseite im Publisher-Account angelegt haben

2. einen Anzeigenblock erstellt haben

3. im Layout die Einbindungsart „Responsive-Ads“ ausgewählt haben

Responsive-Anzeigenblöcke passen sich automatisch an unterschiedliche Bildschirmgrößen an und eignen sich daher besonders für moderne, mobile-optimierte Webseiten.

So funktionieren Responsive-Ads

AdUp-Werbemittel werden innerhalb eines iFrames an der gewünschten Position deiner Webseite geladen. Die Größe und Anordnung der Anzeigen orientiert sich dabei an dem HTML-Container, den du auf deiner Seite definierst.

Wichtig ist deshalb:

Der umgebende HTML-Container benötigt immer eine gültige Breiten- und Höhenangabe.

Nur so kann unsere Responsive-Logik die Anzeige korrekt skalieren und optimieren.

Falls der verfügbare Platz kleiner ausfällt als das ursprünglich konfigurierte Layout, passt AdUp die Anzeige automatisch an. Dabei können beispielsweise:

• Schriftgrößen reduziert werden

• einzelne Elemente ausgeblendet werden

• Anzeigen anders angeordnet werden

• Bilder oder Buttons verkleinert werden

Dadurch bleiben die Werbemittel auch auf kleineren Geräten sauber dargestellt.

Verfügbare Einbindungsarten

Responsive-Anzeigenblöcke können auf zwei Arten eingebunden werden:

• Asynchron (empfohlen)

• Synchron

Die asynchrone Einbindung bietet die beste Performance und sollte bevorzugt verwendet werden.

Asynchrone Einbindung (empfohlen)

Bei der asynchronen Einbindung wird die Webseite unabhängig vom Laden der Werbung dargestellt. Dadurch verbessert sich die Ladezeit deiner Seite.

Die Einbindung erfolgt in zwei Schritten:

1. HTML-Container auf der Webseite definieren

2. AdUp-JavaScript-API asynchron laden

Diese Methode eignet sich besonders, wenn:

• mehrere Anzeigenblöcke auf einer Seite verwendet werden

• Events wie onClick oder onNoAds genutzt werden sollen

• maximale Performance gewünscht ist

Schritt 1: HTML-Container erstellen

Platziere zunächst einen Container mit eindeutiger ID sowie definierter Höhe und Breite:

<div id="adup1" style="width:100%;height:250px;"></div>

<div id="adup1" style="width:100%;height:250px;"></div>

<div id="adup1" style="width:100%;height:250px;"></div>

Alternativ kannst du die Größenangaben auch per CSS definieren:

<style>
#adup1 {
    width: 100%;
    height: 250px;
}
</style>

<div id="adup1"></div>

<style>
#adup1 {
    width: 100%;
    height: 250px;
}
</style>

<div id="adup1"></div>

<style>
#adup1 {
    width: 100%;
    height: 250px;
}
</style>

<div id="adup1"></div>

Schritt 2: AdUp API laden und Anzeigenblock einbinden

<script>
window.uAd_init = function() {
    window.uAd.embed("adup1", {
        placementKey: "DEIN_PLACEMENT_KEY",
        responsive: true
    });
};

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>

<script>
window.uAd_init = function() {
    window.uAd.embed("adup1", {
        placementKey: "DEIN_PLACEMENT_KEY",
        responsive: true
    });
};

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>

<script>
window.uAd_init = function() {
    window.uAd.embed("adup1", {
        placementKey: "DEIN_PLACEMENT_KEY",
        responsive: true
    });
};

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>

Wichtige Parameter

Beispiel mit mehreren Anzeigenblöcken

<div id="adup1" style="width:100%;height:250px;"></div>
<div id="adup2" style="width:300px;height:600px;"></div>

<script>
window.uAd_init = function() {
    window.uAd.embed("adup1", {
        placementKey: "PLACEMENT_1",
        responsive: true
    });

    window.uAd.embed("adup2", {
        placementKey: "PLACEMENT_2",
        responsive: true
    });
};

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>

<div id="adup1" style="width:100%;height:250px;"></div>
<div id="adup2" style="width:300px;height:600px;"></div>

<script>
window.uAd_init = function() {
    window.uAd.embed("adup1", {
        placementKey: "PLACEMENT_1",
        responsive: true
    });

    window.uAd.embed("adup2", {
        placementKey: "PLACEMENT_2",
        responsive: true
    });
};

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>

<div id="adup1" style="width:100%;height:250px;"></div>
<div id="adup2" style="width:300px;height:600px;"></div>

<script>
window.uAd_init = function() {
    window.uAd.embed("adup1", {
        placementKey: "PLACEMENT_1",
        responsive: true
    });

    window.uAd.embed("adup2", {
        placementKey: "PLACEMENT_2",
        responsive: true
    });
};

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>

Synchrone Einbindung

Bei der synchronen Einbindung wird der Anzeigenblock direkt über ein eingebundenes Script geladen.

Diese Methode ist einfacher, bietet jedoch weniger Flexibilität und kann die Ladezeit deiner Webseite beeinflussen.

<script
    src="https://s.d.adup-tech.com/ads/display.js?p=DEIN_PLACEMENT_KEY&r=1"
    async>
</script>

<script
    src="https://s.d.adup-tech.com/ads/display.js?p=DEIN_PLACEMENT_KEY&r=1"
    async>
</script>

<script
    src="https://s.d.adup-tech.com/ads/display.js?p=DEIN_PLACEMENT_KEY&r=1"
    async>
</script>

Responsive-Ads optimal einsetzen

Für die beste Darstellung empfehlen wir:

• flexible Breiten (width:100%)

• ausreichend Höhe für das gewählte Layout

• keine verschachtelten Container mit festen Minimalgrößen

• mobile Optimierung der umgebenden Webseite

Besonders gut eignen sich Responsive-Ads für:

• mobile Webseiten

• responsive Layouts

• dynamische Content-Bereiche

• Artikel- und Magazinseiten

Häufige Fehlerquellen

Anzeigen werden nicht dargestellt

Prüfe:

• ob der placementKey korrekt ist

• ob der Container eine Höhe besitzt

• ob JavaScript auf der Seite aktiviert ist

Anzeige hat falsche Größe

Prüfe:

• CSS-Regeln des Containers

• Parent-Container mit display:none

• dynamische Größenänderungen durch Frameworks

Mehrere Anzeigen laden nicht korrekt

Nutze die asynchrone Einbindung und vergebe eindeutige Container-IDs.