Questa pagina è stata tradotta dall'API Cloud Translation.

Annunci companion

Ti consigliamo di associare le aree annuncio HTML in-page alle aree annuncio video o overlay. Questa relazione tra gli slot annunci associati è indicata come relazione principale-companion.

Oltre a richiedere annunci video e annunci principali in overlay, puoi utilizzare l'SDK IMA per visualizzare annunci HTML companion. Questi annunci vengono visualizzati in un ambiente HTML.

Utilizzare gli annunci companion

Per utilizzare gli annunci associati:

1. Prenotare gli annunci companion

Devi prima prenotare gli annunci companion che vuoi mostrare con gli annunci principali. Gli annunci companion possono essere gestiti in Ad Manager. Puoi pubblicare fino a sei annunci companion per annuncio principale. Questa tecnica, quando un singolo acquirente controlla tutti gli annunci nella pagina, è anche conosciuta come roadblocking.

2. Richiedere gli annunci companion

Per impostazione predefinita, gli annunci associati sono attivati per ogni richiesta di annuncio.

3. Pubblicare annunci companion

Esistono due modi per visualizzare gli annunci companion:

Utilizzo automatico del Tag publisher di Google (GPT)
Se utilizzi il GPT per implementare gli annunci companion, questi vengono visualizzati automaticamente a condizione che siano dichiarate aree annuncio companion nella pagina HTML e che questi annunci siano registrati nell'API (ovvero l'ID div in JavaScript e HTML deve corrispondere). Ecco alcuni vantaggi dell'utilizzo di GPT:
- Rilevamento dell'area annuncio companion
- Backfill companion dalla rete del publisher, se la risposta VAST contiene meno annunci companion rispetto agli slot definiti nella pagina HTML
- Compilazione automatica dell'annuncio companion se manca un annuncio video
- Aree annunci companion precaricate per i video player click-to-play
- Generazione automatica di annunci associati, inclusi HTMLResource e iFrameResource
Utilizzando manualmente l'API Ad.

Utilizzare gli annunci companion con il tag publisher di Google

Il Tag publisher di Google (GPT) automatizza la visualizzazione degli annunci companion HTML sul tuo sito. Consigliamo alla maggior parte dei publisher di utilizzare GPT. L'SDK HTML5 riconosce gli slot GPT se GPT viene caricato nella pagina web principale (non in un IFrame). Puoi trovare informazioni più dettagliate sull'utilizzo di GPT con l'SDK IMA nella documentazione di GPT.

Se ospiti l'SDK HTML5 in un iframe

Se soddisfi entrambi i seguenti criteri, devi includere uno script proxy aggiuntivo affinché i tuoi companion GPT vengano visualizzati correttamente:

