问题
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! :)
回答1:
You should use the mapping functionality provided by DFP
Here is an example with 5 Ad Units on one page. Step 1: Define all possible sizes for each Ad Unit. Define these sizes it in the Ad Unit setup in DFP. Step 2: Decide which Ad Unit will use which sizes on which viewport. Create size mapping as shown in the code bellow with the variables megaboardsize firstsize and so on. Step 3: Define the slots and the appropriate defined mapping as shown bellow.
In the example, the sizes will be served in the ad units as follows: Ad Unit - example-megaboard: On devices with viewport width more than 970px: 970x90,970x250,728x90. On devices with viewport width more than 728px: 728x90. On all devices with smaller viewport: 320x100,320x50 Ad Unit - /XXX/example-300x250-1st: On devices with viewport width more than 920px: 300x250,300x600. On devices with viewport width more than 300px: 300x250. On all devices with smaller viewport: no ads.
And so on...
<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
</script>
<script>
var gptAdSlots = [];
googletag.cmd.push(function() {
var megaboardsize = googletag.sizeMapping().addSize([970, 0], [[970,90],[970,250],[728,90]]).addSize([728, 0], [728, 90]).addSize([0, 0], [[320, 100],[320,50]]).build();
var firstsize = googletag.sizeMapping().addSize([920, 0], [[300,250],[300,600]]).addSize([300, 0],[300,250]).addSize([0, 0], []).build();
var secondsize = googletag.sizeMapping().addSize([920, 0], [300,250]).addSize([0, 0],[]).build();
var thirdsize = googletag.sizeMapping().addSize([920, 0], [300,250]).build();
var fourthsize = googletag.sizeMapping().addSize([690, 0], [300,250]).addSize([0, 0],[]).build();
gptAdSlots[0] = googletag.defineSlot('/XXX/example-megaboard', [[970, 90], [320, 100], [320, 50], [728, 90], [970, 250]], 'gpt-megaboard').defineSizeMapping(megaboardsize).addService(googletag.pubads());
gptAdSlots[1] = googletag.defineSlot('/XXX/example-300x250-1st', [[300, 600], [300, 250]], 'gpt-1st').defineSizeMapping(firstsize).addService(googletag.pubads());
gptAdSlots[2] = googletag.defineSlot('/XXX/example-300x250-2nd', [300, 250], 'gpt-2nd').defineSizeMapping(secondsize).addService(googletag.pubads());
gptAdSlots[3] = googletag.defineSlot('/XXX/example-300x250-3rd', [300, 250], 'gpt-3rd').defineSizeMapping(thirdsize).addService(googletag.pubads());
gptAdSlots[4] = googletag.defineSlot('/XXX/example-300x250-4th', [300, 250], 'gpt-4th').defineSizeMapping(fourthsize).addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.pubads().collapseEmptyDivs();
googletag.enableServices();
});
</script>
回答2:
You cannot really control the width of the line-item that will be served to the user based on his device width/height straight from dfp configuration.
What you can do is - . While triggering the ad specify the size according to the device width/height. For e.g if the device is smaller than 600px in width then only use the smallest ad size to trigger. E.g
if(window.innerWidth < 800){
googletag.defineSlot('ADID', [[292, 195]], 'domid')
}
Check these two demo links, they trigger the same adunit with different sizes.
320x50 - http://tinyurl.com/q2x3562
300x250 - http://tinyurl.com/o3vx4qk
回答3:
For me this post summarises the best options: http://exisweb.net/how-to-use-google-adsense-on-a-responsive-website
I made a WordPress plugin based on #3: https://wordpress.org/plugins/responsive-ad-shortcodes/
来源：https://stackoverflow.com/questions/15423189/changing-ad-size-based-on-browser-width-in-dfp