Cette page a été traduite par l'API Cloud Translation.

Annonces associées

Vous pouvez associer vos encarts HTML à des espaces publicitaires vidéo ou en superposition. Cette relation entre les espaces publicitaires associés est appelée relation maître-associée.

Outre les demandes d'annonces maîtres vidéo et en superposition, vous pouvez utiliser le SDK IMA pour afficher des annonces HTML associées. Elles s'affichent dans un environnement HTML.

Utiliser des annonces associées

Pour utiliser des 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 afficher avec vos annonces maîtres. Les annonces associées peuvent être diffusées dans Ad Manager. Vous pouvez exposer jusqu'à six annonces compagnons par annonce maître. Cette technique, lorsqu'un seul acheteur contrôle toutes les annonces de la page, est également appelée créations synchronisées.

2. Demander vos annonces associées

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

3. Annonces display associées

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

Utiliser automatiquement le tag Google Publisher Tag (GPT)
Si vous utilisez GPT pour intégrer vos annonces associées, elles s'affichent automatiquement à condition que des espaces publicitaires associés soient déclarés sur la page HTML et que ces annonces soient enregistrées avec l'API (l'ID div indiqué dans JavaScript et HTML doit correspondre). Voici quelques-uns des avantages de GPT :
- Détection de l'espace associé
- Annonces de remplissage associées issues du réseau de l'éditeur, si la réponse VAST contient moins d'annonces associées qu'il n'y a d'espaces publicitaires définis sur la page HTML
- Saisie automatique d'une annonce associée en cas d'annonce vidéo manquante
- Espaces publicitaires associés préchargés pour les lecteurs vidéo click-to-play
- Affichage automatique associé, y compris HTMLResource et iFrameResource
manuellement à l'aide de l'API Ad.

Utiliser des annonces associées avec Google Publisher Tag

Google Publisher Tag (GPT) automatise l'affichage des annonces associées HTML sur votre site. Nous recommandons à la plupart des éditeurs d'utiliser 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.

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 créations associées GPT s'affichent correctement:

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

Pour que vos créations associées 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 tag GPT ne doit être chargé dans l'iFrame pour charger le SDK.
Les tags GPT doivent être chargés en haut de la page, et non dans un autre iFrame.
Le script de proxy doit être chargé dans le même frame que GPT (c'est-à-dire sur la page principale).

Déclarer des espaces publicitaires associés en HTML

Cette section explique comment déclarer des annonces associées au format 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 espaces publicitaires associés.

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

Exemple 1: Implémenter un espace publicitaire de base
Exemple 2: Intégration d'un espace publicitaire dynamique
Exemple 3: Espaces publicitaires préchargés

Exemple 1: Implémentation de base des espaces publicitaires

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

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 une implémentation fonctionnelle.

Exemple 2: Implémentation d'un espace publicitaire dynamique

Parfois, vous ne savez pas combien d'espaces publicitaires se trouve sur une page tant que le contenu de la page n'est pas affiché. L'exemple de code suivant montre comment définir des espaces publicitaires pendant l'affichage de la page. Cet exemple est identique à l'exemple 1, sauf qu'il enregistre les espaces publicitaires où ils sont affichés.

Remarque:Lorsque le lecteur vidéo est sur le point d'afficher les annonces, il demande les emplacements. Assurez-vous que les espaces publicitaires 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

Le code suivant indique une implémentation fonctionnelle.

Exemple 3: espaces publicitaires préchargés

Dans certains cas, vous devrez peut-être afficher un élément dans l'espace publicitaire 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 peut se charger uniquement 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 afficher des annonces Web standards dans l'espace associé. Vérifiez que les annonces Web sont ciblées sur les espaces publicitaires associés. Vous pouvez cibler les espaces publicitaires associés de la même manière que vous ciblez les espaces publicitaires Web standards.

Remarque:L'exemple de code suivant est exactement identique à 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 du bloc d'annonces de votre annonce préchargée au lieu de votre bloc d'annonces vidéo.

Voici un exemple de mise en œuvre 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 voir l'en-tête de code suivant pour une implémentation fonctionnelle.

Utiliser des annonces associées avec l'API Ad

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

Annonces display associées

Pour diffuser des annonces associées, obtenez d'abord une référence à un objet Ad via l'un des événements AdEvent envoyé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 maître.

Ensuite, utilisez cet objet Ad pour appeler getCompanionAds() afin d'obtenir un tableau d'objets CompanionAd. Ici, vous avez la possibilité de spécifier CompanionAdSelectionSettings, ce qui vous permet de définir des filtres sur les annonces associées par type de création, pourcentage d'adéquation proche, type de ressource et 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:

Créez un espace publicitaire associé (<div>) de la taille requise sur la page.
Dans votre gestionnaire d'événements pour l'événement STARTED, récupérez l'objet Ad en appelant getAd().
Utilisez getCompanionAds() pour obtenir la liste des annonces associées qui correspondent à la fois à la taille de l'espace publicitaire associé et à la CompanionAdSelectionSettings, et qui possèdent le même numéro de séquence que la création maître. Les créations avec un attribut de séquence manquant sont considérées comme portant le numéro de séquence 0.
Récupérez le contenu à partir d'une instance CompanionAd, puis définissez-le en tant que HTML interne de l'élément <div> de cet espace publicitaire.

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>

Annonces display fluides associées

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

Image montrant les paramètres des annonces associées d'Ad Manager. Met en évidence l'option des tailles des annonces associées.

Créations associées fluides GPT

Lorsque vous utilisez des créations associées GPT, vous pouvez déclarer un espace publicitaire 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 Ad

Lorsque vous utilisez l'API Ad pour les annonces associées, vous pouvez déclarer un espace publicitaire fluide en remplaçant google.ima.CompanionAdSelectionSettings.sizeCriteria par 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>