Simple example of an asynchronous integration
Completely sufficient if the integration code is only to be placed in a single location on your page.
Step 1
First, create the <div> containers with unique IDs and correct height and width specifications in the locations within the <body> section of your website where the advertisements are to be loaded.
The container sizes can be set either directly via the inline style attribute ...
...
<div id="adup1" style="width:90%;height:200px"></div>
...
<div id="adup2" style="width:500px;height:250px"><
...
<div id="adup1" style="width:90%;height:200px"></div>
...
<div id="adup2" style="width:500px;height:250px"><
...
<div id="adup1" style="width:90%;height:200px"></div>
...
<div id="adup2" style="width:500px;height:250px"><
... or beforehand via a CSS definition inside a <style> tag.
...
<style type="text/css">
#adup1 {
width: 90%;
height: 200px;
}
#adup2 {
width: 500px;
height: 250px;
}
</style>
...
<div id="adup1"></div>
...
<div id="adup2"></div>
...
<style type="text/css">
#adup1 {
width: 90%;
height: 200px;
}
#adup2 {
width: 500px;
height: 250px;
}
</style>
...
<div id="adup1"></div>
...
<div id="adup2"></div>
...
<style type="text/css">
#adup1 {
width: 90%;
height: 200px;
}
#adup2 {
width: 500px;
height: 250px;
}
</style>
...
<div id="adup1"></div>
...
<div id="adup2"></div>
Tip: Additionally use CSS Media Queries to define different container sizes based on the current size of the browser window or terminal device.
Step 2
Load our delivery API and initialize the callback "window.uAd_init" once at the end of your page. Inside the callback you now have the opportunity to configure the advertising materials using the "window.uAd.embed" method and the desired parameters.
<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
});
};
// Load 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><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
});
};
// Load 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><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
});
};
// Load 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>
Advanced example of an asynchronous integration
In this case, the logic from the simple example (above) is outsourced into a function named "adup". This function ensures that our delivery API is only loaded once. A callback function containing your desired integration logic is passed as a parameter, which is automatically executed as soon as the API is ready. This is particularly useful if, for example, you have placed multiple advertising materials in different locations on your page and/or advertising materials are to be placed on your page only during runtime.
Step 1
Place the following code into the <head> section of your website.
<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">
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">
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>
Step 2
Place the <div> containers with unique IDs and correct height and width specifications in the locations within the <body> section of your website where the advertisements are to be loaded, and then integrate them using the global function "adup" and the desired parameters.
The container sizes can be set either directly via the inline style attribute ...
...
<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>
...
<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>
...
<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>
... or beforehand via a CSS definition inside a <style> tag.
...
<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>
...
<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>
...
<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>
Tip: Additionally use CSS Media Queries to define different container sizes based on the current size of the browser window or terminal device.
Example of a synchronous integration
Insert the <div> tags with correct height and width specifications including the <script> tags with the desired URL parameters in the locations within the <body> section on your page where the advertising materials are to be displayed.
The container sizes can be set either directly via the inline style attribute ...
...
<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>
...
<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>
...
<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>
... or beforehand via a CSS definition inside a <style> tag.
...
<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>
...
<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>
...
<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>
Tip: Additionally use CSS Media Queries to define different container sizes based on the current size of the browser window or terminal device.
