Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Menampilkan iklan anchor
Contoh ini menampilkan iklan anchor menggunakan library Tag Penayang Google (GPT).
Pelajari iklan anchor lebih lanjut di
pusat bantuan Google Ad Manager.
Melihat pratinjau iklan anchor
Anda dapat menampilkan iklan anchor demo di halaman mana pun yang menampilkan iklan dengan GPT dengan menambahkan
#gamTopAnchorDemo atau #gamBottomAnchorDemo ke URL. Contohnya,
https://www.example.com/#gamTopAnchorDemo.
Fungsi ini dapat digunakan untuk melihat pratinjau iklan anchor di situs Anda tanpa memerlukan perubahan
kode. Hal ini sangat berguna untuk memvalidasi dengan cepat tampilan dan perilaku anchor
di berbagai perangkat dan di lingkungan operasi yang berbeda.
Catatan penggunaan
Untuk memastikan pengalaman pengguna yang optimal, iklan anchor hanya diminta di
halaman yang mendukung format dengan benar. Oleh karena itu,
defineOutOfPageSlot() dapat menampilkan null; Anda harus memeriksa kasus ini untuk
memastikan Anda tidak melakukan pekerjaan yang tidak perlu. Saat ini, iklan anchor
didukung jika kondisi berikut terpenuhi:
GPT berjalan di jendela atas.
Pada halaman yang dioptimalkan untuk seluler dengan zoom netral; biasanya ini berarti
penayang memiliki <meta name="viewport" content="width=device-width,
initial-scale=1"> atau yang serupa di <head> halaman.
Area pandang berada dalam orientasi potret dengan lebar antara 320px dan
1000px.
Hanya minta iklan anchor di halaman/lingkungan tempat Anda ingin anchor
ditampilkan. Iklan anchor memenuhi syarat untuk ditayangkan ke desktop, tablet, dan perangkat
seluler.
Iklan anchor membuat penampung iklannya sendiri. Tidak seperti jenis iklan lainnya, Anda tidak perlu menentukan <div> untuk iklan anchor. Iklan anchor secara otomatis membuat dan menyisipkan penampung sendiri ke dalam halaman saat iklan terisi. Penampung
ini dapat tumpang-tindih atau menutupi elemen lain menggunakan pemosisian absolut atau
tetap, jadi sebaiknya hindari menempatkan elemen tersebut di area
tempat anchor dimaksudkan untuk muncul.
Jika menggunakan arsitektur permintaan tunggal (SRA) di halaman dengan beberapa slot,
jangan panggil display() hingga div slot iklan statis dibuat. Seperti
yang dijelaskan dalam Praktik Terbaik Iklan, panggilan pertama ke display()
meminta setiap slot iklan yang ditentukan sebelum titik tersebut. Meskipun slot iklan anchor
tidak memerlukan <div> standar, slot iklan statis memerlukannya. Memanggil display()
sebelum elemen ini ada di halaman dapat mengakibatkan sinyal
kualitas yang lebih rendah, sehingga mengurangi monetisasi. Oleh karena itu, sebaiknya tunda
panggilan awal hingga slot statis ditentukan.
Hanya iklan anchor yang terlihat yang dapat dimuat ulang. Saat slot iklan anchor
diciutkan atau belum di-scroll ke tampilan, semua panggilan ke refresh()
akan diabaikan. Namun, jika Anda menggunakan disableInitialLoad() untuk
mengontrol pemuatan dan pembaruan iklan secara manual, panggilan pertama
ke refresh() akan memicu permintaan iklan, terlepas dari visibilitas slot.
[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)"]]
