How To Make Responsive DFP Ad Units

Kean Graham

9 years ago

google dfp responsive ads - doubleclick tag example

This post was most recently updated on August 31st, 2021

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:

Set up your inventory. Configure all the relevant sizes per ad unit. Read: Adsense and GAM Integration Best Practices
Check our tutorial on how to generate multiple Ad Manager tags here: https://youtu.be/s74dMDzczyc
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).
Make one for the head and another one for body tags.
Save the body tags.
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 –>

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 –>

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 –>

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 for a Premium account at MonetizeMore today!

Related Reads:

Kean Graham

Kean Graham is the CEO and founder of MonetizeMore & a pioneer in the Adtech Industry. He is the resident expert in Ad Optimization, covering areas like Adsense Optimization,GAM 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.