Google Ad Manager (DFP) Responsive Ads: A Beginner’s Guide

Reading time: 5 minutes

Nowadays, publishers receive a large percentage of traffic coming from mobile devices. Therefore, it’s both logical and necessary to make sure you’re delivering a consistent and superior ad experience for users that don’t only use their mobile devices to consume content, but other devices as well.

This is precisely why Google Ad Manager[1] (Originally, Google DFP[3]) rolled out responsive ads that can automatically adapt to the size of the screen per device being used.

In this article, we’re going to dive into responsive ads, including how to get them set up via Google Ad Manager so you can run responsive ads from your website. 

Read on to learn more. 

What Are Responsive Ads?

Responsive ads are ads rendered in a way that ensures a seamless ad experience on the user’s end across all devices, including desktop, laptop, mobile, and tablet. In other words, they’re designed to fit any and all screens automatically so they don’t hurt the user experience. 

For example, let’s say you have a display banner ad measuring 728×90 or even 970×90. When a user shifts between mobile and desktop devices, viewing the same ad, the ad will automatically contract or expand according to the size of each device’s web browser.

Google Ad Manager automatically adjusts the size and appearance of the ad creative[4] so it can fit into the ad space of various devices. This means that a responsive ad can be displayed as a native ad on one web page and then as dynamic text on another.

It also allows you to provide more flexibility to your ad units. For example, if the browser in question’s size is larger than 1024×728, then an ad of one of the sizes mentioned above may serve. However, if the browser’s size is smaller than that it may serve an ad that’s 468×60.

In a nutshell, here’s how responsive ads work:

  • The responsive ads will adapt the ad unit[5] size to the specific page and layout of the device being used — depending on the availability of ad space
  • When the orientation of the device being used changes, as in from portrait to landscape or vice versa, the responsive ads automatically change with it to fit the new page layout

How to Make Your Google Ad Manager (DFP) Ad Units Responsive

When using Google Ad Manager, publishers can use Google Publisher Tags to start building their responsive ads to fit the various browsers and devices. For example, by using the size mapping function on the platform, you can swap out ad tags based on a device’s screen size. 

However, to accomplish this you’ll need to start by generating Google Publisher[6] Tags while you create line items. Here’s how it’s done in three steps:

Step #1: Generate Google Publisher Tags

Generating Google Publisher Tags (GPTs)  begins with signing in to Google Ads Manager (GAM[2]), going to Inventory[7] > Ad Units > Generate Tags, and then continuing on to select the appropriate criteria to define their functions. 

Once you generate your tags for each ad unit, you’ll be able to see the codes that need to be placed on the header and body of the websites. 

A basic GPT Head Tag looks like this:

<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(‘/1xxxxxxxxx8/Display_Ad’, [[1168, 150], [728, 90], [300, 250]], ‘div-gpt-ad-1xxxxxxxxxxx5-0’).addService(googletag.pubads());

googletag.pubads().enableSingleRequest();

googletag.enableServices();

});

</script>

And a sample of the Body tag is given below:

<!– /1xxxxxxxxx8/Display_Ad –>

<div id=’div-gpt-ad-1xxxxxxxxxx5-0’>

<script>

googletag.cmd.push(function() { googletag.display(‘div-gpt-ad-1xxxxxxxxxxx5-0’); });

</script>

</div>

Step #2: Create the Ad Size Mapping

Size mapping refers to the process of designing DFP responsive ads for GPTs. Generally speaking, this is a two-step process that uses the .sizemapping function to map the ad size along with the browser’s size and the .definesizemapping function to implement the defined mapping to direct the Ad Manager in terms of where these defined ad sizes will be served. 

Here’s a quick example of a .sizemapping code snippet:                                          

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(mapping);

The first block of the snippet “addSize ([1024, 768], [970, 250])” displays the browser’s size and the second block “addSize ([1024, 768], [970, 250])” displays the add size. Essentially, this mapping is a command that basically says if a browser’s size is equal to or less than 1024×768, then the size of the ad will be contracted to 970×250.

While GPTs automatically detect the browser size and use the size mapping to make the ad fit into each browser’s viewport, you may have to add scripts to the coding to suppress certain ads for other formats.  

Step #3: Link the Size Mapping to GAM Ad Units

Once you’ve mapped the ad size and implemented GPT on your website, you’ll need to link the mapping to the ad slots within GAM. 

This requires some additional coding to the header part of your GPT, as follows:

gptAdSlots[0] = googletag.defineSlot(‘/1xxxxxxxxx8/My-300x250ad’, [[970, 250], [728, 90], [120, 60], [300, 250]], ‘div-gpt-ad-1xxxxxxxxxxx5-0’).defineSizeMapping(bottomAdSizes).addService(googletag.pubads()); // (This tells the ad server what creative to serve on the ad slot)

googletag.enableServices(); // (This tells the ad server to start fetching the ads)

 });

 </script>

Using the above coding, a GPT that serves responsive ad units should look like this:

<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([1024, 768], [970, 250]).addSize([980, 690], [728, 90]).addSize([640, 480], [120, 60]).addSize([0, 0], [300, 250]).build(); //If browser viewport is more than 1024×768 show creative banner 970×250. If browser viewport is more than 980×690, show creative banner 728×90, if browser viewport is less than 640×480 show creative banner 120×60

gptAdSlots[0] = googletag.defineSlot(‘/1xxxxxxxxx8/My-300x250ad’, [[970, 250], [728, 90], [120, 60], [300, 250]], ‘div-gpt-ad-1xxxxxxxxxxx5-0’).defineSizeMapping(bottomAdSizes).addService(googletag.pubads()); // 

googletag.enableServices(); //

 });

 </script>

Using responsive ads is the closest you’ll come to an all-in-one solution. People aren’t just relegated to heavy desktop computers anymore, they’re using smaller screens at quicker paces. Therefore, you need to ensure that your ad units can adapt to fit the various devices and browsers to maintain a steady ad revenue from the ads you’re serving.

Terms
1. Google Ad Exchange ( Google Ad Manager ) Ad Exchange is often referred to as the premium version of AdSense, and also a Google-owned ad network of sorts. To join Ad Exchange, publishers need to meet specific requirements such as 500 000 minimum monthly traffic, be invited or join through a Google certified partner. Recently Google has rebranded this product, and it is now called Google Ad Manager.
2. Google Ad Manager ( GAM ) Google Ad Manager is a combination of both Google Ad Exchange and DoubleClick For Publishers as a unified platform that provides publishers with ad serving services.
3. Google DFP. Google DFP also is known as Google DoubleClick For Publishers is an ad server that provides publishers with ad inventory management and reporting features. Most premium publishers utilize it to optimize their ad inventory revenues. It has also recently be rebranded together with Google Ad Exchange as Google Ad Manager.
4. creative. A creative often refers to the image, gif or file used to display the ad. Often creatives need to be uploaded whereby a code snippet for that creative will be generated.
5. ad unit. Ad Unit is a term commonly used to describe the advertisement space on a website/mobile app – IE a 300×250 ad unit. It’s widely used within Google’s range of advertising products such as Google Ad Manager, AdExchange and AdSense.

Recent Articles

Related Articles

Leave A Reply

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Stay connected

Don't miss out on the latest news, events and special announcements.

By submitting this form, you agree that you've read and accept our Privacy Policy as well as to receive communications from HeaderBidding.com. You may unsubscribe at any time.