Beispiele für den Einbau von responsive Anzeigenblöcken_
Hier findest du einige Beispiele, die dir bei dem Einbau deiner responsive Anzeigenblöcke helfen sollen. Eine genaue Anleitung findest du in unserem Support Artikel zum Einbau von Responsive-Ads.
Einfaches Beispiel für eine asynchrone Einbindung
Völlig ausreichend wenn der Einbindungscode an nur einer Stelle auf Ihrer Seite platziert werden soll.
Schritt 1
Erstellen Sie zuerst die <div>-Container mit eindeutigen IDs und korrekten Höhen- und Breiten-Angaben an den Stellen im <body>-Bereich Ihrer Webseite, an denen die Werbeanzeigen geladen werden sollen.
Die Containergrößen können entweder direkt per Inline-Style-Attribut ...
...
<div id="adup1" style="width:90%;height:200px"></div>
...
<div id="adup2" style="width:500px;height:250px"></div>
...... oder vorher per CSS-Definition innerhalb eines <style>-Tags gesetzt werden.
...
<style type="text/css">
#adup1 {
width: 90%;
height: 200px;
}
#adup2 {
width: 500px;
height: 250px;
}
</style>
...
<div id="adup1"></div>
...
<div id="adup2"></div>
...Tipp: Verwenden Sie zusätzlich CSS-Media-Queries um unterschiedliche Containergrößen basierend auf der aktuellen Größe des Browserfensters bzw. Endgerätes zu definieren.
Schritt 2
Laden Sie unsere Auslieferungs-API und initialisieren Sie den Callback "window.uAd_init" einmalig am Ende Ihrer Seite. Innerhalb des Callbacks haben Sie nun die Möglichkeit die Werbemittel mit Hilfe der "window.uAd.embed" Methode und den gewünschten Parametern zu konfigurieren.
<script type="text/javascript">
// Callback
window.uAd_init = function() {
window.uAd.embed("adup1", {
placementkey: "b438218268aff398aa44332004a8d78a",
responsive: true,
query: "Italien"
});
window.uAd.embed("adup2", {
placementkey: "c826aad8837fe2bd34f4aadde2cb222f",
responsive: true,
mincpc: 1.15,
lazy: true
});
};
// Laden der API
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>Erweitertes Beispiel für eine asynchrone Einbindung
Hierbei wird die Logik aus dem (obigen) einfachen Beispiel in eine Funktion mit dem Namen "adup" ausgelagert. Diese kümmert sich darum, dass unsere Auslieferungs-API nur einmalig geladen wird. Als Parameter wird eine Callback-Funktion mit Ihrer gewünschten Einbindungslogik übergeben, welche automatisch ausgeführt wird sobald die 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 erst während der Laufzeit auf ihrer Seite platziert werden sollen.
Schritt 1
Platzieren Sie folgenden Code in den <head>-Bereich Ihrer Webseite.
<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> Schritt 2
Platzieren Sie die <div>-Container mit eindeutigen IDs und korrekten Höhen- und breiten-Angaben an den Stellen im <body>-Bereich Ihrer Webseite, an denen die Werbeanzeigen geladen werden sollen und binden diese anschließend unter Verwendung der globalen Funktion "adup" und den gewünschten Parametern ein.
Die Containergrößen können entweder direkt per Inline-Style-Attribut ...
...
<div id="adup1" style="width:90%;height:200px;"></div>
<script type="text/javascript">
adup(function() {
window.uAd.embed("adup1", {
placementkey: "b438218268aff398aa44332004a8d78a",
responsive: true,
query: "Italien"
});
});
</script>
...
<div id="adup2" style="width:500px;height:250px;"></div>
<script type="text/javascript">
adup(function() {
window.uAd.embed("adup2", {
placementkey: "c826aad8837fe2bd34f4aadde2cb222f",
responsive: true,
mincpc: 1.15,
lazy: true
});
});
</script>
...... oder vorher per CSS-Definition innerhalb eines <style>-Tags gesetzt werden.
...
<style type="text/css">
#adup1 {
width: 90%;
height: 200px;
}
#adup2 {
width: 500px;
height: 250px;
}
</style>
...
<div id="adup1"></div>
<script type="text/javascript">
adup(function() {
window.uAd.embed("adup1", {
placementkey: "b438218268aff398aa44332004a8d78a",
responsive: true,
query: "Italien"
});
});
</script>
...
<div id="adup2"></div>
<script type="text/javascript">
adup(function() {
window.uAd.embed("adup2", {
placementkey: "c826aad8837fe2bd34f4aadde2cb222f",
responsive: true,
mincpc: 1.15,
lazy: true
});
});
</script>
...Tipp: Verwenden Sie zusätzlich CSS-Media-Queries um unterschiedliche Containergrößen basierend auf der aktuellen Größe des Browserfensters bzw. Endgerätes zu definieren.
Beispiel für eine synchrone Einbindung
Fügen Sie die <div>-Tags mit korrekten Höhen- und Breiten-Angaben inklusive der <script>-Tags mit den gewünschten URL-Parametern an der Stellen im <body>-Bereich auf Ihrer Seite ein, an der die Werbemittel angezeigt werden sollen.
Die Containergrößen können entweder direkt per Inline-Style-Attribut ...
...
<div style="width:90%;height:200px;">
<script type="text/javascript"
src="https://s.d.adup-tech.com/ads/responsive.js?placementkey=ee3f328127873b8fc0174d84b235087b&query=Fl%C3%BCge;USA">
</script>
</div>
...
<div style="width:500px;height:250px;">
<script type="text/javascript"
src="https://s.d.adup-tech.com/ads/responsive.js?placementkey=058c43c27f6f563e09ddde3c26b54042&query=Fl%C3%BCge;USA&lazy=1&skip=5">
</script>
</div>
...... oder vorher per CSS-Definition innerhalb eines <style>-Tags gesetzt werden.
...
<style type="text/css">
#adup1 {
width: 90%;
height: 200px;
}
#adup2 {
width: 500px;
height: 250px;
}
</style>
...
<div id="adup1">
<script type="text/javascript"
src="https://s.d.adup-tech.com/ads/responsive.js?placementkey=ee3f328127873b8fc0174d84b235087b&query=Fl%C3%BCge;USA">
</script>
</div>
...
<div id="adup2">
<script type="text/javascript"
src="https://s.d.adup-tech.com/ads/responsive.js?placementkey=058c43c27f6f563e09ddde3c26b54042&query=Fl%C3%BCge;USA&lazy=1&skip=5">
</script>
</div>
...Tipp: Verwenden Sie zusätzlich CSS-Media-Queries um unterschiedliche Containergrößen basierend auf der aktuellen Größe des Browserfensters bzw. Endgerätes zu definieren.