Diffuser une annonce avec récompense

Cet exemple montre comment utiliser la bibliothèque Google Publisher Tag (GPT) pour demander et afficher une annonce avec récompense. Les formats d'annonces avec récompense permettent aux utilisateurs d'applications et de sites Web de recevoir des récompenses pour avoir visionné des annonces. Pour en savoir plus sur les annonces avec récompense, consultez le Centre d'aide Google Ad Manager.

Vous pouvez utiliser les événements GPT suivants pour afficher des annonces avec récompense et interagir avec elles:

Événement Déclenché lorsque...
RewardedSlotClosedEvent Un espace publicitaire avec récompense a été fermé.
RewardedSlotGrantedEvent Une récompense a été accordée pour le visionnage d'une annonce.
RewardedSlotReadyEvent Un espace publicitaire avec récompense est prêt à être affiché.

Dans cet exemple, une boîte de dialogue modale simple est utilisée pour inviter l'utilisateur à voir l'annonce avec récompense et pour afficher la récompense une fois terminée. En pratique, il est de la responsabilité de l'éditeur de mettre en œuvre sa propre interface pour accomplir ces tâches.

Remarques sur l'utilisation

  • Pour garantir une expérience utilisateur optimale, les annonces avec récompense ne sont demandées que sur les pages qui acceptent correctement ce format. Pour cette raison, defineOutOfPageSlot() peut renvoyer null. Vous devez vérifier ce cas pour vous assurer que vous n'effectuez aucune tâche inutile. Actuellement, les annonces avec récompense ne sont compatibles qu'avec les pages optimisées pour les mobiles où le zoom est neutre. En général, cela signifie 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.

  • Les annonces avec récompense génèrent leur propre espace publicitaire. Contrairement aux autres types d'annonces, il n'est pas nécessaire de définir une <div> pour les annonces avec récompense. Les annonces avec récompense créent et insèrent automatiquement leur propre conteneur sur la page lorsqu'une annonce se remplit.

Exemple d'implémentation

Voir la démonstration