3/19/2015

Google DFP and AdSense: How to create Responsive Ad Sizes for different browser & screen dimensions (using GPT)

Responsive Web Design and Ads Served by Google's Double-Click for Publishers (Small Business)


Once, upon a time you could rest assured that your web page was going to be viewed on a desktop computer hooked up to a land line running Windows, Netscape or Internet Explorer, and the maximum dimensions of the screen was 640 x 480.

In 2015, we have all types of computing devices, screen dimensions, browser types, operating systems, and internet connections, right?

TLDR: AdSense's new Responsive Unit's don't yet work with DFP. Instead, you'll change the Javascript ad tags that DFP generated for you. Add a sizeMapping to the header function. Then, you'll assign that mapping to the specific tag with a defineSizeMapping() function. After that, the DFP ads should be different based on the size of your browser's screen dimensions. Skip to instructions below.

The code for this project is at the end. But first, I just wanted to explain what Google's two ad-serving products are, and how they relate to one another -- AdSense and DFP.

AdSense and the new Responsive Ad Unit


Google's AdSense program is still the #1 advertising platform for publishers. Defining AdSense ads is pretty darn easy to do. And the code has been updated by Google so that you can now just plop a couple lines of Javascript into your design wherever you want the AdSense ad to show up.

AdSense also has a "Responsive Ad Unit" that you can specify instead of specifying the dimensions. You just drop in that responsive code and don't have to worry about any other programming to match the dimensions of the browser or device.

The one catch seems to be that, once the ad is shown, it does not resize to fit a browser window that changes dimensions (if the rectangular device is rotated or window is resized).

Double-Click for Publishers and the Problem with Ad Unit Specifications


However, many sites sell their own advertising (or hope to), and use Google's free DFP platform to serve banner ads (aka creatives). The creatives are often of different ad sizes to suit the designs of the publishers -- [300 x 250], [160 x 600], [728 x 90] are the most common "ad unit" sizes.

A DFP user can define names for these ad units -- ex. BigBox_TopBigBox_EmbedSkyscraperRight_SideLeaderboard_Bottom. These slots are then grouped together as "placements."

Setting up DFP to use AdSense


Sometimes a DFP user has no ad inventory ready. Either the advertisers have not provided ads for a specific ad unit size, or the ad units have gone unsold. The DFP user can do a couple of things to fill these blanks spots:

  1. Create their own Promotions / House Ads. Under Line Items > Settings, there is a "Type" menu which allows you to choose a low priority "House (16)."
  2. Default to using Google AdSense ads. First connect your DFP account to your pre-established AdSense account. Then, under Inventory > [Specific Ad Unit], check the box that says -- "AdSense inventory settings [x] Maximize revenue of unsold and remnant inventory with AdSense."

Having done that already, you can now worry about how ads are presented on different browser sizes.

Can I use a House Ad to serve an AdSense Responsive unit?


No. It probably won't show. Google doesn't like it anyway. There's a better way....

Setting Up DFP to Show on Your Site


When you want to get the Javascript code from DFP to place on your site, you will probably go to:
Inventory > Generate Tags. 

For whatever reason, Google chose to refer to these pieces of Javascript as "Tags."

There you can include the ad units you want to place on your site. The code you get comes in two parts and resembles something like this: 

<html>
<head>
<script type='text/javascript'>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
var gads = document.createElement('script');
gads.async = true;
gads.type = 'text/javascript';
var useSSL = 'https:' == document.location.protocol;
gads.src = (useSSL ? 'https:' : 'http:') + 
'//www.googletagservices.com/tag/js/gpt.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node);
})();
</script>

<script type='text/javascript'>
googletag.cmd.push(function() {
    googletag.defineSlot('/99999999999/BigBox_Lower', [300, 250], 'div-gpt-ad-1426751800839-0').addService(googletag.pubads());
    googletag.defineSlot('/99999999999/Leaderboard_Upper', [728, 90], 'div-gpt-ad-1426751800839-1').addService(googletag.pubads());
    googletag.defineSlot('/99999999999/Skyscraper_Lower', [160, 600], 'div-gpt-ad-1426751800839-2').addService(googletag.pubads());
    googletag.pubads().enableSingleRequest();
    googletag.enableServices();
});
</script>
</head>
<body>


<!-- BigBox_Lower -->
<div id='div-gpt-ad-1426751800839-0' style='width:300px; height:250px;'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1426751800839-0'); });
</script>
</div>

<!-- Leaderboard_Upper -->
<div id='div-gpt-ad-1426751800839-1' style='width:728px; height:90px;'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1426751800839-1'); });
</script>
</div>



<!-- Skyscraper_Lower --><div id='div-gpt-ad-1426751800839-2' style='width:160px; height:600px;'><script type='text/javascript'>

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1426751800839-2'); });</script>

