Online Advertising

Build Responsive Google Ad Manager (DFP) Ad Units – How to guide

December 14, 2018

3735

I was recently implementing ad’s on a clients website using google ad manager (DFP). As a newbie to Ad manager, It was easy for me to create new ad units for the website. It did not take me much time to understand on how to generate GPT Tags (google publisher tags) for the ad units. I placed the generated tags on the website <BODY> slots where I wanted to show the Ad and some generic script for the <HEAD> tag needs to be placed on the <HEAD> section of the website. Voila my ads started showing on the website.

But my client reported that the Ad’s were not responsive and not looking good on mobile and tablets. This was because I had designed my Creatives for Desktop viewport. I searched and found the following article on how to build responsive ads. At the first go it was not easy for me to understand but finally I found success.

Based on my experience I’ll try to explain how to make DFP ad units responsive, will try to make it as simple as I can. Here you go!

Before we begin the actual implementation of responsive DFP ad units, it’s good understand size mapping and ad slots. Knowledge of these two things will make your responsive ads implementation easier.

What is size mapping in ad manager.

Size mapping is actually mapping the size of the browser with the respective ads to be displayed. There are two predefined functions i.e. .sizeMapping and .defineSizeMapping.

.sizeMapping – This function is called first with maps the browser sizes with the ad sizes to be displayed.
.defineSizeMapping – This function is called to implement the mapping which is defined via .sizeMapping.

Note: Browser size or the viewport is different than the actual device size. The browser size is always less than the device size, as you need to substract the size of browser toolbars, scrollbars, borders etc.

To know the viewport (Browser size) of the device, you can use Google publisher console page request tab.

See the example below to better understand .sizeMapping and .defineSizeMapping

var mySizeMapping = googletag.sizeMapping().
addSize([1280, 768], [1168, 150]).
addSize([728, 300], [728, 90]).
addSize([0, 0], [300, 250]).
// Any browser size small than 728x300 will show ads 300x250
build();
adSlot.defineSizeMapping(mySizemapping);

In the above example code the parameter on addSize is the size of browser and each subsequent parameter is the dimension of ad size. In the above code, the first addSize defined above, [1280, 768] is the browser size and [1168, 150] is the ad size.

Where browser size will have single parameter, the ad sizes can have multiple parameters. GPT will detect the size of browser and show the largest ad size that fits the browser. GPT considers the width first and then the height of the ad size.

A size mapping of [0, 0] is used to show corresponding ad size on any browser.

Follow the steps below to make responsive DFP ad units

STEP 1: Generate Google Publisher Tags (GPT) using Ad manager. Place the code on your website HEAD and BODY Sections

When you generate tags from your Ad manager account, you get code to be placed on HEAD and BODY sections of your website. The code looks something similar to the below code

Note: Your code would have different Ad ID and Ad slot, other details may be same

GPT for head section

<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
</script>

