Search code examples
google-dfp

DFP Adverts - How to show adverts in different places depending on screen size

I am using Google DFP adverts and I want to change the position they are in when the site is viewed on mobile.

I have tried duplicating the advert and showing one/ hiding the other but that still shows both adverts.

Is there any way to accomplish this, please see attached image for an example of what I am after.

enter image description here

Solution

  • Well, this is kind of hard, but not impossible. I will give you even more complicated example, where not only the banner could be in different places, but could be with different sizes depending on the device.

    Scenario: You have an Ad Unit called adunit1. You want to show in the content on desktop, but on top on mobile. On desktop you want to be 300x250, and on mobile you want to 320x100 or 320x50. We consider desktop everything with viewport width of 970px and mobile anything smaller (could add more cases, but let's not make it too complicated).

    Step 1: Go to the Ad Unit options in DFP and add all sizes that this ad unit will display (in our scenario: 300x250, 320x100, 320x50). Step 2: Create size mappings variable for each sub-scenario. As bellow:

    var adunit1desktop = googletag.sizeMapping().addSize([970, 0], [300, 250]).addSize([0, 0], []).build();

    Which means: If viewport width is more than 970 AND viewport height is more than 0, serve banner with size 300x250. If smaller, serve nothing.

    Now let us make the same for the mobile version with different name of the variable: var adunit1mobile = googletag.sizeMapping().addSize([970, 0],[]).addSize([0, 0], [[320,100],[320,50]]).build(); Which means: If viewport width is more than 970 AND viewport height is more than 0, serve nothing. If smaller serve either 320x100 OR 320x50.

    We will now define the Ad Units, but will make this twice as will assign different size mapping for desktop and mobile.

    For desktop:

    gptAdSlots[0] = googletag.defineSlot('/XXX/adunit1', [[300, 250], [320, 100], [320, 50]], 'div-banner-desktop').defineSizeMapping(adunit1desktop).addService(googletag.pubads());

    Two details to watch here: div-banner-desktop - this is the div id where we want to show the desktop banner. defineSizeMapping(adunit1desktop) - this is how we tell DFP to show this based on the size rules above (in brief: show the desktop banner, only if viewport width is at least 970px).

    Now for the mobile:

    gptAdSlots[1] = googletag.defineSlot('/XXX/adunit1', [[300, 250], [320, 100], [320, 50]], 'div-banner-mobile').defineSizeMapping(adunit1mobile).addService(googletag.pubads());

    Pay attention to three details: div-banner-mobile, defineSizeMapping(adunit1mobile) and gptAdSlots[1] - we increased with 1 for the next slot rendering. If there are more, each should be increased by 1 as well.

    Now go to your web site and put the following code where you want to display the desktop banner:

    <div id="div-banner-desktop">
<script>
googletag.cmd.push(function() { googletag.display('div-banner-desktop'); });
</script>
</div>

    Now place this code where you want to display the mobile banner:

    <div id="div-banner-desktop">
<script>
googletag.cmd.push(function() { googletag.display('div-banner-desktop'); });
</script>
</div>

    The whole code block should look something like this

    <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 adunit1desktop = googletag.sizeMapping().addSize([970, 0], [300, 250]).addSize([0, 0], []).build();

    var adunit1mobile = googletag.sizeMapping().addSize([970, 0],[]).addSize([0, 0], [[320,100],[320,50]]).build();

    gptAdSlots[0] = googletag.defineSlot('/XXX/adunit1', [[300, 250], [320, 100], [320, 50]], 'div-banner-desktop').defineSizeMapping(adunit1desktop).addService(googletag.pubads());

    gptAdSlots[1] = googletag.defineSlot('/XXX/adunit1', [[300, 250], [320, 100], [320, 50]], 'div-banner-mobile').defineSizeMapping(adunit1mobile).addService(googletag.pubads());

    googletag.pubads().enableSingleRequest();
    googletag.pubads().collapseEmptyDivs();
    googletag.enableServices();
  });
</script>