</div>
</body>
</html>

The <head> section will contain the script that connects to Google. And it will also contain code for each ad unit that you included. A bit about the code itself and the matching highlighted colors:

  • Your DFP Publisher ID and Name of the Ad Unit.
  • The dimensions of the Ad Unit.
  • A (somewhat arbitrary) identifier used to invoke your ad unit and place it inside of a <div> of the same id.

Using DFP and Publisher Tags to Show Different Ad Sizes and Responsive Web Sites


You are going to use the Google Publisher Tag API to do a "Size Mapping" that says basically, "If the screen is this size or bigger, use an ad unit with this size dimensions; and if it's smaller than that, use this other ad unit size."

Most likely, your concern has to do with wide "leaderboard" ads -- 728px by 90. They're fine on your desktop layout, but with responsive content, the whole right side is lost. Nearly useless.

So, what alternative ad sizes do you have?

  • Maybe a standard "medium rectangle" = 300 x 250.
  • Maybe the "mobile leaderboard" = 320 x 50.
  • Maybe the new "large mobile banner" = 320 x 100.

So, for simplicity, I'm going to work with a decision between 2 options:

  • If the device or browser's screen size is at least 728px wide, show the regular "leaderboard."
  • But, if its anything smaller, show the standard "medium rectangle."

Finally, the Code!


It's really easy to do this. First, inside the "google.cmd.push(function() {", you're going to create a variable that will hold the sizeMapping functions, and parameters that define the substitutions to be used. 

The addSize function receives two parameters -- first the dimensions of the browser window that you specify; and second, the ad unit size that you'd like to show. The addSize functions are hierarchical -- the first one to match the specified window size or larger, seems to be the mapping substitution that gets implemented.

Here, I'm specifiying arguments for two options:
  • "If a screen size / browser window is 728px wide or larger, and the height is 0px or larger, than show an 728x90px leaderboard. 
  • And, if it is anything smaller (bigger than 0x0px), then show a 300x250px medium rectangle." 
Also, I'm assigning the this sizeMapping to a variable called "mapping1". Notice the dot notation after each addSize function call. A final build() function is added to the end.

var mapping1 = googletag.sizeMapping().
   addSize([728, 0], [728, 90]).
   addSize([0, 0], [300, 250]).
   build();

Next, you need to change the leaderboard tag slot definition. You will add a function call or two to the the command. First, you tell the slot that it is going to be associated with the new mapping. Then, you can also tell the command to collapse the <div> if it's empty for some reason. These functions must be added and called before the ending addService function. Each is separated with a dot notation.

    googletag.defineSlot('/99999999999/Leaderboard_Upper', [728, 90], 'div-gpt-ad-1426751800839-1').defineSizeMapping(mapping1).setCollapseEmptyDiv(true).addService(googletag.pubads());

That's it. Even though your leaderboard slot is defined as dimensions of 728x90, Google should detect the screen size and, if it is smaller than 728x90, substitute a 300x250 ad instead.

So, the new section in the header will look like this:

<script type='text/javascript'>
googletag.cmd.push(function() {
  var mapping1 = googletag.sizeMapping().
    addSize([720, 0], [728, 90]).
    addSize([0, 0], [300, 250]).
    build();

  googletag.defineSlot('/99999999999/BigBox_Lower', [300, 250], 'div-gpt-ad-1426751800839-0').addService(googletag.pubads());
  googletag.defineSlot('/99999999999/Leaderboard_Upper', [728, 90], 'div-gpt-ad-1426751800839-1').defineSizeMapping(mapping1).setCollapseEmptyDiv(true).addService(googletag.pubads());
  googletag.defineSlot('/99999999999/Skyscraper_Lower', [160, 600], 'div-gpt-ad-1426751800839-2').addService(googletag.pubads());
  googletag.pubads().enableSingleRequest();
  googletag.enableServices();
});
</script>


See Google's documentation:

4 comments :

  1. If I have a 728x90 and it calls a 300x250 on a smaller browser, how does it know which creative to use? If I have a campaign (Order) for an advertiser, how will I define which creative is pulled?

    ReplyDelete
    Replies
    1. Well I guess that will be done with the placement ad code? But I guess my question then would be... I have an advertise that will be getting the header ad (Leaderboard) and would like to go from 728x90 to 300x250 based on browser... but if combined it is to receive 400k impressions... how would I decipher that? Most users on my site use mobile. I hope this makes sense.

      Delete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
  3. Wonderful responsive settings and units. We have heard a lot about blogging ideas and tactics used by Google Adwords Management for online promotions. Different keywords organized to define the searches play a major role in capturing innumerable customers from different areas of market.

    ReplyDelete