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 (Originally, Google DFP) 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 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 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 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), going to Inventory > 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.