Clear search
Close search
Google apps
Main menu

Build responsive ads

You can use Google Publisher Tags (GPT) to build responsive ads that fit the browser your visitors use to view your website. This means that your ads will look good whether your visitors are using a desktop, tablet, or smartphone.

Building responsive ads (4:43)

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 1024x768, then ads sized either 970x90 or 728x90 should serve, whereas for smaller browsers only 468x60 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. 

For users on slow connections, such as 2G, external scripts dynamically injected using document.write() can delay the display of main page content for tens of seconds. This is another reason why we recommend using asynchronous tags instead of synchronous rendering. Learn more about issues with 2G and document.write()

Any references to the size of the "browser" actually refer to the size of the viewport, or the space in which the content appears. It is not inclusive of browser toolbars, scrollbars, borders, etc.

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 1024x768 but the browser size which you would use for mapping responsive ads is 980x690.

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 320x100 size for mobile, 300x250 for a tablet, and 336x280 for desktop:

  1. Implement your responsive Google Publisher Tags on the page.
  2. Create an AdSense line item specifying the three sizes (320x100, 300x250, and 336x280) 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.

Was this article helpful?
How can we improve it?