# Display an anchor ad

# Display an anchor ad

This example displays an anchor ad using the Google Publisher Tag (GPT) library.
Learn more about anchor ads in the
[Google Ad Manager help center](https://support.google.com/admanager/answer/10452255).

## Preview anchor ads

You can display a demo anchor ad on any page that shows ads with GPT by adding
`#gamTopAnchorDemo` or `#gamBottomAnchorDemo` to the URL. For example,
`https://www.example.com/#gamTopAnchorDemo`.

This functionality can be used to preview anchor ads on your site with no code
changes required. This is especially useful to quickly validate how anchors will
look and behave on different devices and in different operating environments.

## Usage notes

- **To ensure an optimal user experience, anchor ads are only requested on
  pages that properly support the format.** Because of this,
  `defineOutOfPageSlot()` may return null; you should check for this case to
  ensure you're not doing any unnecessary work. Currently, anchor ads are
  supported if the following conditions are met:

  - GPT is running in the top window.
  - On a mobile optimized page where zoom is neutral; typically this means the publisher has `<meta name="viewport" content="width=device-width,
    initial-scale=1">` or similar in the `<head>` of the page.
  - Viewport is in a portrait orientation with a width between `320px` and `1000px`.
- **Only request anchor ads on pages/environments where you want an anchor to
  appear.** Anchor ads are eligible to serve to desktop, tablet, and mobile
  devices.

  > [!NOTE]
  > **Note:** You can use Chrome DevTools [mobile simulation](https://developers.google.com/web/tools/chrome-devtools/device-mode#viewport) to test anchor ads on mobile from a desktop environment.

- **Anchor ads generate their own ad container.** Unlike other ad types, it's
  not necessary to define a `<div>` for anchor ads. Anchor ads automatically
  create and insert their own container into the page when an ad fills. These
  containers may overlap or occlude other elements using absolute or fixed
  positioning, so it's recommended to avoid placing such elements in areas
  where anchors are meant to appear.

- **If using single-request architecture (SRA) on a page with multiple slots,
  don't call `display()` until static ad slots divs are created.** As
  explained in [Ad Best Practices](https://developers.google.com/publisher-tag/guides/ad-best-practices#use_single_request_architecture_correctly), the first call to `display()`
  requests every ad slot defined prior to that point. Although anchor ad slots
  do not require a predefined `<div>`, static ad slots do. Calling `display()`
  before these elements are present on the page can result in lower quality
  signals, reducing monetization. Because of this, we recommend delaying the
  initial call until after the static slots are defined.

- **Only visible anchor ads may be refreshed.** When an anchor ad slot is
  collapsed or not yet scrolled into view, all calls to `refresh()` are
  ignored. If you're using `googletag.setConfig({ disableInitialLoad: true })`
  to manually [control ad loading and refresh](https://developers.google.com/publisher-tag/guides/control-ad-loading), however, the
  first call to `refresh()` will trigger an ad request regardless of the slot
  visibility.

## Sample implementation

[View demo](https://googleads.github.io/google-publisher-tag-samples/display-anchor-ad/js/demo.html)

> [!IMPORTANT]
> This sample makes use of library features that are not fully supported when running in an iframe. To view a demo of this sample in a new window, click the **View demo** button above.

### JavaScript

## Loading...

<iframe id="builder" class="fixed-size" loading="lazy"></iframe>

## Loading...

[Improve this sample](https://github.com/googleads/google-publisher-tag-samples/tree/main/dist/display-anchor-ad/js) [Report an issue](https://github.com/googleads/google-publisher-tag-samples/issues/new?labels=documentation&template=sample-feedback.md&title=Sample+feedback:+display-anchor-ad/js)

### TypeScript

## Loading...

<iframe id="builder" class="fixed-size" loading="lazy"></iframe>

## Loading...

[Improve this sample](https://github.com/googleads/google-publisher-tag-samples/tree/main/dist/display-anchor-ad/ts) [Report an issue](https://github.com/googleads/google-publisher-tag-samples/issues/new?labels=documentation&template=sample-feedback.md&title=Sample+feedback:+display-anchor-ad/ts)