Callback Function
(function(error, result) { ... })
The callback function is being invoked at several points in the request/deliver workflow:
result.type | Description |
---|---|
'adRequest' | All preconditions (like viewability check) for the ad slot are met, the request commences |
'adResponse' | The adserver has responded, the dimensions of the ad are known |
'adUpdate' | The ad's dimensions have changed because of a third party (redirect) ad server's business logic (The dimensions can even be 0x0px, when no ad was provided) |
'error' | Something went so wrong that there will be definitely no ad (in that case, the first parameter will also contain the error) |
Callback example
In this example a callback function is being passed to Somtag's insertAd
command in order to start a slide-down animation of the fullbanner slot.
In order to pass Somtag's viewability check at the time the insertAd
command is called the height of the slot container can not be 0. That's why the height is set to 0
after the adRequest
event.
To start the animation we need to know the exact height of the ad, which is determined for the first time at the adResponse
event. That's why the new height is applied at the time this event is triggered.
The example:
<html>
<head>
<style>
#fullbanner-container {
transition: height 500ms;
overflow: hidden;
}
#fullbanner-container.beforeAnimation {
height: 0;
}
</style>
<script>
(function (s, o, m, t, a, g) {
s.somtag = {
cmd: function () {
g = [].slice.call(arguments);
g.push(o.currentScript || o.scripts[o.scripts.length - 1]);
(this.q = this.q || []).push(g);
} };
a = o.createElement('script');a.src = m;
o.head.appendChild(a);
})(window, document, '//ad.71i.de/somtag/loader/loader.js');
</script>
<script>
somtag.cmd('init', {
config: {
id: 'demo_site'
},
display: {
slots: {
fullbanner2: {
enabled: true
}
}
}
});
var insertAdCallback = function (error, result) {
console.log('::: insertAdCallback', error, result);
var fullbannerContainer = document.querySelector('#fullbanner-container');
switch (result.type) {
case 'adRequest':
fullbannerContainer.classList.add('beforeAnimation');
break;
case 'adResponse':
fullbannerContainer.style.height = result.data.adConfig.height + 'px';
break;
case 'error':
fullbannerContainer.style.height = '0px';
break;
default:
}
};
somtag.cmd('insertAd', 'fullbanner2', {
container: '#fullbanner-container'
}, insertAdCallback);
</script>
</head>
<body>
</body>
<div id="fullbanner-container"></div>
</html>