Build responsive ads
You can use the Google Publisher Tag (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.
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.
document.write()can greatly delay the display of main page content or cause pages to either fail to load or take so long enough that users leave pages before they render. Pages featuring third-party scripts inserted via
document.write()are typically twice as slow to load than other pages on 2G. Learn more
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
.sizeMapping to map the ad sizes to browser sizes. 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.
adslot.defineSizeMapping() method will receive an array of mappings in the following form: [ [ [ 1024, 768 ], [ [ 970, 250 ] ] ], [ [ 980, 690 ], [ [ 728, 90 ] ] ], ...], (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 = googletag.defineSlot('/123/sample/firstAd', [1024, 120], 'ad-slot-1').
gptAdSlots = 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(opt_slots, opt_options) 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 the Google Publisher Tag library, ads are displayed based on the browser size and device. The mapping function ensures that the correct sized ad request is made to Ad Manager based on the screen size of the device making the request.
You cannot traffic responsive AdSense tags in Ad Manager. Instead, you must implement responsive tags using GPT on the corresponding page. Specify the height and width of the AdSense tags according to the display ad formats supported by Ad Sense, as portrayed in these sample implementation of 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:
- Implement your responsive Google Publisher Tag on the page.
- 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.
- 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 Ad Manager, 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.