How to Make Responsive DFP Ad Units

Google has created a way for DFP publishers to display responsive ad units that is harder to explain than it is to do.

“Size mapping” is a set of tags on a site that tells DFP it can safely deliver ad units of specific but varying sizes into a single ad slot.

The following steps explain how to make DFP deliver responsive ad units. The steps use a single ad unit to keep the explanation simple.

1 – Implement or Keep the Top 2 Scripts

The “generate tags” button in DFP usually produces the scripts below.

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

Nothing changes in this code for an existing DFP website.

2 – Create the Size Mapping

First, note the code below has the beginning script tag but not the ending script tag. That will come later.

The critical line starts with “addSize”. The first bracketed numbers represent the browser width and height. The next set of brackets shows the various ad sizes that will deliver to the browser with a width of 992 pixels. Note that a second set of brackets surrounds all of the ad size brackets to define them as a single group.

The “desktop” reference at the end is a note explaining that this set of ad sizes is targeting a desktop visitor.

<script>
 var gptAdSlots = [];
 googletag.cmd.push(function() {
 var mapping = googletag.sizeMapping().
 addSize([992, 0], [[336, 280], [300, 250], [300, 600], [160, 600], 
 [1, 1]]). //desktop

3. Add the Normal Remaining Code

Next we tell DFP to build the display and map the “addSize” to a specific ad unit or “defineSlot” ID number with a default size in DFP of 300×250. Note that this block of code has the ending script tag referenced above.

build();

gptAdSlots[0] = googletag.defineSlot('/1085788/My_300x250a', [300, 250], 
'div-gpt-ad-1507829955453-0').defineSizeMapping(mapping)
.addService(googletag.pubads());

// Start ad fetching
 googletag.enableServices();
 });
 </script>

Observe the relationship between “var mapping” in Step 2 with “(mapping)” in Step 3. That’s where the two sets of code tie together.

It may not be necessary, but for insurance I updated the available ad sizes in DFP for that ad unit to specify the same list of sizes as the code above.

4 – Add More Slots

The code below is an example of tablet and mobile mapping sizes that go under the desktop code for step two.

addSize([768, 0], [[250, 250], [234, 60], [160, 600],
 [120, 600], [120, 240], [1, 1]]). //tablet
 addSize([320, 0], [[320, 50], [320, 100], [300, 250], [1, 1]]). //mobile

When these codes are implemented, a tablet with a maximum width of 768 pixels will display ads no wider than 250 pixels. A mobile device with a maximum browser width of 320 pixels won’t display anything wider than 320.

The width they display depends on the CSS width percentages.

5 – Test the Results

Site DFP tags and DFP may need time to start talking to each other. A publisher can test the results by displaying a page with the tags, shrinking the width and reloading it.

In the above example, a site has a responsive center column that consumes 65% of the width and a right column at 33%. Shrinking the width of the page from the desktop size to the tablet size produced 160×600 ads but no ads at 300 wide.

Another way of testing is within the DFP report function for that ad unit.