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.
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.
Share Improve this question asked Sep 11, 2012 at 17:20 sphoidsphoid 5957 silver badges18 bronze badges 04 Answers
Reset to default 13There'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.
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.
I had a similar problem over on WiiMusic.net with Google AdSense. What I ended up doing was detecting the size of the div containing the ad with JavaScript and then loaded the ad. In this situation, it wasn't possible to change resolution or size of my page once loaded, so this worked.
In your situation, your page can certainly change size and what not. I think you will have to re-load the ads at that point, if you want different ad versions to be visible depending on your responsive design. If you are using the asynchronous ad code, this should be possible.
To sum it up, yes, this is sane and possible with JavaScript. Your ads require JavaScript to work anyway, so this shouldn't be too much of a barrier.
So as usual I was way over thinking this. The reason I wasn't detecting a DOM change is because the ad had already been inserted by the time i was assigning event handlers. WHen loading ads synchronously I can immediately measure the dimensions of the container div and get the ad dimensions. When loading asynchronously I'm able to poll for inner html changes by storing the original html using and polling for changes and making the measurement of the container div when the change occurs. Thanks Brad for your time.