Anúncios complementares

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

Além de solicitar anúncios principais de vídeo e sobreposição, é possível usar o SDK do IMA para exibir anúncios HTML complementares. Esses anúncios são exibidos em um formato HTML de nuvem.

Usar anúncios complementares

Para usar anúncios complementares, siga estas etapas:

1. Reservar seus anúncios complementares

Primeiro, você deve contratar os anúncios complementares que deseja exibir com sua anúncios mestres. Os anúncios complementares podem ser programados no Ad Manager. Você pode exibir 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. Solicite 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:

• automaticamente usando a Tag do editor do Google (GPT)
  Se você usar a GPT para implementar anúncios complementares, eles serão exibido automaticamente, desde que haja espaços de anúncios complementares declarados na página HTML e esses anúncios forem registrados na API (ou seja, o elemento div ID no JavaScript e no HTML devem ser correspondentes). Alguns benefícios do uso da GPT são:
  • Reconhecimento do espaço dos anúncios complementares
  • Preenchimento complementar da rede do editor, se o VAST contém menos anúncios complementares do que os 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 formato clique para reproduzir
  • Renderização automatizada de complementares, incluindo HTMLResource e iFrameResource
• Manualmente usando 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 códigos anúncios complementares em seu site. Recomendamos que a maioria dos editores use a GPT. A O SDK HTML5 reconhece os espaços das GPT quando elas são carregadas na página da Web principal. (não em um iframe). Encontre informações mais detalhadas sobre como usar a GPT com o SDK do IMA nos documentos da GPT.

Observação: Quando você usa o SDK do Interactive Media Ads do Google para veiculação de anúncios, as métricas informadas ao servidor de anúncios pode incluir se o visitante interagiu com a página em que em que os anúncios foram veiculados. Você deve divulgar isso aos seus visitantes para que fique em conformidade com os dados exigência de coleta e divulgação de uso do seu contrato com o Google.

Se você hospedar o SDK de HTML5 em um iframe

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

1. Carregue o SDK de HTML5 em um IFrame.
2. Carregue a GPT na página principal (fora do IFrame).

Para fazer com que os complementares sejam exibidos neste cenário, você deve carregar 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 no IFrame que carrega o SDK.
• A GPT deve ser carregada na página superior, não em outro iframe.
• O script de proxy precisa ser carregado no mesmo frame da 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 GPT e fornece exemplos de código para diferentes cenários. No caso do SDK de HTML5, precisa adicionar um pouco de JavaScript à página HTML e declarar o anúncio complementar slots.

Observação: em cada um dos exemplos a seguir, forneça um network e unit-path válidos no chamada de método googletag.defineSlot (localizada na tag <head> ou &lt;body&gt; , dependendo do exemplo que estiver sendo usado).

• 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úncios pré-carregados

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

O código de exemplo 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 todos os anúncios complementares retornados na resposta VAST que correspondem a esse tamanho. Depois que os espaços de anúncios forem declarados, a função googletag.display() pode renderizá-los sempre que for chamada da página. Como os espaços são espaços de complementares, os anúncios não são exibidos imediatamente. Em vez disso, 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 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úncio você tem em uma página até o conteúdo da página é renderizado. O exemplo de código a seguir mostra como definir os espaços de anúncio enquanto a página é renderizada. Este exemplo é idêntico a Exemplo 1, exceto pelo registro do anúncio nos locais onde eles são realmente exibidos.

Observação: quando o player de vídeo está prestes a exibir os anúncios, ele pede o slots. Certifique-se de que os espaços estejam 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>
 

Faça um teste

O código a seguir mostra uma implementação funcional.

Exemplo 3: locais de anúncio carregados previamente

Em certos casos, pode ser necessário mostrar algo no espaço de anúncio antes o anúncio complementar é solicitado. Os anúncios complementares geralmente são solicitados junto com um anúncio em vídeo. Essa solicitação pode ocorrer depois que a página carrega. Por exemplo, um anúncio complementar pode carregar somente depois que o usuário clica em um vídeo clique para ver. Nesse caso, você precisa conseguir solicitar um anúncio regular 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 da Web padrão no espaço de complementar. Certifique-se de que os anúncios da Web sejam segmentados para os espaços de complementares. Você pode segmentar os espaços complementares da mesma forma que segmentaria espaços de anúncio padrão da Web.

Observação:o exemplo de código a seguir é exatamente o mesmo fornecido no Exemplo 1, com exceção da seção que está em negrito. Neste 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.

Veja 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 código-pen a seguir para uma implementação funcional.

Usar anúncios complementares com a API do anúncio

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

Exibir anúncios complementares

Para exibir anúncios complementares, primeiro obtenha uma referência a um objeto Ad usando qualquer um dos eventos AdEvent enviados da AdsManager. Recomendamos usar o evento AdEvent.STARTED, porque a exibição os anúncios complementares devem coincidir com a exibição do anúncio mestre.

Em seguida, use este objeto Ad para chamar getCompanionAds() e acessar uma matriz de objetos CompanionAd. Aqui você tem a opção de especificando CompanionAdSelectionSettings, o que permite definir filtros nos anúncios complementares por tipo de criativo, porcentagem aproximada de ajuste, tipo de recurso e critérios de tamanho. Para mais informações sobre essas configurações, consulte o Documentação da API de HTML5 (link em inglês).

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

1. Criar um espaço de anúncio complementar <div> do tamanho exigido na página.
2. No manipulador de eventos da STARTED, recupere o objeto Ad chamando getAd().
3. Usar getCompanionAds() para acessar uma lista de anúncios complementares que corresponder ao tamanho do espaço do anúncio complementar CompanionAdSelectionSettings e têm o mesmo número de sequência que o criativo mestre. Os criativos com um atributo de sequência ausente são tratados como tendo um número de sequência 0.
4. Recupere o conteúdo de uma CompanionAd e defini-la como o HTMl interno da tag <div>.

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>

Exibir anúncios complementares fluidos

Agora o IMA é compatível com anúncios complementares fluidos. Esses 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 redimensionam para se ajustar ao conteúdo do complementar. Elas são definidas usando o tamanho de Fluid complementar no Ad Manager. Consulte a imagem a seguir para saber onde definir esse valor.

Complementares fluidos da GPT

Ao usar complementares da GPT, é possível declarar um espaço complementar fluido atualizando o 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 de anúncios

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