Responsive Ads with DFP

Class, training and certification for DFP

Using the GPT API, you can specify one or more sizes as the size set for an ad slot. When using the responsive ad functionality, you can also choose an alternate size set based on the size of the browser. For example, you can specify that if the browser is larger than 1024×768, then ads sized either 970×90 or 728×90 should serve, whereas for smaller browsers only 468×60 ads should serve. You may want to specify different size setups for desktop, tablet, and mobile devices.

Mappings are ordered automatically so that the best-sized creative is used. You can specify a default ad unit size to serve an ad that will fit any browser size if none of the other sizes matches those of the visitor’s browser.

Responsive ad tagging functions for GPT will work in both asynchronous and synchronous modes. However, we recommend not enabling synchronous requests, as synchronous ad tags can delay the loading of a page’s content.

Specify browser and ad dimensions

First, call .sizeMapping to map the ad sizes to browser sizes and then call .defineSizeMapping to implement the mapping:

Please note that the available browser size is less than the actual device size. For example, the device size of an iPad 2 is 1024×768 but the browser size which you would use for mapping responsive ads is 980×690.

You can use Google Publisher Console’s page request tab to find out the browser size of the device.

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

The first dimension you specify for addSize is the browser size and each subsequent dimension is an ad size. For example, in the first addSize defined above, [1024, 768] is the browser size and [970, 250] is the ad size.

GPT will detect the browser size and use the largest mapping that fits. To determine the largest mapping GPT will first consider width, then height (i.e. [100, 10] > [10, 100]). A browser size mapping of [0, 0] can be used to specify a default mapping that can be used on any browser size.

To specify an ad that will fit any browser size, map an ad size to the [0, 0] browser size.

If there is an error in the mapping or if the browser size can’t be determined, the sizes specified in .defineSlot will be used.

The adslot.defineSizeMapping() method will receive an array of mappings in the following form: [ [ [ 1024, 768 ], [ [ 970, 250 ] ] ], [ [ 980, 600 ], [ [ 728, 90 ], [ 640, 480 ] ] ], …], (green – browser size, red – slot sizes), which should be ordered from highest to lowest priority. The builder syntax is a more readable way of defining the mappings that orders them automatically. However, you have the option of using different priority ordering by bypassing the builder and constructing the array of mappings manually.

If you want to show some ads in specific devices you can suppress (not show) ads for certain browser sizes.

// This mapping will only display ads when user is on desktop sized viewport
var mapping1 = googletag.sizeMapping().
  addSize([0, 0], []).
  addSize([1050, 200], [1024, 120]). // Desktop
// This mapping will only display ads when user is on mobile or tablet sized viewport
var mapping2 = googletag.sizeMapping().
  addSize([0, 0], []).
  addSize([320, 700], [300, 250]). // Tablet
  addSize([1050, 200], []). // Desktop
// GPT slots
var gptAdSlots = [];
gptAdSlots[0] = googletag.defineSlot('/123/sample/firstAd', [1024, 120], 'ad-slot-1').
gptAdSlots[1] = googletag.defineSlot('/123/sample/secondAd', [300, 250], 'ad-slot-2').
// Start ad fetching

You can also control the position of the ads on different devices by creating ad slots for all possible positions and enabling certain slots to be shown only for specific browser ranges.

Learn more about the way the refresh function works with GPT in the Google Publisher Tag API reference guide. To see an example, see the “Implementing tags for responsive design” section in the Advanced GPT samples.

GPT responsive ads do not resize on change in the size of the browser. You can add your own custom code to refresh the ad slots on resize.

Traffic responsive ads

When you use responsive ads with Google Publisher Tags, ads are displayed based on the browser size and device. The mapping function ensures that the correct sized ad request is made to DFP based on the screen size of the device making the request.

You cannot traffic responsive AdSense tags in DFP. Instead, you must implement responsive tags using GPT on the corresponding page. Specify the height and width of the AdSense tags according to the standard ad formats supported by Ad Sense, as portrayed in these sample responsive tags.

Here’s an example of how you would implement a responsive ad with AdSense tags using a 320×100 size for mobile, 300×250 for a tablet, and 336×280 for desktop:

  1. Implement your responsive Google Publisher Tags on the page.
  2. Create an AdSense line item specifying the three sizes (320×100, 300×250, and 336×280) and target it to the ad unit you used to create the responsive tags.
  3. Add three creatives for the respective sizes to the AdSense line item with the AdSense code trafficked in them.

When serving Ad Exchange creatives from DFP, we recommend you use asynchronous rendering with single request mode for a faster page load experience. Avoid rendering ads in an iframe, and keep them directly on the page.

Written by: admin

%d bloggers like this: