Examples for the installation of responsive ad units_
Here you can find some examples to help you with the installation of your responsive ad units. You can find detailed instructions in our support article on the installation of Responsive-Ads.
Simple example of asynchronous integration
Perfectly adequate if the embed code is to be placed in only one place on your page.
Step 1
First, create the <div> containers with unique IDs and correct height and width specifications at the locations in the <body> area of your web page where you want the ads to load.
The container sizes can be set either directly via inline style attribute ...
...
<div id="adup1" style="width:90%;height:200px"></div>
...
<div id="adup2" style="width:500px;height:250px"></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: Use additional CSS media queries to define different container sizes based on the current size of the browser window or device.
Step 2
Load our delivery API and initialize the callback "window.uAd_init" once at the end of your page. Within the callback, you now have the option to configure the ad media 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: "Italy"
});
window.uAd.embed("adup2", {
placementkey: "c826aad8837fe2bd34f4aadde2cb222f",
responsive: true,
mincpc: 1.15,
lazy: true
});
};
// Loading the 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>Extended example of asynchronous integration
Here, the logic from the simple example (above) is outsourced to a function called "adup". This takes care that our delivery API is loaded only once. A callback function with your desired embedding logic is passed as a parameter, which is automatically executed as soon as the API is ready. This is especially useful if, for example, you have several ads in different places on your page and / or ads should only be placed on your page during runtime.
<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 places in the <body> area of your web page where the ads are to be loaded and then include them using the global function "adup" and the desired parameters.
The container sizes can either be set directly via 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: "Italy"
});
});
</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>
......
<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: "Italy"
});
});
</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: Use additional CSS media queries to define different container sizes based on the current size of the browser window or device.
Example of synchronous integration
Insert the <div> tags with correct height and width specifications including the <script> tags with the desired URL parameters at the location in the <body> area on your page where the ads should be displayed.
The container sizes can be set either directly via 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>
......
<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: Use additional CSS media queries to define different container sizes based on the current size of the browser window or device.