이 예에서는 Google 게시자 태그 (GPT) 라이브러리를 사용하여 앵커 광고를 표시합니다.
Google Ad Manager 고객센터에서 앵커 광고에 관해 자세히 알아보세요.
앵커 광고 미리보기
URL에 #gamTopAnchorDemo 또는 #gamBottomAnchorDemo를 추가하면 GPT로 광고를 게재하는 모든 페이지에 데모 앵커 광고를 표시할 수 있습니다. 예를 들면 https://www.example.com/#gamTopAnchorDemo입니다.
이 기능을 사용하면 코드를 변경하지 않고도 사이트에서 앵커 광고를 미리 볼 수 있습니다. 이는 특히 앵커가 다양한 기기와 운영 환경에서 어떻게 표시되고 작동하는지 빠르게 검증하는 데 유용합니다.
사용 참고사항
최적의 사용자 환경을 보장하기 위해 앵커 광고는 형식을 올바르게 지원하는 페이지에서만 요청됩니다. 이로 인해 defineOutOfPageSlot()가 null을 반환할 수 있습니다. 불필요한 작업을 수행하지 않도록 이 사례를 확인해야 합니다. 현재 앵커 광고는 다음 조건이 충족되는 경우에 지원됩니다.
GPT가 상단 창에서 실행 중입니다.
확대/축소가 중립적인 모바일에 최적화된 페이지. 일반적으로 이는 게시자가 페이지의 <head>에 <meta name="viewport" content="width=device-width,
initial-scale=1"> 또는 유사한 항목을 보유하고 있음을 의미합니다.
표시 영역이 세로 모드 방향이며 너비는 320px~1000px입니다.
앵커를 표시하려는 페이지/환경에서만 앵커 광고를 요청합니다. 앵커 광고는 데스크톱, 태블릿, 휴대기기에 게재할 수 있습니다.
앵커 광고는 자체 광고 컨테이너를 생성합니다. 다른 광고 유형과 달리 앵커 광고에서는 <div>를 정의할 필요가 없습니다. 앵커 광고는 광고가 채워질 때 자동으로 자체 컨테이너를 생성하여 페이지에 삽입합니다. 이러한 컨테이너는 절대 또는 고정된 위치 지정을 사용하여 다른 요소와 겹치거나 가릴 수 있으므로 앵커가 표시될 영역에 이러한 요소를 배치하지 않는 것이 좋습니다.
여러 슬롯이 있는 페이지에서 단일 요청 아키텍처 (SRA)를 사용하는 경우 정적 광고 슬롯 div가 생성될 때까지 display()를 호출하지 마세요.광고 권장사항에 설명된 것처럼, display()를 처음 호출하면 이 시점 이전에 정의된 모든 광고 슬롯이 요청됩니다. 앵커 광고 슬롯에는 사전 정의된 <div>가 필요하지 않지만 정적 광고 슬롯에는 필요합니다. 이러한 요소가 페이지에 나타나기 전에 display()를 호출하면 신호 품질이 저하되어 수익 창출이 감소할 수 있습니다. 따라서 정적 슬롯이 정의된 후에 초기 호출을 지연하는 것이 좋습니다.
표시되는 앵커 광고만 새로고침할 수 있습니다. 앵커 광고 슬롯이 접히거나 아직 스크롤되어 표시되지 않으면 refresh()에 대한 모든 호출이 무시됩니다. 하지만 disableInitialLoad()를 사용하여 광고 로드 및 새로고침을 수동으로 제어하는 경우 refresh()를 처음 호출하면 슬롯 표시 여부와 관계없이 광고 요청이 트리거됩니다.
[null,null,[],[],[],null,["# Display an anchor ad\n====================\n\nThis example displays an anchor ad using the Google Publisher Tag (GPT) library.\nLearn more about anchor ads in the\n[Google Ad Manager help center](//support.google.com/admanager/answer/10452255).\n\nPreview anchor ads\n------------------\n\nYou can display a demo anchor ad on any page that shows ads with GPT by adding\n`#gamTopAnchorDemo` or `#gamBottomAnchorDemo` to the URL. For example,\n`https://www.example.com/#gamTopAnchorDemo`.\n\nThis functionality can be used to preview anchor ads on your site with no code\nchanges required. This is especially useful to quickly validate how anchors will\nlook and behave on different devices and in different operating environments.\n\nUsage notes\n-----------\n\n- **To ensure an optimal user experience, anchor ads are only requested on\n pages that properly support the format.** Because of this,\n `defineOutOfPageSlot()` may return null; you should check for this case to\n ensure you're not doing any unnecessary work. Currently, anchor ads are\n supported if the following conditions are met:\n\n - GPT is running in the top window.\n - On a mobile optimized page where zoom is neutral; typically this means the publisher has `\u003cmeta name=\"viewport\" content=\"width=device-width,\n initial-scale=1\"\u003e` or similar in the `\u003chead\u003e` of the page.\n - Viewport is in a portrait orientation with a width between `320px` and `1000px`.\n- **Only request anchor ads on pages/environments where you want an anchor to\n appear.** Anchor ads are eligible to serve to desktop, tablet, and mobile\n devices.\n\n | **Note:** You can use Chrome DevTools [mobile simulation](//developers.google.com/web/tools/chrome-devtools/device-mode#viewport) to test anchor ads on mobile from a desktop environment.\n- **Anchor ads generate their own ad container.** Unlike other ad types, it's\n not necessary to define a `\u003cdiv\u003e` for anchor ads. Anchor ads automatically\n create and insert their own container into the page when an ad fills. These\n containers may overlap or occlude other elements using absolute or fixed\n positioning, so it's recommended to avoid placing such elements in areas\n where anchors are meant to appear.\n\n- **If using single-request architecture (SRA) on a page with multiple slots,\n don't call `display()` until static ad slots divs are created.** As\n explained in [Ad Best Practices](//developers.google.com/publisher-tag/guides/ad-best-practices#use_single_request_architecture_correctly), the first call to `display()`\n requests every ad slot defined prior to that point. Although anchor ad slots\n do not require a predefined `\u003cdiv\u003e`, static ad slots do. Calling `display()`\n before these elements are present on the page can result in lower quality\n signals, reducing monetization. Because of this, we recommend delaying the\n initial call until after the static slots are defined.\n\n- **Only visible anchor ads may be refreshed.** When an anchor ad slot is\n collapsed or not yet scrolled into view, all calls to `refresh()` are\n ignored. If you're using `googletag.setConfig({ disableInitialLoad: true })`\n to manually [control ad loading and refresh](//developers.google.com/publisher-tag/guides/control-ad-loading), however, the\n first call to `refresh()` will trigger an ad request regardless of the slot\n visibility.\n\nSample implementation\n---------------------\n\n[View demo](https://googleads.github.io/google-publisher-tag-samples/display-anchor-ad/js/demo.html) 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. \n\n### JavaScript\n\nLoading...\n----------\n\nLoading...\n----------\n\n[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%3A+display-anchor-ad/js)\n\n### TypeScript\n\nLoading...\n----------\n\nLoading...\n----------\n\n[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%3A+display-anchor-ad/ts)"]]