Carica l'SDK HTML5 in un iframe.
Carica il tag GPT nella pagina web principale (al di fuori dell'iframe).

Per visualizzare i tuoi compagni in questo scenario, devi caricare lo script proxy GPT prima di caricare l'SDK:

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

Importante.

Non deve essere caricato alcun GPT all'interno dell'iframe che carica l'SDK.
GPT deve essere caricato nella pagina principale, non in un altro iframe.
Lo script proxy deve essere caricato nello stesso frame di GPT (ovvero nella pagina principale).

Dichiarare gli slot annunci companion in HTML

Questa sezione spiega come dichiarare gli annunci companion in HTML utilizzando GPT e fornisce codice di esempio per diversi scenari. Per l'SDK HTML5, devi aggiungere del codice JavaScript alla pagina HTML e dichiarare gli spazi annunci companion.

Nota: in ciascuno dei seguenti esempi, assicurati di fornire network e unit-path validi nella chiamata al metodo googletag.defineSlot (che si trova nel tag <head> o <body>, a seconda dell'esempio effettivo che stai utilizzando).

Esempio 1: implementazione di aree annuncio di base
Esempio 2: implementazione dell'area annuncio dinamica
Esempio 3: spazi pubblicitari precaricati

Esempio 1: implementazione di aree annuncio di base

Il seguente codice di esempio mostra come includere il file gpt.js nella pagina HTML e dichiarare uno slot annuncio. L'area annuncio dichiarata è 728 x 90 px. GPT tenta di riempire l'area con gli annunci companion restituiti nella risposta VAST che corrispondono a queste dimensioni. Dopo aver dichiarato gli annunci, la funzione googletag.display() può visualizzarli ovunque viene chiamata nella pagina. Poiché si tratta di aree annuncio companion, gli annunci non vengono visualizzati immediatamente. ma vengono visualizzati accanto all'annuncio video principale.

Ecco un esempio di implementazione:

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

Prova

Puoi vedere il seguente codice per un'implementazione funzionante.

Esempio 2: implementazione di aree annuncio dinamiche

A volte potresti non sapere quante aree annuncio hai su una pagina finché non vengono visualizzati i contenuti della pagina. Il seguente codice di esempio mostra come definire gli slot annunci durante il rendering della pagina. Questo esempio è identico all'esempio 1, tranne per il fatto che registra gli annunci spostati dove vengono effettivamente visualizzati.

Nota:quando il video player sta per mostrare gli annunci, richiede gli slot. Assicurati che le aree siano definite prima che il player mostri gli annunci.

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

Prova

Puoi vedere il seguente codice per un'implementazione funzionante.

Esempio 3: spazi annunci precaricati

In alcuni casi, potrebbe essere necessario visualizzare qualcosa nell'area annuncio prima che venga richiesto l'annuncio companion. Gli annunci companion vengono solitamente richiesti insieme a un annuncio video. Questa richiesta potrebbe verificarsi dopo il caricamento della pagina. Ad esempio, un annuncio companion potrebbe essere caricato solo dopo che l'utente fa clic su un video click-to-play. In questo caso, devi avere la possibilità di richiedere un annuncio normale per riempire lo spazio pubblicitario prima che venga richiesto l'annuncio companion. Per supportare questo caso d'uso, puoi mostrare annunci web standard nello spazio annunci aggiuntivo. Assicurati che gli annunci web siano scelti come target per gli spazi companion. Puoi scegliere come target le aree annuncio aggiuntive nello stesso modo in cui scegli come target le aree annuncio web standard.

Nota: il seguente codice di esempio è esattamente uguale a quello fornito per l'esempio 1, ad eccezione della sezione in grassetto. In questo caso, fornisci la rete pubblicitaria e il percorso dell'unità dell'annuncio precaricato anziché dell'unità pubblicitaria video.

Ecco un esempio dell'implementazione appena descritta:

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

Prova

Puoi vedere il seguente codice per un'implementazione funzionante.

Utilizzare gli annunci associati con l'API Ad

Questa sezione descrive come visualizzare gli annunci companion utilizzando l'API Ad.

Pubblicare annunci companion

Per visualizzare gli annunci associati, ottieni prima un riferimento a un oggetto Ad tramite uno degli eventi AdEvent inviati dal AdsManager. Ti consigliamo di utilizzare l'evento AdEvent.STARTED, poiché la visualizzazione degli annunci companion deve coincidere con la visualizzazione dell'annuncio principale.

Successivamente, utilizza questo oggetto Ad per chiamare getCompanionAds() per recuperare un array di oggetti CompanionAd. Qui hai la possibilità di specificare CompanionAdSelectionSettings, che ti consente di impostare i filtri sugli annunci companion per tipo di creatività, percentuale di corrispondenza approssimativa, tipo di risorsa e criteri di dimensioni. Per ulteriori informazioni su queste impostazioni, consulta la documentazione dell'API HTML5.

Gli oggetti CompanionAd restituiti da getCompanionAds ora possono essere utilizzati per visualizzare gli annunci companion nella pagina seguendo queste linee guida:

Crea un'area annuncio companion <div> delle dimensioni richieste sulla pagina.
Nel gestore di eventi per l'evento STARTED, recupera l'oggetto Ad chiamando getAd().
Utilizza getCompanionAds() per ottenere un elenco di annunci companion che corrispondono sia alle dimensioni dell'area annuncio companion sia CompanionAdSelectionSettings e hanno lo stesso numero di sequenza della creatività principale. Le creatività con un attributo sequenza mancante vengono trattate come se avessero il numero di sequenza 0.
Recupera i contenuti da un'istanza CompanionAd e impostali come HTML interno del <div> della stessa area annuncio.

Codice di esempio

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

Pubblicare annunci companion fluidi

IMA ora supporta gli annunci companion flessibili. Questi annunci di tipo companion possono essere ridimensionati in base alle dimensioni dell'area annuncio. Riempiono il 100% della larghezza del div principale, quindi ridimensionano la loro altezza in base ai contenuti del componente aggiuntivo. Vengono impostati utilizzando la dimensione della scheda complementare Fluid in Ad Manager. Guarda l'immagine seguente per sapere dove impostare questo valore.

Immagine che mostra le impostazioni degli annunci correlati di Ad Manager. Evidenzia l'opzione delle dimensioni companion.

Companion fluidi GPT

Quando utilizzi gli annunci companion GPT, puoi dichiarare uno slot companion fluido aggiornando il secondo parametro del metodo 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>

Componenti aggiuntivi fluidi dell'API Ad

Quando utilizzi l'API Ad per gli annunci companion, puoi dichiarare uno spazio annunci companion fluido aggiornando google.ima.CompanionAdSelectionSettings.SizeCriteria al valore 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>