In DFP Small Business / DoubleClick, I generated the following ad tag for an ad unit with three different sizes along with one creative for each specified sizes. So there are three different sizes for the ad unit and when you hit refresh the ad changes into one of my three specified ad sizes. This works fine, but its not what I want the ads to do,
I want the ads to do this:
I want the ads to change sizes based on browser width, so for example, if the viewers browser width is greater than 800px then show the ads at the biggest specified size, if the browser width is between 600-800, then use the second biggest specified sizes for the ads and finally, if the ads are smaller than 600px then use the smallest ad size... the ads should change size accordingly on browser width change. 800, 600-800 and less than 600 aren't the actual sizes, just example sizes, but anyways the three ad sizes are specified in this line:
googletag.defineSlot('/16569348/Different-Sizes-Unit-Test', [[292, 195], [310, 207], [345, 230]], 'div-gpt-ad-1363309773051-0').addService(googletag.pubads());
Here is the full code:
<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() {
googletag.defineSlot('/16569348/Different-Sizes-Unit-Test', [[292, 195], [310, 207], [345, 230]], 'div-gpt-ad-1363309773051-0').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
<!-- Different-Sizes-Unit-Test -->
<div id='div-gpt-ad-1363309773051-0'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1363309773051-0'); });
</script>
`
Here is the jsfiddle for this code (hit run or refresh to see the ads randomly change sizes):
So again, I'd like the ads to change sizes accordingly on browser width size / change. If anyone could help me come up with a method to achieving this, it would truly mean a lot to me! :)