Esta página foi traduzida pela API Cloud Translation.

Anúncios complementares

Talvez você queira associar seus espaços de anúncio HTML in-page com espaços de anúncios em vídeo ou de sobreposição. Essa relação entre espaços de anúncios associados é chamada de relação mestre-complementar.

Além de solicitar anúncios mestre de sobreposição e vídeo, você pode usar o SDK do IMA para exibir anúncios HTML complementares. Esses anúncios são exibidos em um ambiente HTML.

Usar anúncios complementares

Para usar anúncios complementares, siga estas etapas:

1. Reservar seus anúncios complementares

Primeiro, é preciso reservar os anúncios complementares que você deseja exibir com seus anúncios mestres. Os anúncios complementares podem ser programados no Ad Manager. Você pode veicular até seis anúncios complementares por anúncio mestre. Essa técnica, quando um único comprador controla todos os anúncios na página, também é conhecida como sincronização.

2. Solicitar seus anúncios complementares

Por padrão, os anúncios complementares são ativados para cada solicitação de anúncio.

3. Exibir anúncios complementares

Há duas maneiras de processar anúncios complementares:

Uso automático da Tag do editor do Google (GPT)
Se você usa a GPT para implementar seus anúncios complementares, eles são exibidos automaticamente, desde que haja espaços de anúncios complementares declarados na página HTML e esses anúncios sejam registrados com a API, ou seja, o ID div no JavaScript e no HTML precisam ser correspondentes. Alguns benefícios do uso da GPT são:
- Conhecimento do espaço de anúncios complementares
- Preenchimento de complementares na rede do editor, se a resposta VAST tiver menos anúncios complementares do que o número de espaços definidos na página HTML
- Preenchimento automático de complementares se um anúncio em vídeo estiver ausente
- Espaços de anúncios complementares pré-carregados para players de vídeo de clique para reproduzir
- Renderização automatizada de complementares, incluindo HTMLResource e iFrameResource
usando manualmente a API Ad.

Usar anúncios complementares com a Tag do editor do Google

A Tag do editor do Google (GPT) automatiza a exibição de anúncios complementares em HTML no seu site. Recomendamos que a maioria dos editores use a GPT. O SDK para HTML5 reconhece espaços da GPT quando ela é carregada na página principal da Web, e não em um iframe. Consulte informações mais detalhadas sobre o uso da GPT com o SDK do IMA nos documentos da GPT.

Se você hospedar o SDK de HTML5 em um IFrame

Se você atender aos dois critérios a seguir, precisará incluir um script de proxy extra para que os complementares da GPT sejam exibidos corretamente:

Carregue o SDK do HTML5 em um IFrame.
Carregue a GPT na página principal da Web (fora do IFrame).

Para que seus complementares sejam exibidos nesse cenário, carregue o script de proxy da GPT antes de carregar o SDK:

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

Outros pontos a serem considerados:

Não deve haver GPTs carregadas dentro do IFrame carregando o SDK.
A GPT deve ser carregada na parte superior da página, não em outro IFrame.
O script de proxy precisa ser carregado no mesmo frame que a GPT (ou seja, na página principal).

Declarar espaços de anúncios complementares em HTML

Esta seção explica como declarar anúncios complementares em HTML usando a GPT e fornece exemplos de código para diferentes cenários. Para o SDK HTML5, é necessário adicionar JavaScript à sua página HTML e declarar os espaços de anúncios complementares.

Observação:em cada um dos exemplos abaixo, forneça uma network e uma unit-path válidas na chamada de método googletag.defineSlot (localizada na tag <head> ou <body>, dependendo do exemplo que você está usando).

Exemplo 1: implementação básica do espaço do anúncio
Exemplo 2: implementação de espaço de anúncio dinâmico
Exemplo 3: espaços de anúncio pré-carregados

Exemplo 1: implementação básica de locais de anúncios

O exemplo de código a seguir mostra como incluir o arquivo gpt.js na sua página HTML e declarar um espaço de anúncio. O espaço de anúncio declarado é de 728 x 90 px. A GPT tenta preencher o espaço com os anúncios complementares retornados na resposta VAST que correspondam a esse tamanho. Depois que os espaços do anúncio forem declarados, a função googletag.display() poderá renderizá-los sempre que for chamada na página. Como os espaços são complementares, os anúncios não são exibidos imediatamente. Em vez disso, eles aparecem ao lado do anúncio em vídeo principal.

Confira um exemplo de implementação:

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

Testar

