How To Make Responsive DFP Ad Units

How To Make Responsive DFP Ad Units

So you have a responsive theme and now you want to move to Google Ad Manager (GAM) from AdSense. The first thing you see is that there are no more responsive ad units just like what you typically find in AdSense.

Google’s support instructions may be a little tricky or complicated. So today I am going to show you how you can make GAM codes responsive in a few simple steps.

Customizing DFP code to make Google Ad Manager responsive ads is no easy task. If you do not have coding experience, it would be more prudent to have the experts do it for you correctly the first time. You don’t want to risk losing your ad revenues!

If you need help, contact us here.

Before we get started, make sure to do the following:

  1. Set up your inventory. Configure all the relevant sizes per ad unit. Read: Adsense and GAM Integration Best Practices
  2. Check our tutorial on how to generate multiple Ad Manager tags here: https://youtu.be/s74dMDzczyc
  3. Now make two text files and save them.  Use a good text editor (I prefer using Notepad++ because it is free and easy to work with).
  4. Make one for the head and another one for body tags.
  5. Save the body tags.
  6. Open the head.txt file you have made.

Making the head tag responsive

Step 1: Open the head.txt in Notepad ++. First, let’s do it step by step. Your header code will look something like this:

<!– Start GPT Tag –>

<script async src=’https://securepubads.g.doubleclick.net/tag/js/gpt.js’></script>

<script>

window.googletag = window.googletag || {cmd: []};

googletag.cmd.push(function() {

googletag.defineSlot(‘/1234567/Header_Ad1’, [[970,90],[970,250],[728,90],[300,250]], ‘div-gpt-ad-9386839-1’)

.addService(googletag.pubads());

googletag.defineSlot(‘/1234567/content_Ad1’, [[728,90],[320,50],[320,100]], ‘div-gpt-ad-9386839-2’)

.addService(googletag.pubads());

googletag.defineSlot(‘/1234567/Content_Ad2’, [[728,90],[336,280],[300,250],[320,100],[320,50]], ‘div-gpt-ad-9386839-3’)

.addService(googletag.pubads());

googletag.defineSlot(‘/1234567/RightRail_Ad1’, [[300,250],[320,50],[320,100]], ‘div-gpt-ad-9386839-4’)

.addService(googletag.pubads());

googletag.pubads().enableSingleRequest();

googletag.pubads().collapseEmptyDivs();

googletag.enableServices();

});

</script>

<!– End GPT Tag –>

Step 2: I have highlighted a piece of code there:

