Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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):

http://jsfiddle.net/Zkm5j/

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! :)

share|improve this question
When I try to load that jsfiddle, I don't see anything in the result window. The request to load the Google JS file fails. For the purposes of SO, it is often better to rephrase the question and remove the need to load any external dependencies (unless they themselves are the problem in question). Basically, reduce the problem to its core elements and mock that up in the jsfiddle. In any case, you should be able to do this by selectively adding/removing classes to the ad containers based on the browser size and have those CSS classes define different widths. – Ruben Infante Mar 15 at 23:43
@RubenInfante Hey Ruben, the ad should show now... stackoverflow.com/questions/15452905/… there is a jsfiddle in there! But the thing about DFP (google ads) is that all there ads are in an iframe so you cant directly manipulate the image within the iframe. you have to upload images for each size ads you want. the part that i'm stuck on is loading the given google code for different browser widths, i explain it more in the question but thanks for the help so far man it means a lot.. all I need is to get this one little thing working :) – Dyck Mar 16 at 18:29

Know someone who can answer? Share a link to this question via email, Google+, Twitter, or Facebook.

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.