Prise en charge des annonces associées

Sélectionner une plate-forme : HTML5 Android iOS

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

En plus de demander des annonces maîtres vidéo et en superposition, 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 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 diffuser avec vos annonces maîtres. Vous pouvez effectuer le trafficking des annonces associé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. Afficher les annonces associées

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

• Automatiquement à l'aide du tag Google Publisher Tag (GPT).

  Si vous utilisez GPT pour implémenter vos annonces associées, elles s'affichent automatiquement tant que des espaces publicitaires associés sont 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 div dans JavaScript et HTML doit correspondre). Voici quelques avantages de l'utilisation de GPT :

  • Détection de l'espace associé
  • Remplissage associé à partir du réseau de l'éditeur, si la réponse VAST contient moins d'annonces associées que d'espaces définis sur la page HTML
  • Remplissage automatique associé si une annonce vidéo est manquante
  • Espaces d'annonces associées préchargés pour les lecteurs vidéo click-to-play
  • Affichage associé automatisé, y compris HTMLResource et iFrameResource

• Manuellement à l'aide de l'API Ad.

Utiliser des annonces associées avec le tag Google Publisher Tag

Le tag Google Publisher Tag (GPT) automatise l'affichage des annonces HTML associées sur votre site. Nous recommandons à la plupart des éditeurs d'utiliser le GPT. Le SDK HTML5 reconnaît les espaces 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 Interactive Media Ads de Google 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'exigence de divulgation concernant 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 annonces associées 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 annonces 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 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 espaces publicitaires pour annonces associées en HTML

Cette section explique comment déclarer des annonces associées en HTML à l'aide de GPT et fournit un exemple 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 un network et un unit-path valides dans l'appel de 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 espace publicitaire
• Exemple 2 : Implémentation d'annonces dynamiques dans un espace publicitaire
• Exemple 3 : Espaces publicitaires préchargés

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

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é est de 728 x 90 pixels. 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 espaces publicitaires déclarés, la fonction googletag.display() peut les afficher partout où elle est appelée sur la page. Comme il s'agit d'espaces associés, les annonces ne s'affichent pas immédiatement. Elles apparaissent à la place 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 dynamique d'un espace publicitaire

Parfois, vous ne savez pas combien d'espaces publicitaires vous avez 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 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 espaces. Assurez-vous que les espaces 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'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 demande peut se produire après le chargement de la page. Par exemple, une annonce associée ne peut se charger qu'une fois 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é. Assurez-vous que les annonces Web sont ciblées sur les espaces associés. Vous pouvez cibler les espaces associés de la même manière que vous cibleriez des espaces publicitaires 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 mise en gras. Dans ce cas, vous fournissez le réseau publicitaire et le chemin d'accès à l'unité de votre annonce préchargée 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, commencez par obtenir une référence à un Ad objet via l'un des AdEvent événements 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. Vous avez la possibilité de 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 approximative, le type de ressource et les critères de taille. Pour en savoir plus sur ces paramètres, consultez la documentation de l'API CompanionAdSelectionSettingsIMA.

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' STARTED événement, récupérez l' Ad objet en appelant getAd().
3. Utilisez getCompanionAds() pour obtenir une liste d'annonces associées qui correspondent à la fois à la taille de l'espace publicitaire associé 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. Obtenez le contenu d'une CompanionAd instance et définissez-le comme HTMl interne du <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>

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 correspondre à la taille de l'espace publicitaire. Elles occupent 100% de la largeur du div parent, puis redimensionnent leur hauteur 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.

Annonces associées fluides GPT

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

Annonces associées fluides de l'API Ad

Lorsque vous utilisez l'API Ad pour les annonces associées, vous pouvez déclarer un espace associé 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>