Traffic anchor ads on web

You can traffic anchor ads that appear at the top or bottom of your web pages, or on the side of desktop pages. These ads remain in view as the user scrolls. Anchor ads allow you to improve the monetization of your web pages, using a high-performing format that is compliant with the Better Ads Standards. Users can dismiss an anchor ad at any time by clicking the arrow.

Anchor ads support header bidding through custom elements and format-specific logic within the creative response. The header bidding wrapper is responsible for ensuring its creative is properly embedded in the same iFrame as the shell creative.

Top anchor ads

A top anchor ad is initially hidden to make sure menus at the top of the page aren't covered. Anchor ads appear as the user scrolls. To ensure content isn't covered when the user scrolls to the top of the page, space is reserved at the very top by setting padding-top to match the height of the slot on the body element. Make sure the CSS on your site causes the space to be reserved.

Example of a top anchor ad on mobile web

Dismissed	Anchor

Example of a top anchor ad on desktop

Dismissed

Example of a dismissed anchor ad for desktop, anchored to the top

Anchor

Example of an anchor ad for desktop, anchored to the top

Bottom anchor ads

Bottom anchor ads appear after the ad has been fetched. To make sure content isn't covered when the user scrolls to the bottom of the page, space is reserved at the very bottom by setting padding-bottom matching the height of the slot on the body element. Make sure the CSS on your site causes the space to be reserved.

Example of a bottom anchor ad on mobile web

Dismissed	Anchor

Example of a bottom anchor ad on desktop

Dismissed

Example of a dismissed anchor ad for desktop, anchored to the bottom

Anchor

Example of an anchor ad for desktop, anchored to the bottom

Side rail anchor ads

Side rail anchor ads are a type of ad unit that appear on the side of desktop pages, where space is generally free. Ads appear as soon as the ad has been fetched. The ad size is optimized for the available space but if side rail anchors are not supported, the ad doesn’t render.

If the window is resized causing the ad to not fit in the empty space anymore, the slot is temporarily hidden until space becomes available again. The ad slot gets as close as possible to the main content, in the 5 pixel to 25 pixel range.

Example of a side rail anchor ad on desktop

Dismissed

Example of dismissed side rail anchor ads for desktop

Anchor

Example of side rail anchor ads for desktop

Collapsible anchor ads for mobile web

Similar to collapsible banner ads for mobile apps, collapsible anchor ads appear at half of the screen height. Users can immediately collapse them to the standard anchor size. This is an enhancement to the anchor ad format and is currently in Beta.

Learn more about collapsible anchor ads for mobile web.

Web anchor sizes

Inventory type	Sizes
Traditional reservations	These reservation sizes are supported: Mobile web: 320x50, 320x100 Tablet: 728x90 Desktop: 728x90, 980x90, 990x90, 970x90
Programmatic demand	For programmatic: Anchor ads are sized appropriately for their window. The actual creative size correlates to the viewport to make sure it doesn't interfere with the user experience.

Inventory type

Sizes

Traditional reservations

These reservation sizes are supported:

Mobile web: 320x50, 320x100
Tablet: 728x90
Desktop: 728x90, 980x90, 990x90, 970x90

Programmatic demand

For programmatic:

Anchor ads are sized appropriately for their window.
The actual creative size correlates to the viewport to make sure it doesn't interfere with the user experience.

Get started

For details on tagging, like device targeting or how to control whether an anchor slot is created on desktop or mobile, go to the developer documentation.

Tagging for anchor ads

Add the TOP_ANCHOR or BOTTOM_ANCHOR slot type to your web page, ideally within the <head> element.
Display the ad slot as you would any other ad slot.
defineOutOfPageSlot() returns null if the page doesn't support the format.
For side rail anchor ads:
1. Create a new GPT slot in the <head> element of your web page using: LEFT_SIDE_RAIL or RIGHT_SIDE_RAIL.
2. You can demo side rail ads on any page that shows ads with GPT by adding #gamLeftSideRailDemo or #gamRightSideRailDemo.

Tagging tips

Only add anchor slots where you want an ad to be shown. Be aware that anchor ads are not limited to mobile devices. If you serve the same code to both mobile and non-mobile users, it's recommended to explicitly define when and where anchor ads should be shown for each environment. See an example of how to target by device in the developer documentation.
To see what your page would look like with a top or bottom anchor ad, append the hash parameter #gamTopAnchorDemo or #gamBottomAnchorDemo to any page that already loads gpt.js.
You can demo side rail ads on any page that shows ads with GPT by adding #gamLeftSideRailDemo or #gamRightSideRailDemo.