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 –>
<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 for a Premium account at MonetizeMore today!
Related Reads:
- AdSense Offers Responsive Ad Units
- Top Mobile Ad Types for 2016
- The Benefits of Doubleclick’s Accelerated Mobile Pages for Publishers
- How to make Publishers Ready as Mobile Ad Spending Surpasses Desktop
- Doubleclick Now Offers Cross-Device Tracking & Native Advertising to Mobile Advertisers & Publishers
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.
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.
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());
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();
});
Great examples. It really works on dev now
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.
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
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?
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?
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.
Yes, unfortunately you do need a creative for all sizes.
Excellent, better explanation than the DFP University tutorial
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.
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
Hey, can you please provide Video Tutorial for this?
Now that enableSyncRendering(); is sunset, how will it affect the code?
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.
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
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.
How do you implement “googletag.pubads().setCentering(true);” and force it to be centered?
If you’re using wordpress, advanced ads will solve that,