googletag.cmd.push(function() {

You have to add a little bit of code after the highlighted line. Below is the given code you have to add. Paste as many instances (copies) of it corresponding to whichever route you choose from the following:

  • The number of size maps. You can re-use the same size map on multiple ad units if applicable
  • The number of ad units you have
  • The number of ad units you want to make responsive
var mappingadunitname = googletag.sizeMapping().

addSize([992, 0], [[970, 90], [728, 90], [300, 250], [1, 1]]). //desktop

addSize([768, 0], [[300, 250], [728, 90], [1, 1]]). //tablet

addSize([320, 0], [[320, 50], [320, 100], [300, 250], [1, 1]]). //mobile

addSize([0, 0], [[320, 50], [1, 1]]). //other

build();

Step 3: I have highlighted another bit of code. This is the name of mapping which we are going to pass in the ad unit in a bit. I prefer to make it like this, mappingadunitname so for our example above, I’m choosing to create 1 size map per unit, which means we will need 4 instances of it and place it after:

googletag.cmd.push(function() {

Step 4: After adding the mapping, your header code should look something like this:

<!– Start GPT Tag –>

<script async src=’https://securepubads.g.doubleclick.net/tag/js/gpt.js’></script>

<script>

window.googletag = window.googletag || {cmd: []};

googletag.cmd.push(function() {

var mappingheaderad1 = googletag.sizeMapping().

addSize([992, 0], [[970, 90], [970, 250], [970, 66], [980, 120], [728, 90], [300, 250], [1, 1]]). //desktop

addSize([768, 0], [[300, 250], [728, 90], [1, 1]]). //tablet

addSize([0, 0], [1, 1]). //other

build();

var mappingcontentad1 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [1, 1]]). //desktop

addSize([768, 0], [[728, 280], [728, 90], [1, 1]]). //tablet

addSize([320, 0], [[320, 50], [320, 100], [1, 1]]). //mobile

addSize([0, 0], [[320, 50], [1, 1]]). //other

build();

var mappingcontentad2 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //desktop

addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //tablet

addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). //mobile

addSize([0, 0], [[300, 250], [1, 1]]). //other

build();

var mappingrightrail1 = googletag.sizeMapping().

addSize([992, 0], [[300, 250], [1, 1]]). //desktop

addSize([768, 0], [[300, 250], [320, 100], [320, 50], [1, 1]]). //tablet

addSize([0, 0], [1, 1]). //other

build();

googletag.defineSlot(‘/1234567/Header_Ad1’, [[970,90],[970,250],[728,90],[300,250]], ‘div-gpt-ad-9386839-1’)

.addService(googletag.pubads());

googletag.defineSlot(‘/1234567/content_Ad1’, [[728,90],[320,50],[320,100]], ‘div-gpt-ad-9386839-2’)

.addService(googletag.pubads());

googletag.defineSlot(‘/1234567/Content_Ad2’, [[728,90],[336,280],[300,250],[320,100],[320,50]], ‘div-gpt-ad-9386839-3’)

.addService(googletag.pubads());

googletag.defineSlot(‘/1234567/RightRail_Ad1’, [[300,250],[320,50],[320,100]], ‘div-gpt-ad-9386839-4’)

.addService(googletag.pubads());

googletag.pubads().enableSingleRequest();

googletag.pubads().collapseEmptyDivs();

googletag.enableServices();

});

</script>

<!– End GPT Tag –>

Step 5: Now one last step: You need to define or assign size mapping for each of the ad units. Let’s grab one here and then I’ll show you what to add and where.

googletag.defineSlot(‘/1234567/RightRail_Ad1’, [[300,250],[320,50],[320,100]], ‘div-gpt-ad-9386839-4’)

.addService(googletag.pubads());

Step 6: Now you need to add this piece of code .defineSizeMapping(mappingadunitname)  between the blue and red part of the code above. i.e. before the dot

The important thing here is that the words in brackets should match the size map that you want to add inside the ad unit. For our example here, RightRail_Ad1 should have this appearance:

googletag.defineSlot(‘/1234567/RightRail_Ad1’, [[300,250],[320,50],[320,100]], ‘div-gpt-ad-9386839-4’)

.defineSizeMapping(mappingrightrail1).addService(googletag.pubads());

Step 7: Adding similar mapping for all other ad units will give you your final code.

<!– Start GPT Tag –>

<script async src=’https://securepubads.g.doubleclick.net/tag/js/gpt.js’></script>

<script>

window.googletag = window.googletag || {cmd: []};

googletag.cmd.push(function() {

var mappingheaderad1 = googletag.sizeMapping().

addSize([992, 0], [[970, 90], [970, 250], [970, 66], [980, 120], [728, 90], [300, 250], [1, 1]]). //desktop

addSize([768, 0], [[300, 250], [728, 90], [1, 1]]). //tablet

addSize([0, 0], [1, 1]). //other

build();

var mappingcontentad1 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [1, 1]]). //desktop

addSize([768, 0], [[728, 280], [728, 90], [1, 1]]). //tablet

addSize([320, 0], [[320, 50], [320, 100], [1, 1]]). //mobile

addSize([0, 0], [[320, 50], [1, 1]]). //other

build();

var mappingcontentad2 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //desktop

addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //tablet

addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). //mobile

addSize([0, 0], [[300, 250], [1, 1]]). //other

build();

var mappingrightrail1 = googletag.sizeMapping().

addSize([992, 0], [[300, 250], [1, 1]]). //desktop

addSize([768, 0], [[300, 250], [320, 100], [320, 50], [1, 1]]). //tablet

addSize([0, 0], [1, 1]). //other

build();

googletag.defineSlot(‘/1234567/Header_Ad1’, [[970,90],[970,250],[728,90],[300,250]], ‘div-gpt-ad-9386839-1’)

.defineSizeMapping(mappingheaderad1).addService(googletag.pubads());