<script>
googletag.cmd.push(function() {
googletag.defineSlot('/21695176275/My-Bottom-Ad', [[1168, 150], [728, 90], [300, 250]], ‘div-gpt-ad-1535019422815-0’).addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>

GPT for BODY Section

<!-- /21695176275/My-Bottom-Ad -->
<div id=’div-gpt-ad-1535019422815-0’>
<script>
googletag.cmd.push(function() { googletag.display(‘div-gpt-ad-1535019422815-0’); });
</script>
</div>

Note: I’m assuming you’ve already placed the above scripts on your website. Now you are looking to make your Ad’s responsive. Follow below steps for the same.

STEP 2: Create Size Mapping by making changes on the HEAD section script

With the below code we create the size mapping to map the size of the browser and the respective size of the creative (Ad) to be displayed on that viewport. Also for better understanding I’ve defined the purpose of code in Comments above the code.

<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
</script>

<script type='text/javascript'>
var gptAdSlots = [];
googletag.cmd.push(function() {
// Create the size mapping for Bottom Ad position. If browser viewport is more than 1280x768 show creative banner 1168x150. If browser viewport is more than 728x300 (but below 1280x768) show creative banner 728x90, if browser viewport is less than 728x300 show creative banner 300x250
var bottomAdSizes = googletag.sizeMapping().addSize([1280, 768], [1168, 150]).addSize([728, 300], [728, 90]).addSize([0, 0], [300, 250]).build();

Note: I do not have the ending </script> tag above as that will come in the next step when we attach the size mapping to the Ad slot.

STEP 3: Attach the Ad Slot to Size Mapping

Here we define the Ad slots and attach it to the size mapping created on the previous step. This tells Ad manager (DFP), what creative to serve on what device.

// Now create the bottom Ad slot. Please note that we add all the sizes described in the size mapping. This needs to be defined in the DFP(Google Ad Manager) Ad Unit configuration also. Note the part of code: .defineSizeMapping(bottomAdSizes) – This is same variable we created in previous step. It tells Ad manager (DFP) what creative to serve on what browser viewport size, You’re attaching the size mapping to the Ad slots here.
gptAdSlots[0] = googletag.defineSlot('/21695176275/My-Bottom-Ad', [[1168, 150], [728, 90], [300, 250]], 'div-gpt-ad-1535019422815-0').defineSizeMapping(bottomAdSizes).addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.companionAds().setRefreshUnfilledSlots(true); 
googletag.pubads().enableVideoAds(); 
googletag.enableServices();
}); 
</script>

STEP 4: Final code to make responsive DFP Ad units.

You will have to create a size mapping variable for every ad unit, which you can attach to the ad slots when you call them. For a single responsive Ad unit the final code will be something similar to the below code.

<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
</script>

<script type='text/javascript'>
var gptAdSlots = [];
googletag.cmd.push(function() {

var bottomAdSizes = googletag.sizeMapping().addSize([1280, 768], [1168, 150]).addSize([728, 300], [728, 90]).addSize([0, 0], [300, 250]).build();

gptAdSlots[0] = googletag.defineSlot('/21695176275/My-Bottom-Ad', [[1168, 150], [728, 90], [300, 250]], 'div-gpt-ad-1535019422815-0').defineSizeMapping(bottomAdSizes).addService(googletag.pubads());

googletag.pubads().enableSingleRequest();
googletag.companionAds().setRefreshUnfilledSlots(true); 
googletag.pubads().enableVideoAds(); 
googletag.enableServices();
}); 
</script>

I must say that implementing responsive ad manager code is easier than explaining. I tried my best to explain the browser size mapping with ad slots to make the DFP ad units responsive.

Next steps

How to hide DFP ads on specific devices.

There are scenarios where you want to show ads on specific devices and hide (supress) on some. Below example code shows how to hide ads on specific browser (viewport) sizes.

Note: I’ve mentioned the comments on the below code to help you better understand, where the ads will be displayed.

// The below sizeMapping will show the ads only on desktop size viewports.
var desktopMapping = googletag.sizeMapping().
addSize([1050, 400], [1000, 90]). // viewport size for desktop
addSize([0, 0], []).
build();

// This mapping will only display ads when user is on mobile or tablet sized viewport
var mobileTabletMapping = googletag.sizeMapping().
addSize([0, 0], []).
addSize([320, 400], [300, 250]). // Tablet or Mobile size viewport
addSize([1050, 400], []). // Desktop size viewport will not show any ads
build();

// Define GPT ad slots
var gptAdSlots = [];

gptAdSlots[0] = googletag.defineSlot('/21695176275/My-Bottom-Ad', [1000, 90], 'div-gpt-ad-1535019422815-0').
defineSizeMapping(desktopMapping).
addService(googletag.pubads());

gptAdSlots[1] = googletag.defineSlot('/21695176275/My-Bottom-Ad', [300, 250], 'div-gpt-ad-1535019422815-0').
defineSizeMapping(mobileTabletMapping).
addService(googletag.pubads());

// The below code will start fetching ads
googletag.enableServices();

Let me know if I missed something or if this code can be improved to make it simpler for implementation. Your comments are welcome for a discussion on this.

Happy Advertising!