Zurück zur Übersicht
Einbau

Unsere Delivery API

Unsere Auslieferungs-API bietet die Möglichkeiten Responsive-Ads oder Static-Ads Werbemittel asynchron zu erstellen, zu aktualisieren oder zu entfernen. Es handelt sich hierbei um globales Javascript-Objekt mir dem Namen window.uAd, welches die entsprechenden Methoden anbietet.

Laden der API

Es muss immer sichergestellt werden, dass die Auslieferungs-API nur einmal pro Seitenaufruf geladen wird, da sonst unter Umständen die globale Callback-Funktion window.uAd_init mehrfach ausgeführt wird, und dadurch die entsprechenden Werbemittel ebenfalls mehrfach angezeigt werden!

 

Laden per <script>-Tag (einfach)

Völlig ausreichend wenn der Einbindungscode an nur einer Stelle auf Ihrer Seite platziert werden soll. Unsere Auslieferungs-API wird einmalig und asynchron mittels dynamischem <script>-Tag geladen. Sobald die API fertig geladen ist, wird eine globale Callback-Funktion window.uAd_init ausgeführt, in welcher Ihre eigentliche Einbindungslogik hinterlegt ist.

...
<script type="text/javascript">
    window.uAd_init = function() {
        // window.uAd.embed(...)
        // window.uAd.reload(...)
        // window.uAd.remove(...)
    };
  
    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>
...
Laden per <script>-Tag (erweitert)

Hierbei wird die Logik aus dem (obigen) einfachen Beispiel in eine Funktion mit dem Namen "adup" ausgelagert. Diese kümmert sich darum, dass die API nur einmalig geladen wird. Als Parameter wird eine Callback-Funktion mit Ihrer gewünschten Einbindungslogik übergeben, welche automatisch ausgeführt wird sobald unsere Auslieferungs-API bereit ist.

Dies ist besonders dann Nützlich wenn Sie beispielsweise mehrere Werbemittel an unterschiedlichen Stellen auf Ihrer Seite verbaut haben und/oder Werbemittel während der Laufzeit auf ihrer Seite platziert, aktualisiert oder entfernt werden sollen.

...
<script type="text/javascript">
    function adup(callback) {
        if (window.uAd) {
            callback();
        } else if (window.uAd_init) {
            var 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"));    
        }
    }
</script>
...
<script type="text/javascript">
    adup(function() {
        // window.uAd.embed(...)
        // window.uAd.reload(...)
        // window.uAd.remove(...)
    });
</script>
...
<script type="text/javascript">
    adup(function() {
        // window.uAd.embed(...)
        // window.uAd.reload(...)
        // window.uAd.remove(...)
    });
</script>
...
Laden als AMD-Modul