googletag.defineSlot(‘/1234567/content_Ad1’, [[728,90],[320,50],[320,100]], ‘div-gpt-ad-9386839-2’)

.defineSizeMapping(mappingcontentad1).addService(googletag.pubads());

googletag.defineSlot(‘/1234567/Content_Ad2’, [[728,90],[336,280],[300,250],[320,100],[320,50]], ‘div-gpt-ad-9386839-3’)

.defineSizeMapping(mappingcontentad2).addService(googletag.pubads());

googletag.defineSlot(‘/1234567/RightRail_Ad1’, [[300,250],[320,50],[320,100]], ‘div-gpt-ad-9386839-4’)

.defineSizeMapping(mappingrightrail1).addService(googletag.pubads());

googletag.pubads().enableSingleRequest();

googletag.pubads().collapseEmptyDivs();

googletag.enableServices();

});

</script>

<!– End GPT Tag –>

Note: Parts of the code highlighted to emphasize what Size Map was used for which ad unit.

Step 8: Now let’s look at the Size Mapping:

var mappingcontentad2 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //desktop

addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //tablet

addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). //mobile

addSize([0, 0], [[300, 250], [1, 1]]). //other

build();

The code in red defines the browser’s width and height. Usually height is not important because it comes to consideration only when we have equal widths for 2 lines in the above code.

Step 9: Now we are saying this in the first line:

  • If the width of the browser is equal or more than 992px please show 728×280 or 728×90 or 336×280 or 300×250 or 1×1 ad sizes

And on the last line we are saying:

  • If the width of the browser is equal or more than 320px please show 320×50 or 320×100 or 320×200 or 300×250 or 1×1 ad sizes

The no.s, 992px, 768px and 320px will work for most of the websites as they follow the conventional sizes of desktop, tablet, and mobile browsers.

However, if you have a website with a tablet and mobile theme, you can ask your developer what browser size the theme transition is triggered and then you can add that size in place of the 768px and 320px respectively.

What’s your programmatic revenue strategy for 2019?

At MonetizeMore, we help publishers get more revenue from their existing ad inventory. We’re a leading Google Publishing Partner and have a suite of publisher monetization solutions that help our clients hit their revenue targets and solve their ad operations headaches.

While it’s completely possible to setup DFP responsive ad units on your own, it’s important to consider your opportunity cost. Is it worth spending the time that you could be spending growing your business and risk lost revenues from a faulty setup?

If you are interested in getting help to setup DFP responsive ad units, sign up to MonetizeMore today!

monetizemore programmatic revenue optimization


Related Reads:

Kean Graham

CEO and Founder at MonetizeMore

Kean is the resident expert in Ad Optimization covering areas like AdSense Optimization, DFP Management, and third-party ad network partnerships. Kean believes in the supremacy of direct publisher deals and holistic optimization as keys to effective and consistent ad revenue increases.

Get our latest ad optimization tips delivered to your inbox

