Prise en charge des annonces associées

Sélectionnez une plate-forme : HTML5 Android iOS

Vous pouvez associer vos emplacements d'annonces HTML sur page à des emplacements d'annonces vidéo ou superposées. 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 maîtres en superposition, vous pouvez utiliser le SDK IMA pour afficher des annonces HTML associées. Ces annonces sont diffusées 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. Les annonces associées peuvent être diffusées dans Ad Manager. Vous pouvez diffuser jusqu'à six annonces associées par annonce maître. Cette technique, qui consiste à ce qu'un seul acheteur contrôle toutes les annonces sur la page, est également appelée roadblocking.

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 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 auprès de l'API (c'est-à-dire que l'ID div dans JavaScript et HTML doit correspondre). Voici quelques avantages 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 que d'emplacements définis sur la page HTML.
  • Remplissage automatique des annonces associées si une annonce vidéo est manquante.
  • Espaces publicitaires associés préchargés pour les lecteurs vidéo click-to-play.
  • Rendu automatique des composants, y compris HTMLResource et iFrameResource.

• Manuellement à l'aide de l'API Ads

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 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 les exigences concernant la divulgation de la collecte et de l'utilisation des données dans 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 composants GPT s'affichent correctement :

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

Pour que vos composants s'affichent dans ce scénario, vous devez charger le script 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 principale, 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 emplacements pour les créations associées dans le code 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 des annonces associées.

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>, selon l'exemple que vous utilisez).

• Exemple 1 : Implémentation de base d'un emplacement publicitaire
• Exemple 2 : Implémentation d'un emplacement d'annonce dynamique
• Exemple 3 : Emplacements publicitaires préchargés

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

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'emplacement avec 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 où qu'elle soit appelée sur la page. Comme il s'agit d'emplacements pour les annonces associées, les annonces ne s'affichent pas immédiatement. Elles s'affichent plutôt à 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 emplacement d'annonce dynamique

Il peut arriver que vous ne connaissiez pas le nombre d'emplacements publicitaires sur une page tant que le contenu de la page n'est pas affiché. L'exemple de code suivant montre comment définir des emplacements publicitaires pendant le rendu de la page. Cet exemple est identique à l'exemple 1, sauf qu'il enregistre les emplacements publicitaires là où ils sont réellement affichés.

Remarque : Lorsque le lecteur vidéo est sur le point d'afficher 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 : Emplacements publicitaires préchargés

Dans certains cas, vous devrez peut-être afficher quelque chose dans l'emplacement publicitaire avant que l'annonce associée ne soit demandée. Les annonces associées sont généralement demandées en même temps qu'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 afficher 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 fournir le réseau publicitaire et le chemin du bloc d'annonces de votre annonce préchargée au lieu de votre bloc d'annonces vidéo.

Voici un exemple de l'implémentation décrite ci-dessus :

<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 Ads

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 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 celui de l'annonce principale.

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

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 emplacement pour l'annonce associée <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 la liste des annonces associées qui correspondent à la fois à la taille de l'emplacement d'annonce associée et à CompanionAdSelectionSettings, et qui ont le même numéro de séquence que la création maître. Les créations dont l'attribut de séquence est manquant sont traitées comme ayant le numéro de séquence 0.
4. Récupérez le contenu d'une instance CompanionAd et définissez-le comme HTML interne du <div> de cet emplacement 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 associées fluides

IMA est désormais compatible avec les annonces associées fluides. Ces annonces associées peuvent être redimensionnées pour correspondre à la taille de l'emplacement publicitaire. Elles remplissent 100 % de la largeur du div parent, puis redimensionnent leur hauteur pour s'adapter au contenu de la bannière associée. Elles sont définies à l'aide de la taille de l'annonce associée Fluid dans Ad Manager. L'image ci-dessous indique où définir cette valeur.

Compagnons fluides GPT

Lorsque vous utilisez des composants GPT, vous pouvez déclarer un emplacement de composant 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>

Composants 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 définissant google.ima.CompanionAdSelectionSettings.SizeCriteria sur 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>