Unsere Delivery API

Überblick

Mit der AdUp Delivery API kannst du Werbemittel programmatisch auf deiner Website einbinden, aktualisieren und entfernen.

Die API stellt dafür das globale JavaScript-Objekt window.uAd bereit und unterstützt sowohl Responsive Ads als auch Static Ads.

Die Delivery API eignet sich besonders für:

• dynamische Websites

• Single-Page-Applications (SPA)

• komplexe Publisher-Integrationen

• programmatische Werbeplatzierungen

Voraussetzungen

Bevor du die Delivery API verwendest, benötigst du:

• eine angelegte Website

• einen Anzeigenblock im Publisher-Account

• einen gültigen placementkey

Außerdem muss die Delivery API einmalig auf der Seite geladen werden.

Delivery API laden

Die API darf pro Seitenaufruf nur einmal geladen werden.

Wird sie mehrfach eingebunden, kann der Initialisierungs-Callback mehrfach ausgeführt werden, wodurch Anzeigen mehrfach geladen werden können.

Je nach Projekt stehen verschiedene Möglichkeiten zur Verfügung.

Standard-Integration (empfohlen)

Für die meisten Websites genügt die Standard-Integration.

Nach dem Laden der API wird automatisch die Callback-Funktion window.uAd_init() ausgeführt.

<script>window.uAd_init = function () {    // Anzeigen initialisieren};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 () {    // Anzeigen initialisieren};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 () {    // Anzeigen initialisieren};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>

Geeignet für:

• klassische Websites

• wenige Anzeigenplätze

• einfache Integrationen

Erweiterte Integration

Für komplexere Websites empfiehlt sich eine globale Hilfsfunktion.

Dadurch wird sichergestellt, dass die API nur einmal geladen wird, auch wenn Anzeigen später dynamisch ergänzt werden.

Diese Variante eignet sich besonders für:

• Single-Page-Applications

• React

• Vue

• Angular

• dynamische Seiteninhalte

function adup(callback) {    if (window.uAd) {        callback();    } else if (window.uAd_init) {        const oldCallback = window.uAd_init;        window.uAd_init = function () {            oldCallback();            callback();        };    } else {        window.uAd_init = callback;        (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"));    }}

function adup(callback) {    if (window.uAd) {        callback();    } else if (window.uAd_init) {        const oldCallback = window.uAd_init;        window.uAd_init = function () {            oldCallback();            callback();        };    } else {        window.uAd_init = callback;        (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"));    }}

function adup(callback) {    if (window.uAd) {        callback();    } else if (window.uAd_init) {        const oldCallback = window.uAd_init;        window.uAd_init = function () {            oldCallback();            callback();        };    } else {        window.uAd_init = callback;        (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"));    }}

Anschließend können Anzeigen jederzeit eingebunden werden.

adup(function () { // Anzeigen einbinden});

AMD / RequireJS

Alternativ kann die Delivery API auch als AMD-Modul eingebunden werden.

Diese Variante eignet sich für Projekte, die RequireJS oder einen kompatiblen AMD-Loader verwenden.

var require = { paths: { uAd: "https://s.d.adup-tech.com/jsapi" }};

Anschließend kann die API geladen werden.

require(["uAd"], function () { // Anzeigen verwenden});

Werbemittel einbinden

embed()

Mit window.uAd.embed() wird ein Anzeigenblock innerhalb eines vorhandenen HTML-Containers erzeugt.

Syntax:

window.uAd.embed("container-id", { placementkey: "..."});

Beispiel

<div id="adup1"></div><script>window.uAd_init = function () {    window.uAd.embed("adup1", {        placementkey: "dd9e2c6e8a1ec4bc5d1561564fcf946d",        responsive: false    });};<

<div id="adup1"></div><script>window.uAd_init = function () {    window.uAd.embed("adup1", {        placementkey: "dd9e2c6e8a1ec4bc5d1561564fcf946d",        responsive: false    });};<

<div id="adup1"></div><script>window.uAd_init = function () {    window.uAd.embed("adup1", {        placementkey: "dd9e2c6e8a1ec4bc5d1561564fcf946d",        responsive: false    });};<

Nach dem Aufruf erzeugt die API automatisch einen iFrame innerhalb des angegebenen Containers.

Werbemittel aktualisieren

reload()

Mit window.uAd.reload() kann ein bestehender Anzeigenblock neu geladen werden.

Syntax:

window.uAd.reload("adup1");

Dabei werden dieselben Parameter verwendet wie beim ursprünglichen embed().

Wichtig:

Ein Anzeigenblock darf höchstens alle 10 Sekunden neu geladen werden.

Jeder Reload erzeugt eine neue Impression.

Beispiel

setInterval(function () { window.uAd.reload("adup1");}, 30000);

Das Beispiel lädt den Anzeigenblock alle 30 Sekunden neu.

Werbemittel entfernen

remove()

Mit window.uAd.remove() entfernst du einen zuvor eingebundenen Anzeigenblock.

Syntax:

window.uAd.remove("adup1");

Beispiel

setTimeout(function () { window.uAd.remove("adup1");}, 120000);

Der Anzeigenblock wird nach zwei Minuten entfernt.

API-Methoden im Überblick

Typische Einsatzbereiche

Die Delivery API eignet sich besonders für:

• Single-Page-Applications

• Infinite Scroll

• dynamisch erzeugte Inhalte

• personalisierte Webseiten

• komplexe Publisher-Systeme

Best Practices

API nur einmal laden

Die Delivery API sollte pro Seitenaufruf nur einmal eingebunden werden.

Asynchron laden

Die asynchrone Einbindung verbessert die Performance und verhindert blockierende Seitenaufrufe.

Anzeigen nur bei Bedarf aktualisieren

Nutze reload() nur dann, wenn tatsächlich neue Anzeigen geladen werden sollen.

Ein Reload erzeugt immer eine neue Impression.

Anzeigen sauber entfernen

Werden Container dynamisch gelöscht, sollte auch remove() aufgerufen werden.

Dadurch werden Speicher und Ressourcen sauber freigegeben.

Container eindeutig benennen

Verwende für jeden Anzeigenblock eine eindeutige Container-ID.

Beispiel:

• adup-header

• adup-sidebar

• adup-footer

Häufige Fehlerquellen

API mehrfach eingebunden

Die API darf pro Seitenaufruf nur einmal geladen werden.

Anzeigen vor API initialisiert

window.uAd.embed() darf erst aufgerufen werden, nachdem die API vollständig geladen wurde.

Reload zu häufig ausgeführt

Zwischen zwei Reloads müssen mindestens 10 Sekunden liegen.

Falsche Container-ID

Der HTML-Container muss bereits existieren, bevor embed() aufgerufen wird.