Menu
I am currently using google publisher tags with DFP to serve up ads to a site that will very soon be responsive. We have one particular ad slot which can potentially serve up 2 potential widths, 728 or 960 and depending on which width gets served up I want to either render the ad above or below the nav.
So the obvious first question is whether or not this is even remotely sane and furthermore is it possible? I suspect i should probably define two distinct ad slots.
The primary question though which is probably more of an academic one is how can I detect the dimensions of an ad that has been served? I suspect the solution to this is agnostic to the ad platform since I am basically detected node insertion and then inspecting the dimensions of the container element.
I've been experimenting with the DOMNodeInserted javascript event however it seems to trigger for everything "BUT" the ads. I am confused by this unless gpt inserts the ads in a way that does not trigger this event.
673
There's been an update to GPT which allows this to be done in a more elegant manner. The event will tell you if a creative was returned and if so the dimensions, as well as additional information.
googletag.pubads().addEventListener('slotRenderEnded', function(event) {
console.log('Creative with id: ' + event.creativeId +
' is rendered to slot of size: ' + event.size[0] + 'x' + event.size[1]);
});
There is also event.isEmpty which will tell you if an actual creative was returned or not.
119
I have done something like this before... and the method I settled upon was overriding an internal DFP function (renderEnded) so that I could see what the ad was at the point it had rendered on screen...
For example to get the dimensions of the ad you could do something like the following (I've only tested this in chrome but it shouldn't be too far from being fully cross browser):
<html>
<head>
<title>DFP test</title>
<script type='text/javascript'>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
var gads = document.createElement('script');
gads.async = true;
gads.type = 'text/javascript';
var useSSL = 'https:' == document.location.protocol;
gads.src = (useSSL ? 'https:' : 'http:') +
'//www.googletagservices.com/tag/js/gpt.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node);
})();
</script>
<script type="text/javascript">
googletag.cmd.push(function() {
var slot1 = googletag.defineSlot('/12345678/TEST', [266, 115], 'div-gpt-ad-1340819095858-0').addService(googletag.pubads());
slot1.oldRenderEnded = slot1.renderEnded;
slot1.renderEnded = function(){
window.console.log('width: '+document.getElementById('div-gpt-ad-1340819095858-0').getElementsByTagName('iframe')[0].contentWindow.document.width);
window.console.log('height: '+document.getElementById('div-gpt-ad-1340819095858-0').getElementsByTagName('iframe')[0].contentWindow.document.height);
slot1.oldRenderEnded();
};
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
</head>
<body>
<div id='div-gpt-ad-1340819095858-0' style='width:266px; height:115px;'>
<script type='text/javascript'>
googletag.cmd.push(function() {
googletag.display('div-gpt-ad-1340819095858-0');
});
</script>
</div>
</body>
</html>
That might not be quite what you are after but overriding that function should let you get to where you need to be... let me know if you have any questions.
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