21 COMMENTS

  1. Kathryn

    Hi, Omg it works. Do you know how many guides I tried? Last year I decided to wait until someone wrote an understandable article and universe came through for me. Now I can replace my Adsense responsive.
    Wish my site was big enuf for your services. Hopefull soon.

    Reply
    • Yuri

      Hi i have test you code, but not work for me,
      when i go to add code i not see nothing. i have add that

      var googletag = googletag || {};
      googletag.cmd = googletag.cmd || [];
      (function() {
      var mapping = googletag.sizeMapping().
      addSize([1024, 768], [970, 250]).
      addSize([980, 690], [728, 90]).
      addSize([640, 480], [120, 60]).
      addSize([0, 0], [88, 31]).
      // Fits browsers of any size smaller than 640 x 480
      build();
      adSlot.defineSizeMapping(mapping1);

      and

      googletag.defineSlot(‘/229471169/Natifly_Masthead’, [[728, 90], [970, 250], [300, 250]], ‘div-gpt-ad-1465564839605-3’)..defineSizeMapping(mapping1).addService(googletag.pubads());

      Thanks a lot for your support.

      Reply
      • MonetizeMore

        Hi Yuri, you’ve added an extra ‘1’ in your slot definition. In line 4 above you set the variable as ‘mapping’, but in the define slot you used ‘mapping1’. So the second part of your code should be:

        googletag.defineSlot(‘/229471169/Natifly_Masthead’, [[728, 90], [970, 250], [300, 250]], ‘div-gpt-ad-1465564839605-3’)..defineSizeMapping(mapping).addService(googletag.pubads());

        Reply
  2. JCm

    Hello,

    AWESOME post it’s extremely useful!

    Just a quick question, your solution seems to be missing a bit from DFP help files.

    var gptAdSlots = [];
    googletag.cmd.push(function() {

    So the gptAdslots part, then they also have gptAdSlots[0] = before defining each slot.

    I can get all this working, changed the order (not sure if matters) to call the desktop version first but for some reason it’s NOT working on mobile.

    This it my scrip, only some numbers replaced with XXX for security, not sure if it matters but just in case. If you can please have a look, what am I doing wrong?

    var gptAdSlots = [];
    googletag.cmd.push(function() {
    var resLeader = googletag.sizeMapping().
    addSize([1000, 0], [[970, 90], [970, 250], [728, 90]]).
    addSize([768, 0], [728, 90]).
    addSize([0, 0], [320, 50]).
    build();
    var res468Leader = googletag.sizeMapping().
    addSize([0, 0], []).
    addSize([1050, 200], [468, 60]).
    build();
    var resMPU1 = googletag.sizeMapping().
    addSize([1000, 200], [[300, 250], [300, 600]]).
    addSize([0, 0], [300, 250]).
    build();
    var resMPU2 = googletag.sizeMapping().
    addSize([0, 0], []).
    addSize([1000, 200], [[300, 250], [300, 600]]).
    build();
    var resContentMPU = googletag.sizeMapping().
    addSize([1000, 200], []).
    addSize([0, 0], [300, 250]).
    build();
    var resWallpaper = googletag.sizeMapping().
    addSize([0, 0], []).
    addSize([1050, 200], [1, 1]).
    build();

    gptAdSlots[0] = googletag.defineSlot(‘/1245037/billboard_leader_xxx’, [[320, 50], [970, 90], [970, 250], [728, 90]], ‘div-gpt-ad-1468349344xxx-0’).
    defineSizeMapping(resLeader).
    setCollapseEmptyDiv(true).
    addService(googletag.pubads());
    gptAdSlots[1] = googletag.defineSlot(‘/1245037/leader468_xxx’, [468, 60], ‘div-gpt-ad-1468349344xxx-1’).
    defineSizeMapping(res468Leader).
    setCollapseEmptyDiv(true).
    addService(googletag.pubads());
    gptAdSlots[2] = googletag.defineSlot(‘/1245037/mpu_rhs_1_xxx’, [[300, 250], [300, 600]], ‘div-gpt-ad-1468349344xxx-4’).
    defineSizeMapping(resMPU1).
    setCollapseEmptyDiv(true).
    addService(googletag.pubads());
    gptAdSlots[3] = googletag.defineSlot(‘/1245037/mpu_rhs_2_xxx’, [[300, 250], [300, 600]], ‘div-gpt-ad-1468349344xxx-5’).
    defineSizeMapping(resMPU2).
    setCollapseEmptyDiv(true).
    addService(googletag.pubads());
    gptAdSlots[4] = googletag.defineSlot(‘/1245037/mpu_content_mobile_xxx’, [[300, 100], [300, 250]], ‘div-gpt-ad-1468349344xxx-3’).
    defineSizeMapping(resContentMPU).
    addService(googletag.pubads());
    gptAdSlots[5] = googletag.defineSlot(‘/1245037/wallpaper_xxx’, [1, 1], ‘div-gpt-ad-1468349344xxx-6’).
    defineSizeMapping(resWallpaper).
    setCollapseEmptyDiv(true).
    addService(googletag.pubads());
    googletag.pubads().enableSingleRequest();
    googletag.enableServices();
    });

    Reply
  3. Pogoda

    Great examples. It really works on dev now

    Reply
  4. Wayne Psaila

    Kean. Thanks for this article. Very helpful (far superior to Google’s rather ambiguous guides. I have one more question.

    Could you please show how the actual code is implemented within the on the relevant Ad Unit itself. That is I’m really struggling to get that part working correctly. Thanks in advance.

    Reply
  5. remy

    have to write again because of the code that you don’t see:

    Hi and thx for your explanation
    Its not working for me and i really don’t understand why
    Here is the code, if you like to help me:
    //head
    //script//
    async=’async’ src=’https://www.googletagservices.com/tag/js/gpt.js’
    //endscript//
    //script//
    var googletag = googletag || {};
    googletag.cmd = googletag.cmd || [];
    //endscript

    //script//
    googletag.cmd.push(function() {

    var leaderboard_mapping = googletag.sizeMapping().
    addSize([1024,768],[728,90]). // ORDI BUREAU
    addSize([960,600],[468,60]). // TABLETTE
    addSize([640,480],[300,75]). // SMARTPHONE
    addSize([0, 0], [[320, 50], [1, 1]]). //other
    build();
    googletag.defineSlot
    (‘/16839535/IMMO.CO.IL/IMMO-728-90-TOP’, [[728, 90], [468, 60], [300, 75]], ‘div-leaderboard’).
    defineSizeMapping(leaderboard_mapping).
    addService(googletag.pubads());
    googletag.pubads().enableSingleRequest();
    googletag.enableServices();
    });
    //endscript//
    //BODY//
    //div// id=’div-leaderboard’ // enddiv//
    //script// googletag.cmd.push(function() { googletag.display(‘div-leaderboard’); }); //endscript//

    thank you

    Reply
  6. Ashley

    This seems to be working for my site, but only the larger sizes. I feel like I’m missing something. Smaller ad sizes are being blocked. Thoughts?

    Reply
  7. Gregory

    Hi, first article thats sort of understandable. We don’t use Adsense at all, but our client wants a responsive ad. Question is, does this change in code deliver a different creative based on the addSize condition, or does it shrink or expand one creative for each condition?

    Reply
    • Ty Gossman

      Same question as Gregory here…
      When Creating Ad Campaigns, is it necessary to load a Creative for all of those sizes then???
      [venting]
      If so, that is very cumbersome, when the solution should be able to be handled by simple CSS, if not for Google’s platform issues making sizing so difficult.

      Reply
      • MonetizeMore

        Yes, unfortunately you do need a creative for all sizes.

        Reply
  8. Anson

    Excellent, better explanation than the DFP University tutorial

    Reply
  9. Haris

    It works..! Now i have a fluid ads from DFP inside my article after i just change to responsive template. Thank you very much for this brilliant tutorial, thought i have read and read it for the whole evening because i really dont understand code but now everything work.
    @Yuri, you have two dots just before defineSizeMapping at the last line, if you remove one, it should work, i think.

    Reply
  10. Francisco

    Why do you set up an [1,1] in each adunit mapping ? I think that divs won’t collapse if you call in last instance to a 1×1 pixel because divs won’t be empty.

    Thanks

    Reply
  11. Bhagyesh

    Hey, can you please provide Video Tutorial for this?

    Reply
  12. dhruv

    Now that enableSyncRendering(); is sunset, how will it affect the code?

    Reply
    • MonetizeMore

      Just remove the enableSyncRendering from your code, it will now have no effect (or just leave it in; it will be ignored). All ads will now render in async mode.

      Reply
  13. Jessie

    Hello,

    This article is great. Thank you!

    I have a questions regarding the responsive ad units.

    After the tag is ready and implemented in the website , do I have to upload 2 different creatives for the line item (for example 970×90 and 728×90) so when the larger one cannot be served, the smaller will replace him

    OR

    I have to upload only one creative 970×90 and if it cannot be served on the specific browser it will automatically get resized to 728×90 and it will be served.

    I am not sure how the process of responsive banners works.

    Thank you!

    Best Regards,

    Jennifer

    Reply
    • MonetizeMore

      Option 1, you need new creatives for each size. Automatic resizing in instances like this would mess with the aspect ratio, and you might want to change the layout for smaller creatives to increase readability.

      Reply
  14. Sam

    How do you implement “googletag.pubads().setCentering(true);” and force it to be centered?

    Reply
    • Chim

      If you’re using wordpress, advanced ads will solve that,

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *