Annonces associées

Vous pouvez associer vos espaces publicitaires HTML sur la page à des espaces publicitaires vidéo ou en superposition. Cette relation entre les emplacements d'annonces associés est appelée relation maître-compagnon.

En plus de demander des annonces vidéo et des annonces en superposition maîtres, vous pouvez utiliser le SDK IMA pour afficher des annonces HTML associées. Ces annonces s'affichent dans un environnement HTML.

Utiliser des annonces associées

Pour utiliser les annonces associées, procédez comme suit:

1. Réserver vos annonces associées

Vous devez d'abord réserver les annonces associées que vous souhaitez diffuser avec vos annonces principales. Vous pouvez effectuer le trafficking des annonces associées dans Ad Manager. Vous pouvez diffuser jusqu'à six annonces associées par annonce principale. Lorsque c'est un seul acheteur qui contrôle toutes les annonces de la page, cette technique est également appelée blocage.

2. Demander vos annonces associées

Par défaut, les annonces associées sont activées pour chaque demande d'annonce.

3. Afficher les annonces associées

Il existe deux façons d'afficher des annonces associées:

• Automatiquement à l'aide de la balise Google Publisher Tag (GPT)
  Si vous utilisez la balise GPT pour implémenter vos annonces associées, elles s'affichent automatiquement tant qu'il existe des espaces publicitaires associés déclarés sur la page HTML et que ces annonces sont enregistrées auprès de l'API (c'est-à-dire que l'ID de div dans le code JavaScript et le code HTML doit correspondre). Voici quelques avantages de l'utilisation de GPT :
  • Détection de l'espace associé
  • Remplissage des annonces associées à partir du réseau de l'éditeur si la réponse VAST contient moins d'annonces associées qu'il n'y a d'emplacements définis sur la page HTML
  • Remplissage automatique de l'annonce associée si une annonce vidéo est manquante
  • Espaces publicitaires associés préchargés pour les lecteurs vidéo click-to-play
  • Rendu automatique du compagnon, y compris HTMLResource et iFrameResource
• Manuellement à l'aide de l'API Ad

Utiliser des annonces associées avec Google Publisher Tag

Le tag Google Publisher Tag (GPT) automatise l'affichage des annonces associées HTML sur votre site. Nous recommandons à la plupart des éditeurs d'utiliser le GPT. Le SDK HTML5 reconnaît les emplacements GPT si GPT est chargé sur la page Web principale (et non dans un IFrame). Pour en savoir plus sur l'utilisation de GPT avec le SDK IMA, consultez la documentation GPT.

Remarque:Lorsque vous utilisez le SDK Google Interactive Media Ads pour la diffusion d'annonces, les métriques renvoyées à l'ad server peuvent indiquer si le visiteur a interagi avec la page sur laquelle les annonces ont été diffusées. Vous devez en informer vos visiteurs pour respecter l'obligation d'information sur la collecte et l'utilisation des données de votre contrat avec Google.

Si vous hébergez le SDK HTML5 dans un iFrame

Si vous remplissez les deux critères suivants, vous devez inclure un script de proxy supplémentaire pour que vos compagnons GPT s'affichent correctement:

1. Chargez le SDK HTML5 dans un IFrame.
2. Chargez le GPT sur la page Web principale (en dehors de l'iFrame).

Pour que vos compagnons s'affichent dans ce scénario, vous devez charger le script de proxy GPT avant de charger le SDK:

<script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>

Quelques points importants à retenir :

• Aucun GPT ne doit être chargé dans l'iFrame qui charge le SDK.
• GPT doit être chargé sur la page supérieure, et non dans un autre iFrame.
• Le script proxy doit être chargé dans le même frame que GPT (c'est-à-dire sur la page principale).

Déclarer des emplacements d'annonces associées en HTML

Cette section explique comment déclarer des annonces associées en HTML à l'aide de GPT et fournit des exemples de code pour différents scénarios. Pour le SDK HTML5, vous devez ajouter du code JavaScript à votre page HTML et déclarer les emplacements d'annonces associés.

Remarque:Dans chacun des exemples suivants, veillez à fournir un network et un unit-path valides dans l'appel de la méthode googletag.defineSlot (situé dans la balise <head> ou <body>, en fonction de l'exemple que vous utilisez).

• Exemple 1: Implémentation d'un emplacement d'annonce de base
• Exemple 2: Implémentation d'emplacements d'annonces dynamiques
• Exemple 3: Espaces publicitaires préchargés

Exemple 1: Implémentation d'un espace publicitaire de base

L'exemple de code suivant montre comment inclure le fichier gpt.js dans votre page HTML et déclarer un emplacement publicitaire. L'espace publicitaire déclaré est de 728 x 90 px. GPT tente de remplir l'espace avec toutes les annonces associées renvoyées dans la réponse VAST qui correspondent à cette taille. Une fois les emplacements d'annonces déclarés, la fonction googletag.display() peut les afficher partout où elle est appelée sur la page. Étant donné qu'il s'agit d'emplacements associés, les annonces ne s'affichent pas immédiatement. Elles s'affichent à côté de l'annonce vidéo principale.

Voici un exemple d'implémentation:

 <html>
   <head>
     <!-- Uncomment the line below for the HTML5 SDK caveat proxy -->
     <!-- <script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>-->
     <!-- HEAD part -->
     <!-- Initialize the tagging library -->
     <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>

     <!-- Register your companion slots -->
     <script>
       window.googletag = window.googletag || { cmd: [] };

       googletag.cmd.push(function() {
         // Supply YOUR_NETWORK and YOUR_UNIT_PATH.
         googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv')
             .addService(googletag.companionAds())
             .addService(googletag.pubads());
         googletag.companionAds().setRefreshUnfilledSlots(true);
         googletag.pubads().enableVideoAds();
         googletag.enableServices();
       });
     </script>
   </head>

   <body>
     <!-- BODY part -->
     <!-- Declare a div where you want the companion to appear. Use
          googletag.display() to make sure the ad is displayed. -->
     <div id="companionDiv" style="width:728px; height:90px;">
       <script>
         // Using the command queue to enable asynchronous loading.
         // The unit does not actually display now - it displays when
         // the video player is displaying the ads.
         googletag.cmd.push(function() { googletag.display('companionDiv'); });
       </script>
     </div>
   <body>
 </html>
 

Essayer

Vous pouvez consulter le codepen suivant pour voir une implémentation fonctionnelle.

Exemple 2: Implémentation d'emplacements d'annonces dynamiques

Il est possible que vous ne sachiez pas combien d'espaces publicitaires vous avez sur une page avant que le contenu de la page ne soit affiché. L'exemple de code suivant montre comment définir des emplacements d'annonces pendant le rendu de la page. Cet exemple est identique à l'exemple 1, à ceci près qu'il enregistre les emplacements d'annonces où ils sont réellement diffusés.

Remarque:Lorsque le lecteur vidéo est sur le point de diffuser les annonces, il demande les emplacements. Assurez-vous que les emplacements sont définis avant que le lecteur n'affiche les annonces.

 <html>
   <head>
     <!-- Uncomment the line below for the HTML5 SDK caveat proxy -->
     <!-- <script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script> -->
     <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
     <!-- HEAD part -->
     <!-- Initialize the tagging library -->
     <script>
       window.googletag = window.googletag || { cmd: [] };

       googletag.cmd.push(function() {
         googletag.companionAds().setRefreshUnfilledSlots(true);
         googletag.pubads().enableVideoAds();
         googletag.enableServices();
       });
     </script>
   </head>

   <body>
     <!-- BODY part -->
     <!-- Declare a div where you want the companion to appear. Use
          googletag.display() to make sure the ad is displayed. -->
     <div id="companionDiv" style="width:728px; height:90px;">
       <script>
         // Using the command queue to enable asynchronous loading.
         // The unit does not actually display now - it displays when
         // the video player is displaying the ads.
         googletag.cmd.push(function() {
           // Supply YOUR_NETWORK and YOUR_UNIT_PATH.
           googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv')
               .addService(googletag.companionAds())
               .addService(googletag.pubads());
           googletag.display('companionDiv');
         });
       </script>
     </div>
   <body>
 </html>
 

Essayer

Vous pouvez consulter le code suivant pour une implémentation fonctionnelle.

Exemple 3: Espaces publicitaires préchargés

Dans certains cas, vous devrez peut-être afficher quelque chose dans l'emplacement d'annonce avant que l'annonce associée ne soit demandée. Les annonces associées sont généralement demandées avec une annonce vidéo. Cette requête peut se produire après le chargement de la page. Par exemple, une annonce associée ne peut se charger qu'après que l'utilisateur a cliqué sur une vidéo click-to-play. Dans ce cas, vous devez pouvoir demander une annonce standard pour remplir l'espace publicitaire avant que l'annonce associée ne soit demandée. Pour prendre en charge ce cas d'utilisation, vous pouvez diffuser des annonces Web standards dans l'emplacement associé. Assurez-vous que les annonces Web sont ciblées sur les emplacements associés. Vous pouvez cibler les emplacements associés de la même manière que les emplacements d'annonces Web standards.

Remarque:L'exemple de code suivant est exactement le même que celui fourni pour l'exemple 1, à l'exception de la section en gras. Dans ce cas, vous devez indiquer le réseau publicitaire et le chemin d'accès de votre annonce préchargement au lieu de votre bloc d'annonces vidéo.

Voici un exemple de l'implémentation que nous venons de décrire:

<html>
  <head>
    ...
    <!-- Register your companion slots -->
    <script>
      window.googletag = window.googletag || { cmd: [] };

      googletag.cmd.push(function() {
        // Supply YOUR_PRELOAD_NETWORK and YOUR_PRELOAD_UNIT_PATH.
        googletag.defineSlot('/YOUR_PRELOAD_NETWORK/YOUR_PRELOAD_UNIT_PATH', [728, 90], 'companionDiv')
            .addService(googletag.companionAds())
            .addService(googletag.pubads());
        googletag.companionAds().setRefreshUnfilledSlots(true);
        googletag.pubads().enableVideoAds();
        googletag.enableServices();
      });
    </script>
  </head>
  ...
</html>

Essayer

Vous pouvez consulter le code-pen suivant pour une implémentation fonctionnelle.

Utiliser des annonces associées avec l'API Ad

Cette section explique comment afficher des annonces associées à l'aide de l'API Ad.

Afficher les annonces associées

Pour afficher des annonces associées, obtenez d'abord une référence à un objet Ad via l'un des événements AdEvent distribués à partir de AdsManager. Nous vous recommandons d'utiliser l'événement AdEvent.STARTED, car l'affichage des annonces associées doit coïncider avec l'affichage de l'annonce principale.

Utilisez ensuite cet objet Ad pour appeler getCompanionAds() afin d'obtenir un tableau d'objets CompanionAd. Vous pouvez ici spécifier CompanionAdSelectionSettings, ce qui vous permet de définir des filtres sur les annonces associées pour le type de création, le pourcentage de correspondance proche, le type de ressource et les critères de taille. Pour en savoir plus sur ces paramètres, consultez la documentation de l'API HTML5.

Les objets CompanionAd renvoyés par getCompanionAds peuvent désormais être utilisés pour afficher les annonces associées sur la page en suivant ces consignes:

1. Créez un espace publicitaire associé <div> de la taille requise sur la page.
2. Dans votre gestionnaire d'événements pour l'événement STARTED, récupérez l'objet Ad en appelant getAd().
3. Utilisez getCompanionAds() pour obtenir une liste d'annonces associées qui correspondent à la taille de l'espace publicitaire associé et à CompanionAdSelectionSettings, et qui ont le même numéro de séquence que la création principale. Les créations dont l'attribut de séquence est manquant sont considérées comme ayant le numéro de séquence 0.
4. Obtenez le contenu d'une instance CompanionAd et définissez-le comme HTML interne de l'<div> de cet emplacement d'annonce.

Exemple de code

<!--Set a companion ad div in html page. -->
<div id="companion-ad-300-250" width="300" height="250"></div>

<script>

  // Listen to the STARTED event.
  adsManager.addEventListener(
    google.ima.AdEvent.Type.STARTED,
    onAdEvent);

  function onAdEvent(adEvent) {
    switch (adEvent.type) {
      case google.ima.AdEvent.Type.STARTED:
        // Get the ad from the event.
        var ad = adEvent.getAd();
        var selectionCriteria = new google.ima.CompanionAdSelectionSettings();
        selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC;
        selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE;
        selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.IGNORE;
        // Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings
        var companionAds = ad.getCompanionAds(300, 250, selectionCriteria);
        var companionAd = companionAds[0];
        // Get HTML content from the companion ad.
        var content = companionAd.getContent();
        // Write the content to the companion ad slot.
        var div = document.getElementById('companion-ad-300-250');
        div.innerHTML = content;
        break;
    }
  }
</script>

Afficher des annonces associées fluides

IMA est désormais compatible avec les annonces associées fluides. Ces annonces associées peuvent être redimensionnées pour s'adapter à la taille de l'espace publicitaire. Ils occupent 100% de la largeur de la div parente, puis redimensionnent leur hauteur pour s'adapter au contenu du composant associé. Elles sont définies à l'aide de la taille de compagnon Fluid dans Ad Manager. Consultez l'image suivante pour savoir où définir cette valeur.

Compagnons fluides GPT

Lorsque vous utilisez des compagnons GPT, vous pouvez déclarer un emplacement de compagnon fluide en mettant à jour le deuxième paramètre de la méthode defineSlot().

 <!-- Register your companion slots -->
 <script>
   googletag.cmd.push(function() {
     // Supply YOUR_NETWORK and YOUR_UNIT_PATH.
     googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', ['fluid'], 'companionDiv')
         .addService(googletag.companionAds())
         .addService(googletag.pubads());
     googletag.companionAds().setRefreshUnfilledSlots(true);
     googletag.pubads().enableVideoAds();
     googletag.enableServices();
   });
 </script>

Compagnons fluides de l'API Ads

Lorsque vous utilisez l'API Ad pour les annonces associées, vous pouvez déclarer un emplacement d'annonce associée fluide en mettant à jour google.ima.CompanionAdSelectionSettings.SizeCriteria avec la valeur SELECT_FLUID.

<script>

  ...
    // Get the ad from the event.
    var ad = adEvent.getAd();
    var selectionCriteria = new google.ima.CompanionAdSelectionSettings();
    selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC;
    selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE;
    selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.SELECT_FLUID;
    // Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings
    // Note: Companion width and height are irrelevant when fluid size is used.
    var companionAds = ad.getCompanionAds(0, 0, selectionCriteria);
    var companionAd = companionAds[0];
  ...
    }
  }
</script>