Changing Ad Size Based On Browser Width In Dfp
Solution 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>
Solution 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
Solution 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/
Post a Comment for "Changing Ad Size Based On Browser Width In Dfp"