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.
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. 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.
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.
For users on slow connections, such as 3G, external scripts dynamically injected using
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 3G. Learn more
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 developer documentation.
If you know that one or more ad slots on your page don't always get 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.
If you don't use the
collapseEmptyDivs() method, an empty
<div> won't collapse and the page content will never be reflowed. This may result in a blank space on the page if an ad isn't served to one of its ad slots.
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.
Here's 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 single request mode for a faster page load experience.