Die API kann als AMD-Modul geladen werden (http://requirejs.org/docs/whyamd.html).
Für diese Methode wird die Verwendung eines AMD-Loaders (z.B. http://requirejs.org) vorausgesetzt.

Dafür muss zunächst in den RequireJS-Optionen der Pfad zur API definiert und die RequireJS Bibliothek eingebunden werden. Anschließend kann unsere API mit Hilfe der Methode require überall auf Ihrer Seite geladen bzw. verwendet werden.

...
<script type="text/javascript">
    var require = {
        paths: {
            "uAd": "https://s.d.adup-tech.com/jsapi"
        }
    };
</script>
...
<script type="text/javascript" 
        src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js">
</script>
...
<script type="text/javascript">
    require(["uAd"], function() {
        // window.uAd.embed(...)
        // window.uAd.reload(...)
        // window.uAd.remove(...)
    }); 
</script>
...
<script type="text/javascript">
    require(["uAd"], function() {
        // window.uAd.embed(...)
        // window.uAd.reload(...)
        // window.uAd.remove(...)
    }); 
</script>
...

Werbemittel einbinden

Vorausetzungen

Damit Sie Werbemittel asynchron einbinden können, muss sichergestellt werden, dass die Auslieferungs-API korrekt geladen wurde. Mehr dazu finden Sie im Bereich Laden der API weiter oben auf dieser Seite.

Funktionsweise

Mit Hilfe der embed Funktion des API-Objektes window.uAd haben Sie die Möglichkeit Werbemittel innerhalb eines auf Ihrer Seite existierenden HTML-Containers zu laden. Der HTML-Container muss eine eindeutige ID besitzen, welche beim Aufruf von window.uAd.embed als erster Parameter übergeben wird. Als zweiter Parameter werden die Optionen für das gewünschte Werbemittel in Form eines JSON-Objektes übergeben. Die API generiert anschließend einen iFrame mit den entsprechenden Werbeanzeigen innerhalb des HTML-Containers.

Syntax
window.uAd.embed("Container-ID", {
    Option: "Wert",
    Option: "Wert",
    ...
});
Beispiel
...
<div id="adup1"></div>
...
<script type="text/javascript">
    window.uAd_init = function() {
        window.uAd.embed("adup1", {
            placementkey: "dd9e2c6e8a1ec4bc5d1561564fcf946d",
            responsive: false
        });
    };
  
    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>
...

Weitere Einbindungsbeispiele finden Sie in den Dokumentationen zu Responsive-Ads und Static-Ads.

Werbemittel aktualisieren

Vorausetzungen

Damit Sie Werbemittel aktualisieren können, muss sichergestellt werden, dass die Auslieferungs-API korrekt geladen wurde. Mehr dazu finden Sie im Bereich Laden der API weiter oben auf dieser Seite.

Funktionsweise

Mit Hilfe der reload Funktion des API-Objektes window.uAd haben Sie die Möglichkeit ein bereits existierendes Werbemittel zu aktualisieren. Hierfür wird die eindeutige ID des HTML-Containers des Werbemittels der window.uAd.reload Funktion übergeben. Der vorher durch window.uAd.embed generierte iFrame mit den Werbeanzeigen wird hierbei mit den selben Optionen neu geladen. 

Ein Werbemittel darf maximal alle 10 Sekunden mittels window.uAd.reload aktualisiert werden. Durch das Aktualisieren eines Werbemittels wird auch immer eine neue Impression getrackt.

Syntax
window.uAd.reload("Container-ID");
Beispiel
...
<div id="adup1"></div>
...
<script type="text/javascript">
    window.uAd_init = function() {
        // Initiale Einbindung
        window.uAd.embed("adup1", {
            placementkey: "dd9e2c6e8a1ec4bc5d1561564fcf946d",
            responsive: false
        });

        // Automatische Aktualisierung alle 30 Sekunden
        setInterval(function() {
             window.uAd.reload("adup1");  
        }, 30000);
    };
  
    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>
...

Werbemittel entfernen

Vorausetzungen

Damit Sie Werbemittel entfernen können, muss sichergestellt werden, dass die Auslieferungs-API korrekt geladen wurde. Mehr dazu finden Sie im Bereich Laden der API weiter oben auf dieser Seite.

Funktionsweise

Mit Hilfe der remove Funktion des API-Objektes window.uAd haben Sie die Möglichkeit ein bereits durch embedeingefügtes Werbemittel wieder zu entfernen. Hierfür wird die eindeutige ID des zu entfernenden HTML-Containers des Werbemittels der window.uAd.remove Funktion übergeben.

Syntax
window.uAd.remove("Container-ID");
Beispiel
...
<div id="adup1"></div>
...
<script type="text/javascript">
    window.uAd_init = function() {
        // Initiale Einbindung
        window.uAd.embed("adup1", {
            placementkey: "dd9e2c6e8a1ec4bc5d1561564fcf946d",
            responsive: false
        });

        // Entfernt Werbemittel nach 120 Sekunden
        setTimeout(function() {
             window.uAd.remove("adup1");  
        }, 120000);
    };
  
    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>
...

Verwandte Themen