1 0 6000 0 600 120 30 https://headerbidding.co 960 0
site-mobile-logo
site-logo

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

Google Ad Manager Responsive Ads
As a publisher, you may want to run responsive ads via Google Ad Manager. Well, it is not as complicated as you think. Let us help you set it up.

Today, publishers typically see a major part of traffic coming from mobile devices and so, they have to figure out how to deliver consistent and better ad experience to the users across the different devices. That’s why, Google Ad Manager (formerly, Google DFP) introduced responsive ads that can be made adaptive to the size of the device’s screen they are being viewed on. In this post, we’ll help you set up Google Ad Manager to run responsive ads on your site. 

Table of Contents

Let’s start with the basics. 

What are Responsive Ads?

Responsive ads are the ads that are rendered in a way to ensure a seamless ad experience for the users across any device (desktop, mobile, or tablet). Let’s assume you are having a display banner ad of 970×90 or 728×90. When a user shifts from a desktop to mobile and views the ad, the ad will contract automatically according to the size of the mobile web browser.

Google Ad Manager adjusts the size, and appearance of the ad creative to fit into the ad space of the device. A responsive ad can be displayed as a native ad on one page and a dynamic text ad on another page.

You can provide additional flexibility to your ad units. For example, if the browsers’ size is greater than 1024×768, then an ad with 970×90 or 728×90 size may serve. If the browser’s size is smaller than 1024×768, then an ad with 468×60 size may serve. 

In overall, here’s a summary of what responsive ads do:

  • Based on the availability of ad space, responsive ads adapt the ad unit size to the page layout of a device.
  • If the orientation of a device changes (from landscape to portrait and vice-versa), these ads get changed automatically to fit into the new page layout.

Now, let’s find out how to get started with responsive ads in Google Ad Manager.

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

In Google Ad Manager, publishers can use Google Publisher Tags to build responsive ads that can fit the visitor’s browsers. Using the size mapping function, publishers can swap out ad tags based on the screen size of the device. So, to do this, you need to start with generating Google Publisher Tags while creating line items. If you’re wondering how to do it, then, here’s a detailed article for you.

Step #1: Generate Google Publisher Tags

Once you generate the GPT for ad units, you can see codes that need to be placed on the header and body part of the websites.

A simple GPT Head tag looks like the following:

<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 is the process of designing responsive ads for Google Publisher Tags. In general, the process completes in just two steps:

  • .sizemapping function that is used to map the ad size with the browser’s size and
  • .definesizemapping is used to implement the mapping defined by the former function (.sizemapping). This instructs the Ad Manager where the defined ad sizes will be served.

Here’s an example of how sizeMapping snippet looks like and we’re going to use this example to create ad size mapping down below.                                          

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

Here, the first block of addsize( ) i.e. [1024, 768] displays the browser’s size and the second [970, 250] displays the ad size. This mapping implies that if a browser’s size is equal to or smaller than 1024×768, then the size of the ad will be 970×250. 

Sidenote: Use Google Publisher Console’s Page Request tab to find out the browser’s size of the device (Browser viewport width and height). 

Browser Viewport Size via Google Publisher Console

Google Publisher Tags detects the browser size automatically and uses the size mapping that makes the ad fit into the viewport of the browsers. In case you want to create a default mapping, then [0,0] is the size that tells the server the ad size can be fit for any browser. 

Consider a situation where you forgot to mention what size of an ad should serve if the browser’s viewport is smaller than 640×480. In such a case, [0,0] mapping serves the default ad size that makes the ad fit into any device the size is not mapped.

GPT with ad size mapping:

<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

Further, if you want not to show ads on a particular device, you can suppress the ads for other formats. However, you need to make a few changes in the code that are given below.

Step #2A: Add the script to display ads to desktop visitors only.

//This mapping will only display ads when the user is on desktop-sized viewport

var mapping1_desktop = googletag.sizeMapping().

  addSize([0, 0], []).

  addSize([1050, 200], [1024, 120]). // Viewport size for desktop

  build();

Step #2B: Add this script to display ads to mobile or tablet users only.

//This mapping will only display ads when user is on mobile or tablet sized viewport

var mapping2_mobile = googletag.sizeMapping().

  addSize([0, 0], []).

  addSize([320, 700], [300, 250]). // Viewport size for tablet and mobile

  addSize([1050, 200], []). // This will not restrict ads for desktop size viewport

  build();

Since you have mapped the ad size and implemented GPT on the site, it’s time to link the mapping to the ad slots in Google Ad Manager. But, before attaching the ad slots to size mapping, publishers require additional coding for the GPT header tag. Add the below code to header part of GPT.

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()); //It tells the ad server what creative to serve on the ad slot

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

 });

 </script>

After completing the steps, a GPT that can serve responsive ad units should look like the one below: 

<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()); //It tells the ad server what creative to serve on the ad slot

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

 });

 </script>

Conclusion

Let’s sum it up. Responsive ads solve a lot of problems for publishers because one-size fits-all solution can’t fit in the advertising industry. Ad units needs to fit the device’s screen. Moreover, the correct ad size is determined by the ad server. All you have to paste the head and body code at their respective place. Let us know in the comments if you are facing problems to serve responsive ad units via Google Ad Manager. Need help setting up, contact us today

Automatad Team

At Automatad, we help publishers to monetize better without hampering the user experience. Our products are live across hundreds of publishers, earning them incremental ad revenue with every passing second. You can request a free audit to get an estimated revenue uplift today.

Previous Post
How to Create Unifie...
Learn Programmatic
Next Post
Programmatic Adverti...
2 Comments
  • June 23, 2020 at 10:34 am
    vincesatsong

    How can I map the responsive ads for infinite scroll content?

    Reply
    • June 26, 2020 at 11:11 am

      From your question, we assume you wanted to know how you can apply sizemapping for responsive ads?

      You can use sizemapping while creating new slots. Size mapping isn’t related to infinite scroll ads. In case you have more questions related to infinite scroll ads, we tried to answer a few here – https://headerbidding.co/gpt-infinite-scroll-pages-ads/.

      Thanks.

      Reply
Leave a Reply