Use 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 mobile device.
With the GPT API, you can specify one or more sizes as the size set for an ad slot. When you use the responsive ad functionality, you can also choose an alternate size set based on the size of the browser.
Example
If the browser is larger than 1024x768, you can specify that ads sized either 970x90 or 728x90 should serve, whereas for smaller browsers only 468x60 ads should serve.
You may want to specify different size mappings for desktop, tablet, and mobile devices.
- Any references to the size of the browser actually refer to the size of the viewport, or the space in which the content appears.
- The browser size doesn't include browser toolbars, scrollbars, borders, etc.
Size mappings are ordered automatically so 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 ads are not supported for video companion ads.
Specify browser and ad dimensions
Every ad slot you define must specify the ad size(s) eligible to serve in that slot. The way ad sizes are specified varies depending on the type of ads to be displayed, as well as the size and flexibility of the ad slots themselves.
Code samples for fixed-sized ads, multi-size ads, responsive ads, and more are available in the GPT developer documentation.
Read the GPT Developer Documentation
Collapse empty ad slots
If you know that one or more ad slots on your page isn't always filled, you can instruct the browser to collapse empty divs by adding the collapseEmptyDivs() method to your tags.
This method may trigger a reflow of the content of your page, so how you use it depends on how often you expect an ad slot to be filled.
Use the collapseEmptyDivs() method to collapse an empty <div>. Otherwise, you'll be left with a blank space on the page when an ad isn't served to an ad slot.
Read the GPT Developer Documentation
Traffic responsive ads
When you create responsive ads with the GPT 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.
Example
Implement a responsive ad with AdSense tags using a 320x100 size for mobile, 300x250 for a tablet, and 336x280 for desktop:
- Add your responsive ad to your webpage with GPT.
- Create an AdSense line item specifying the three sizes (320x100, 300x250, and 336x280).
- Target the line item 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.