Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Afficher une annonce ancrée
Cet exemple affiche une annonce ancrée à l'aide de la bibliothèque Google Publisher Tag (GPT).
Pour en savoir plus sur les annonces d'ancrage, consultez le Centre d'aide Google Ad Manager.
Prévisualiser les annonces ancrées
Vous pouvez afficher une annonce ancrée de démonstration sur n'importe quelle page qui diffuse des annonces avec GPT en ajoutant #gamTopAnchorDemo ou #gamBottomAnchorDemo à l'URL. Exemple : https://www.example.com/#gamTopAnchorDemo.
Cette fonctionnalité vous permet d'afficher un aperçu des annonces ancrées sur votre site sans avoir à modifier le code. Cette fonctionnalité est particulièrement utile pour valider rapidement l'apparence et le comportement des ancres sur différents appareils et dans différents environnements d'exploitation.
Remarques sur l'utilisation
Pour garantir une expérience utilisateur optimale, les annonces ancrées ne sont demandées que sur les pages qui acceptent correctement ce format. C'est pourquoi defineOutOfPageSlot() peut renvoyer la valeur "null". Vous devez vérifier ce cas pour vous assurer que vous n'effectuez pas de travail inutile. Actuellement, les annonces d'ancrage sont acceptées si les conditions suivantes sont remplies:
GPT s'exécute dans la fenêtre supérieure.
Sur une page optimisée pour les mobiles où le zoom est neutre, cela signifie généralement que l'éditeur a <meta name="viewport" content="width=device-width,
initial-scale=1"> ou un élément similaire dans le <head> de la page.
La fenêtre d'affichage est en mode portrait, avec une largeur comprise entre 320px et 1000px.
Ne demandez des annonces ancrées que sur les pages ou dans les environnements où vous souhaitez qu'une ancre s'affiche. Les annonces ancrées peuvent être diffusées sur les ordinateurs, les tablettes et les appareils mobiles.
Les annonces d'ancrage génèrent leur propre conteneur d'annonces. Contrairement aux autres types d'annonces, les annonces ancrées n'ont pas besoin d'un <div>. Elles créent et insèrent automatiquement leur propre conteneur dans la page lorsqu'elles se chargent. Ces conteneurs peuvent se chevaucher ou masquer d'autres éléments à l'aide d'un positionnement absolu ou fixe. Il est donc recommandé d'éviter de placer de tels éléments dans des zones où des ancres doivent apparaître.
Si vous utilisez l'architecture de demande simple (SRA) sur une page comportant plusieurs espaces publicitaires, n'appelez pas display() tant que des divisions d'espaces publicitaires statiques n'ont pas été créées. Comme expliqué dans les Bonnes pratiques relatives aux annonces, le premier appel à display() demande que chaque espace publicitaire soit défini avant ce point. Bien que les espaces publicitaires d'ancrage ne nécessitent pas de <div> prédéfini, les espaces publicitaires statiques en ont besoin. L'appel de display() avant que ces éléments ne soient présents sur la page peut entraîner une dégradation des signaux de qualité, ce qui réduit la monétisation. C'est pourquoi nous vous recommandons de retarder l'appel initial jusqu'à ce que les emplacements statiques soient définis.
Seules les annonces ancrées visibles peuvent être actualisées. Lorsqu'un espace d'annonce ancrée est replié ou qu'il n'est pas encore visible en faisant défiler la page, tous les appels à refresh() sont ignorés. Toutefois, si vous utilisez disableInitialLoad() pour contrôler manuellement le chargement et l'actualisation des annonces, le premier appel à refresh() déclenchera une demande d'annonce, quelle que soit la visibilité de l'espace.
[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)"]]
