Cet article fournit des notes et des exemples qui montrent comment afficher une annonce interstitielle pour jeux à l'aide de la bibliothèque Google Publisher Tag (GPT). Les interstitiels pour jeux sont des annonces pleine page gérées par GPT et qui sont visibles des utilisateurs via un déclencheur manuel sur des jeux exécutés sur des pages Web.
Les événements GPT suivants permettent d'afficher des annonces interstitielles pour jeux et d'interagir avec elles :
| Événement | Se déclenche dans les cas suivants : |
|---|---|
|
|
Un espace publicitaire interstitiel pour jeux est prêt à être affiché. Pour afficher l'interstitiel, appelez |
|
|
Un espace publicitaire d'interstitiel pour jeux qui était affiché est maintenant fermé. Permet d'exécuter une logique personnalisée chaque fois que l'interstitiel pour jeux est fermé. |
L'interstitiel pour jeux peut s'afficher en plein écran ou dans le frame du jeu, selon la façon dont le jeu s'affiche. En savoir plus sur les structures d'annonces pour jeux H5
L'exemple de code ci-dessous suppose que le jeu H5 est placé directement sur le même frame supérieur que la page (en utilisant la structure "Plein écran"). Dans ce cas, l'annonce interstitielle pour jeux s'affiche également en plein écran.
Cependant, ce même code fonctionne également lorsqu'il est placé à l'intérieur d'un frame enfant (en utilisant la structure "iFrame/WebView"). Pour que l'annonce interstitielle pour jeux corresponde au canevas de jeu H5, le jeu doit être placé dans un iFrame.
Exemple
<!doctype html>
<html>
<head>
<!-- The Google Publisher Tag here, if any, will only be responsible for serving ads outside of the H5 game. -->
<title>Page for this example H5 game</title>
<!-- Your <head> content here. -->
</head>
<body>
<span id="example-text">Example H5 game</span>
<iframe src="https://www.example-game.com" title="Example game" allow="autoplay">
<!-- Sample code is served here. The Google Publisher Tag loaded in this frame will only be used within the H5 game. -->
</iframe>
</body>
</html>
Remarques sur l'utilisation
- Pour garantir une expérience utilisateur optimale, GPT ne demande des annonces interstitielles pour jeux que sur les pages qui acceptent ce format. C'est pourquoi
defineOutOfPageSlot()peut renvoyer la valeur "null". Ne demandez des annonces interstitielles pour jeux que sur les pages ou dans les environnements où vous souhaitez qu'un interstitiel s'affiche. Les annonces interstitielles pour jeux peuvent être diffusées sur les ordinateurs, les tablettes et les appareils mobiles. - L'interstitiel s'affiche lorsque vous appelez
makeGameManualInterstitialVisibleà partir demakeGameManualInterstitialVisible. - Les annonces interstitielles pour jeux ont une limite de la fréquence d'exposition fixe. Cela permet d'éviter que l'événement
gameManualInterstitialSlotReadyne se déclenche plus d'une fois toutes les 30 secondes.
Conditions requises et recommandations
- Les éditeurs ne sont pas autorisés à utiliser l'interstitiel pour jeux H5 sur l'inventaire non lié aux jeux. En implémentant ce format, les éditeurs acceptent automatiquement cette condition. Vous devez également respecter le règlement Google pour les éditeurs et les Consignes aux partenaires Google Ad Manager.
- Google se réserve le droit d'approuver ou de refuser des éditeurs à tout moment. Les éditeurs qui ne respectent pas les règles seront ensuite retirés de la liste d'autorisation.
- Les annonces interstitielles pour jeux génèrent leur propre espace publicitaire. Contrairement aux autres types d'annonces, il n'est pas nécessaire de définir une balise <div> pour les annonces interstitielles pour jeux. Ces annonces créent et insèrent automatiquement leur propre conteneur dans la page lorsqu'une annonce se remplit.
- Si vous utilisez l'architecture de demande simple (SRA) sur une page comportant plusieurs espaces publicitaires, n'appelez
display()qu'une fois que des divisions d'espaces publicitaires statiques ont été créées. Comme expliqué dans les Bonnes pratiques Google Ads, le premier appel àdisplay()demande que chaque espace publicitaire soit défini avant ce point. Bien que les espaces interstitiels pour jeux ne nécessitent pas de balise <div> prédéfinie, les espaces publicitaires statiques en ont besoin. L'appel dedisplay()avant que ces éléments ne soient présents sur la page peut réduire la qualité des signaux. Nous vous recommandons donc de retarder l'appel initial jusqu'à ce que les emplacements statiques soient définis. - Pour le trafficking d'interstitiels manuels, vous devez configurer le bloc d'annonces et l'élément de campagne de la même manière que pour les interstitiels Web standards.
Commencer
- Ajout de tags
- Créez un espace publicitaire GPT à l'aide de
googletag.defineOutOfPageSlot()et définissez le format OutOfPage surgoogletag.enums.OutOfPageFormat.GAME_MANUAL_INTERSTITIAL.
Consultez les conseils techniques pour les développeurs GPT concernant les interstitiels pour jeux H5. - Une fois l'espace défini, ajoutez un écouteur d'événements qui écoute l'événement
gameManualInterstitialSlotReady. Dans le rappel de l'écouteur d'événements, appelez la méthodemakeGameManualInterstitialVisible()sur l'objet d'événement fourni pour afficher l'annonce. - Une fois que vous avez déclaré tous les autres espaces publicitaires statiques, un appel à
googletag.displaydéclenche une requête pour le remplissage de l'espace publicitaire d'interstitiel pour jeux.
- Créez un espace publicitaire GPT à l'aide de
Exemple
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Game Manual Interstitial Ad Example</title>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || { cmd: [] };
let gameManualInterstitialSlot;
googletag.cmd.push(function () {
// Define a game manual interstitial ad slot.
defineGameManualInterstitialSlot();
// Define static ad slots.
staticSlot = googletag.defineSlot(
'/6355419/Travel/Europe', [100, 100], 'static-ad-1')
.addService(googletag.pubads());
// Enable SRA and services.
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
function defineGameManualInterstitialSlot() {
gameManualInterstitialSlot = googletag.defineOutOfPageSlot(
'/6355419/Travel/Europe/France/Paris',
googletag.enums.OutOfPageFormat.GAME_MANUAL_INTERSTITIAL);
// Slot returns null if the page or device does not support interstitials.
if (gameManualInterstitialSlot) {
gameManualInterstitialSlot.addService(googletag.pubads());
printStatus('Waiting for interstitial to be ready...');
// Add event listener to register click handler once interstitial loads.
// If this event doesn't fire, try clearing local storage and refreshing
// the page.
googletag.pubads().addEventListener('gameManualInterstitialSlotReady',
(slotReadyEvent) => {
if (gameManualInterstitialSlot === slotReadyEvent.slot) {
printStatus('Interstitial is ready.');
const button = document.getElementById('trigger');
button.style.display = 'block';
button.addEventListener('click', () => {
slotReadyEvent.makeGameManualInterstitialVisible();
printStatus('Interstitial is active.');
}, { once: true });
}
});
googletag.pubads().addEventListener('gameManualInterstitialSlotClosed',
resumeGame);
}
}
function resumeGame() {
document.getElementById('trigger').style.display = 'none';
// Game manual interstitial ad slots are one-time use, so destroy the old slot and create a new one.
googletag.destroySlots([gameManualInterstitialSlot]);
defineGameManualInterstitialSlot();
googletag.display(gameManualInterstitialSlot);
}
function printStatus(status) {
document.getElementById('status').innerText = status;
}
</script>
<style>
button {
display: none;
}
div.content {
position: fixed;
top: 50%;
}
</style>
</head>
<body>
<div id="static-ad-1" style="width: 100px; height: 100px;"></div>
<div class="content">
<span id="status">Game manual interstitial is not supported on this page.</span>
<p>
<button id="trigger">TRIGGER INTERSTITIAL</button>
</p>
</div>
<script>
googletag.cmd.push(function () {
// Ensure the first call to display comes after static ad slot
// divs are defined.
googletag.display(staticSlot);
});
</script>
</body>
</html>
Trafficking
- Créez un bloc d'annonces ou réutilisez-en un existant. Sélectionnez 320 x 480, 300 x 250 et 336 x 280 comme taille du bloc d'annonces.
- Créez des éléments de campagne. Sélectionnez les paramètres des éléments de campagne appropriés en fonction de votre cas d'utilisation :
| Paramètres des éléments de campagne | ||||
|---|---|---|---|---|
| Cas d'utilisation | Type d'annonce | Type d'élément de campagne | Créations prévues | Ciblage > Inventaire |
| Pour diffuser une annonce display par réservation | Display |
|
320 x 480, 300 x 250 ou 336 x 280 |
Le bloc d'annonces créé ou sélectionné à l'étape précédente |
| Pour diffuser une annonce non réservée | Display |
|
||
| Pour diffuser une annonce vidéo par réservation (par exemple, un tag VAST ou un fichier MP4) | Vidéo ou audio |
|
300 x 250v ou 320 x 480v | |
| Diffuser des annonces de remplissage/associées aux enchères ouvertes | Display | Ad Exchange | Toutes les tailles demandées | |