Confira o codepen a seguir para uma implementação funcional.

Exemplo 2: implementação dinâmica de locais de anúncios

Às vezes, você pode não saber quantos espaços de anúncios tem em uma página até que o conteúdo dela seja renderizado. O exemplo de código a seguir mostra como definir espaços de anúncio enquanto a página é renderizada. Este exemplo é idêntico ao Exemplo 1, exceto pelo fato de registrar os espaços de anúncio em que eles são realmente exibidos.

Observação:quando o player de vídeo estiver prestes a exibir os anúncios, ele solicitará os slots. Confirme se os espaços estão definidos antes que o player exiba os anúncios.

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

Testar

Confira o código a seguir para uma implementação funcional.

Exemplo 3: locais de anúncio carregados previamente

Em certos casos, pode ser necessário exibir algo no espaço de anúncio antes que o anúncio complementar seja solicitado. Os anúncios complementares geralmente são solicitados com um anúncio em vídeo. Essa solicitação pode ocorrer depois que a página é carregada. Por exemplo, um anúncio complementar pode ser carregado somente depois que o usuário clicar em um vídeo "clicar para reproduzir". Nesse caso, é necessário solicitar um anúncio normal para preencher o espaço de anúncio antes que o anúncio complementar seja solicitado. Para oferecer suporte a esse caso de uso, é possível exibir anúncios padrão da Web no espaço complementar. Verifique se os anúncios da Web estão segmentados para os espaços complementares. É possível segmentar os espaços complementares da mesma maneira que você segmentaria os espaços de anúncios da Web padrão.

Observação:o exemplo de código a seguir é exatamente igual ao fornecido no Exemplo 1, com exceção da seção em negrito. Nesse caso, você fornece a rede de publicidade e o caminho do bloco do seu anúncio pré-carregado em vez do bloco de anúncios em vídeo.

Confira um exemplo da implementação que acabamos de descrever:

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

Testar

Confira a seguir a caneta de código a seguir para uma implementação funcional.

Usar anúncios complementares com a API Ad

Esta seção descreve como exibir anúncios complementares usando a API Ad.

Exibir anúncios complementares

Para exibir anúncios complementares, primeiro acesse uma referência a um objeto Ad por meio de qualquer um dos eventos AdEvent enviados pelo AdsManager. Recomendamos usar o evento AdEvent.STARTED, já que a exibição de anúncios complementares precisa coincidir com a exibição do anúncio mestre.

Em seguida, use esse objeto Ad para chamar getCompanionAds() e receber uma matriz de objetos CompanionAd. Aqui você tem a opção de especificar CompanionAdSelectionSettings, que permite definir filtros nos anúncios complementares por tipo de criativo, porcentagem quase adequada, tipo de recurso e critérios de tamanho. Para mais informações sobre essas configurações, consulte a documentação da API HTML5.

Os objetos CompanionAd retornados por getCompanionAds agora podem ser usados para exibir os anúncios complementares na página usando estas diretrizes:

Crie um espaço de anúncio complementar <div> do tamanho necessário na página.
No manipulador de eventos STARTED, recupere o objeto Ad chamando getAd().
Use getCompanionAds() para conferir uma lista de anúncios complementares que correspondem ao tamanho do espaço do anúncio complementar e CompanionAdSelectionSettings e têm o mesmo número de sequência do criativo principal. Os criativos com um atributo de sequência ausente são tratados como tendo número de sequência 0.
Receba o conteúdo de uma instância de CompanionAd e defina-o como o HTMl interno do <div> desse espaço de anúncio.

Exemplo de código

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

Exibir anúncios complementares fluidos

Agora, o IMA é compatível com anúncios complementares fluidos. Os anúncios complementares podem ser redimensionados para corresponder ao tamanho do espaço do anúncio. Eles preenchem 100% da largura do div pai e, em seguida, redimensionam a altura para caber no conteúdo do complementar. Eles são definidos usando o tamanho de complementares Fluid no Ad Manager. Veja na imagem a seguir onde definir esse valor.

Imagem mostrando as configurações de anúncios complementares do Ad Manager. Destaca a opção de tamanhos de complementares.

Complementares flexíveis da GPT

Ao usar complementares da GPT, é possível declarar um espaço complementar fluido atualizando o segundo parâmetro do método 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>

Complementares fluidos da API do anúncio

Ao usar a API Ad para anúncios complementares, é possível declarar um espaço complementar fluido atualizando google.ima.CompanionAdSelectionSettings.sizeCriteria para o valor 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>