Esta página foi traduzida pela API Cloud Translation.

Anúncios complementares

Você pode associar os espaços de anúncio HTML na página a espaços de anúncio em vídeo ou de overlay. Essa relação entre os slots de anúncios associados é chamada de relação principal-complementar.

Além de solicitar anúncios principais de vídeo e sobreposição, 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. Agendar anúncios complementares

Primeiro, você precisa reservar os anúncios complementares que quer mostrar com seus anúncios principais. Os anúncios complementares podem ser programados no Ad Manager. Você pode veicular até seis anúncios complementares por anúncio principal. Essa técnica, quando um único comprador controla todos os anúncios na página, também é conhecida como roadblock.

2. Solicitar anúncios complementares

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

3. Mostrar anúncios complementares

Há duas maneiras de renderizar anúncios complementares:

Usar a Tag do editor do Google (GPT) de forma automática
Alguns benefícios de usar a GPT são:
- Conhecimento do slot complementar
- Preenchimento de anúncios complementares na rede do editor, se a resposta VAST tiver menos anúncios complementares do que os slots definidos na página HTML
- Preenchimento automático do complemento se um anúncio em vídeo estiver ausente
- Espaços de anúncios complementares pré-carregados para players de vídeo clique para reproduzir
- Renderização automática do companheiro, incluindo HTMLResource e iFrameResource
Usar 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 o GPT. O SDK para HTML5 reconhece os slots da GPT se ela for carregada na página da Web principal (não em um IFrame). Confira informações mais detalhadas sobre como usar a GPT com o SDK do IMA nos documentos da GPT.

Se você hospedar o SDK do HTML5 em um IFrame

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

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

Para que os companheiros sejam exibidos nesse cenário, carregue o script de proxy do 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 GPT carregado dentro do IFrame que carrega o SDK.
A GPT precisa ser carregada na página principal, 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 um código de exemplo para diferentes cenários. Para o SDK HTML5, é necessário adicionar um pouco de JavaScript à página HTML e declarar os slots de anúncios complementares.

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

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

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

O exemplo de código abaixo mostra como incluir o arquivo gpt.js na página HTML e declarar um slot de anúncio. O local do anúncio declarado é 728 x 90 px. A GPT tenta preencher o slot com todos os anúncios complementares retornados na resposta VAST que correspondem a esse tamanho. Depois que os slots de 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>

Faça um teste

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

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

Às vezes, você não sabe quantos espaços de anúncio tem em uma página até que o conteúdo dela seja renderizado. O exemplo de código abaixo mostra como definir slots de anúncios enquanto a página é renderizada. Esse exemplo é idêntico ao Exemplo 1, exceto por registrar os slots de anúncios em que eles são mostrados.

Observação:quando o player de vídeo está prestes a exibir os anúncios, ele solicita os slots. Verifique se os slots estão definidos antes que o player mostre 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>

Faça um teste

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

Exemplo 3: locais de anúncio carregados previamente

Em alguns casos, talvez seja necessário mostrar algo no slot de anúncio antes que o anúncio complementar seja solicitado. Os anúncios complementares geralmente são solicitados junto a 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 clica em um vídeo de clique para ver. Nesse caso, é necessário solicitar um anúncio normal para preencher o espaço antes que o anúncio complementar seja solicitado. Para oferecer suporte a esse caso de uso, você pode mostrar anúncios da Web padrão no slot complementar. Verifique se os anúncios da Web são segmentados para os espaços complementares. É possível segmentar os espaços complementares da mesma forma que os espaços de anúncios padrão da Web.

Observação:o exemplo de código abaixo é exatamente o mesmo fornecido para o Exemplo 1, exceto pela seção em negrito. Nesse caso, você fornece a rede de publicidade e o caminho do bloco do seu anúncio de pré-carregamento 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>

Faça um teste

Confira o codepen a seguir para conferir 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.

Mostrar anúncios complementares

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

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 para tipo de criativo, porcentagem de ajuste próximo, 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 mostrar 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 do evento STARTED, extraia o objeto Ad chamando getAd().
Use getCompanionAds() para receber 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 que o criativo principal. Os criativos com um atributo de sequência ausente são tratados como tendo o 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> do slot de anúncio.

Código de amostra

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

Mostrar anúncios complementares fluidos

O IMA agora oferece suporte a anúncios complementares flexíveis. Esses anúncios complementares podem ser redimensionados para corresponder ao tamanho do local do anúncio. Eles preenchem 100% da largura da div mãe e, em seguida, redimensionam a altura para ajustar o conteúdo do companheiro. Elas são definidas usando o tamanho do companion Fluid no Ad Manager. Confira a imagem a seguir para saber onde definir esse valor.

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

Fluid companions da GPT

Ao usar os companions da GPT, é possível declarar um slot de companion 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>

Acessórios fluidos da API Ad

Ao usar a API Ad para anúncios complementares, é possível declarar um slot 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>