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

Annonces associées

Vous pouvez associer vos espaces publicitaires HTML intégrés à des vidéos ou des espaces publicitaires en superposition. Cette relation entre les espaces publicitaires associés pour la relation maître-compagnon.

Outre les demandes d'annonces vidéo et en superposition, vous pouvez utiliser le SDK IMA des annonces HTML associées. Ces annonces sont affichées dans un code HTML environnement.

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 votre les annonces maîtres. Les annonces associées <ph type="x-smartling-placeholder"></ph> dont le trafficking est effectué dans Ad Manager. Vous pouvez diffuser jusqu'à six annonces associées par annonce maître. Lorsqu'un seul acheteur contrôle toutes les annonces de la page, cette technique appelé 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:

Automatiquement à l'aide de Google Publisher Tag (GPT)
Si vous utilisez GPT pour implémenter vos annonces associées, elles sont s'affiche automatiquement si des espaces publicitaires associés ont été déclarés sur la page HTML et ces annonces sont enregistrées auprès de l'API (c'est-à-dire que le tag dans le code JavaScript et le code HTML doivent correspondre). Certains avantages de GPT sont: <ph type="x-smartling-placeholder">
- Détection de l'espace associé
- Annonces de remplissage associées issues du réseau de l'éditeur, si la norme VAST La réponse contient moins d'annonces associées qu'il n'y a d'espaces publicitaires définis sur la page HTML.
- Saisie automatique associée si une annonce vidéo est manquante
- Espaces publicitaires associés préchargés pour les lecteurs vidéo click-to-play
- Affichage automatique de la création associée, 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 du code HTML des annonces associées sur votre site. Nous recommandons à la plupart des éditeurs d'utiliser le tag GPT. La Le SDK HTML5 reconnaît les emplacements GPT si GPT est chargé sur la page Web principale. (pas dans un iFrame). Pour en savoir plus sur l'utilisation de GPT avec le le SDK IMA dans la documentation GPT.

Si vous hébergez le SDK HTML5 dans un cadre iFrame

Si vous remplissez les deux critères suivants, vous devez inclure une balise supplémentaire pour que vos annonces associées GPT s'affichent correctement:

Chargez le SDK HTML5 dans un cadre iFrame.
Chargez le tag GPT sur la page Web principale (en dehors du cadre iFrame).

Pour que vos créations associées s'affichent dans ce cas de figure, vous devez charger l'élément 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 qui charge le SDK.
GPT doit être chargé sur la page supérieure, 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 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 l'annonce associée emplacements.

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

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

Exemple 1: Mise en œuvre de base d'un espace publicitaire

L'exemple de code suivant montre comment inclure le fichier gpt.js dans votre page HTML et pour déclarer un espace publicitaire. L'espace publicitaire déclaré fait 728 x 90 pixels. GPT tente de remplir l'espace publicitaire toutes les annonces associées qui correspondent à cette taille et qui sont renvoyées dans la réponse VAST. Une fois que les espaces publicitaires déclarée, la fonction googletag.display() peut les afficher partout où elle est appelée la page. Étant donné que les espaces publicitaires sont des espaces publicitaires associés, les annonces ne s'affichent pas immédiatement. À la place, ils s'affichent à 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

Le codepen suivant est une implémentation fonctionnelle.

Exemple 2: Mise en œuvre d'un espace publicitaire dynamique

Parfois, vous ne connaissez pas le nombre d'espaces publicitaires présents sur une page le contenu de la page s'affiche. L'exemple de code suivant montre comment définir des espaces publicitaires pendant le rendu de la page. Cet exemple est identique à Exemple 1, sauf qu'il enregistre l'annonce et les emplacements où elles s'affichent.

Remarque:Lorsque le lecteur vidéo est sur le point de diffuser les annonces, il demande l'adresse 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

Le code suivant indique que l'implémentation fonctionne.

Exemple 3: espaces publicitaires préchargés

Dans certains cas, il se peut que vous deviez afficher du contenu dans l'espace publicitaire avant l'annonce associée est demandée. Les annonces associées sont généralement demandées en même temps avec une annonce vidéo. Cette demande peut avoir lieu après que la page charge. Par exemple, une annonce associée ne peut se charger qu'après que l'internaute clique sur une vidéo click-to-play ; Dans ce cas, vous devez être en mesure de 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 emplacement associé. Assurez-vous que les annonces Web sont ciblées sur les espaces publicitaires associés. Vous pouvez cibler les espaces publicitaires associés comme vous le feriez pour cibler dans les espaces publicitaires Web standards.

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

Voici un exemple d'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

Le code-pen suivant illustre une implémentation qui fonctionne.

Utiliser des annonces associées avec l'API Ad

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

Annonces display 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 envoyés à partir de AdsManager. Nous vous recommandons d'utiliser l'événement AdEvent.STARTED, car il permet d'afficher Les annonces associées doivent coïncider avec l'affichage de l'annonce maître.

Utilisez ensuite cet objet Ad pour appeler getCompanionAds() afin de obtenir un tableau d'objets CompanionAd ; Ici, vous avez la possibilité en spécifiant CompanionAdSelectionSettings, ce qui vous permet définir des filtres sur les annonces associées par type de création, pourcentage d'adéquation le type de ressource et les critères de taille. Pour en savoir plus sur ces paramètres, consultez le <ph type="x-smartling-placeholder"></ph> HTML5 de l'API.

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

Créer un espace publicitaire associé <div> de la taille requise sur la page.
Dans votre gestionnaire d'événements pour la <ph type="x-smartling-placeholder"></ph> STARTED, vous pouvez récupérer l'événement <ph type="x-smartling-placeholder"></ph> Ad en appelant getAd()
Utiliser getCompanionAds() pour obtenir la liste des annonces associées correspondent à la taille de l'espace publicitaire associé <ph type="x-smartling-placeholder"></ph> CompanionAdSelectionSettings et ont le même numéro de séquence en tant que création maître. Les créations pour lesquelles il manque un attribut de séquence sont traité comme ayant le numéro de séquence 0.
Récupérez le contenu à partir d'un <ph type="x-smartling-placeholder"></ph> CompanionAd et le définir en tant que HTML interne de l'espace publicitaire <div>

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

Le SDK IMA est désormais compatible avec les annonces associées fluides. Ces annonces associées peuvent être redimensionnées pour qu'elle corresponde à la taille de l'espace publicitaire. Elles occupent 100% de la largeur de l'élément div parent, puis redimensionnent pour s'adapter au contenu de l'annonce associée. Elles sont définies à l'aide de 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 dans Ad Manager. Met en évidence l'option des tailles des créations associées.

Créations associées fluides GPT

Lorsque vous utilisez des annonces associées GPT, vous pouvez déclarer un espace publicitaire associé fluide en mettant à jour la valeur 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 des annonces associées, vous pouvez déclarer un espace associé fluide en mettant à jour google.ima.CompanionAdSelectionSettings.sizeCriteria à 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>