Tamanhos de anúncio

Cada espaço de anúncio que você define precisa especificar os tamanhos de anúncio qualificados para veiculação nele. A forma como os tamanhos são especificados varia de acordo com o tipo de anúncio a ser exibido, o tamanho e a flexibilidade dos espaços.

Em alguns casos, o tamanho do anúncio pode ser substituído no nível do item de linha no Google Ad Manager. Acesse a Central de Ajuda para saber mais.

O código completo dos exemplos incluídos neste guia está disponível na página de exemplo de tamanhos de anúncio.

Anúncios de tamanho fixo

Você pode definir um espaço de anúncio com um único tamanho fixo.

googletag
  .defineSlot("/6355419/Travel/Europe/France/Paris", [300, 250], "fixed-size-ad")
  .addService(googletag.pubads());

Neste exemplo, apenas criativos com o tamanho 300x250 serão veiculados.

Importante: ao trabalhar com anúncios de tamanho fixo, é altamente recomendável definir o tamanho do elemento <div> em que o criativo será renderizado. Como os criativos geralmente são renderizados de forma assíncrona, eles podem fazer com que outros elementos da página mudem se não houver espaço suficiente.

Anúncios de vários tamanhos

Se um anúncio for compatível com vários tamanhos, forneça uma lista dos tamanhos compatíveis ao definir o espaço do anúncio.

googletag
  .defineSlot(
    "/6355419/Travel/Europe",
    [
      [300, 250],
      [728, 90],
      [750, 200],
    ],
    "multi-size-ad",
  )
  .addService(googletag.pubads());

Neste exemplo, criativos com os tamanhos 300x250, 728x90 e 750x200 podem ser veiculados. O Ad Manager só considera criativos que correspondem a esses tamanhos durante o processo de seleção de anúncios.

Se as dimensões não forem especificadas para o espaço de anúncio <div> no CSS, a GPT definirá automaticamente as dimensões iguais à menor altura declarada e à maior largura declarada acima de 1 px quando display() for chamado. Nesse caso, seria 750x90. No entanto, esse dimensionamento pode ocorrer depois que outro conteúdo da página for carregado, fazendo com que esse conteúdo mude. Para evitar mudanças de layout, reserve espaço usando CSS, conforme mostrado no guia Minimizar mudança de layout.

Ao trabalhar com anúncios de vários tamanhos, verifique se o layout é flexível o suficiente para oferecer suporte a um anúncio com o maior tamanho especificado. Isso evita que os criativos sejam cortados inadvertidamente.

Anúncios flexíveis

Os anúncios flexíveis não têm tamanho fixo, mas se adaptam ao conteúdo do criativo exibido. No momento, os anúncios nativos são o único tipo fluido compatível com o Ad Manager.

Ao trabalhar com anúncios fluidos, um tamanho fluid personalizado pode ser especificado.

googletag
  .defineSlot("/6355419/Travel", ["fluid"], "native-ad")
  .addService(googletag.pubads());

Nesse exemplo, o espaço do anúncio terá a largura do contêiner pai e redimensionará a altura para se ajustar ao conteúdo do criativo. As etapas que a GPT realiza para redimensionar o espaço do anúncio são as seguintes:

  1. A resposta do anúncio é recebida.
  2. O conteúdo do criativo é gravado em um iframe, com a altura inicial definida como 0px e a largura definida como 100%.
  3. Assim que todos os recursos no iframe terminarem de carregar, o criativo se tornará visível ao definir a altura do iframe igual à altura do elemento <body> do iframe.

Anúncios responsivos

Eles estendem anúncios de vários tamanhos e permitem especificar o tamanho dos criativos a serem veiculados com base no tamanho da janela de visualização do navegador que faz a solicitação. Essa funcionalidade pode ser usada para controlar o tamanho dos criativos veiculados para diferentes tipos de dispositivos (computadores, tablets, smartphones etc.).

Isso é feito definindo um mapeamento entre o tamanho da janela de visualização e do anúncio e associando esse mapeamento a um espaço do anúncio.

const responsiveAdSlot = googletag
  .defineSlot(
    "/6355419/Travel/Europe",
    [
      [300, 250],
      [728, 90],
      [750, 200],
    ],
    "responsive-ad",
  )
  .addService(googletag.pubads());

const mapping = googletag
  .sizeMapping()
  .addSize(
    [1024, 768],
    [
      [750, 200],
      [728, 90],
    ],
  )
  .addSize([640, 480], [300, 250])
  .addSize([0, 0], [])
  .build();

responsiveAdSlot.defineSizeMapping(mapping);

Neste exemplo, o mapeamento especifica:

  • Quando a janela de visualização for igual ou superior a 1024x768, os anúncios de tamanho 750x200 ou 728x90 poderão ser veiculados.
  • Quando 1024x768 > janela de visualização >= 640x480, anúncios de tamanho 300x250 poderão ser veiculados.
  • Quando a janela de visualização for menor que 640x480, nenhum anúncio poderá ser veiculado.

A GPT detectará o tamanho da janela de visualização do navegador que fez a solicitação e usará o maior mapeamento que se encaixar. Para determinar o maior mapeamento, a GPT considera primeiro a largura e depois a altura (por exemplo, [100, 10] > [10, 100]). No caso de um erro no mapeamento ou se não for possível determinar o tamanho da janela de visualização, os tamanhos especificados em defineSlot() vão ser usados.

Em seguida, o mapeamento é associado a um espaço de anúncio chamando o método Slot.defineSizeMapping(). Esse método aceita uma matriz de mapeamentos no seguinte formato:

[
  [
    [viewport-width-1, viewport-height-1],
    [[ad-width-1, ad-height-1], [ad-width-2, ad-height-2], ...]
  ],
  [
    [viewport-width-2, viewport-height-2],
    [[ad-width-3, ad-height-3], [ad-width-4, ad-height-4], ...]
  ],
  ...
]

A ordem dos tamanhos da janela de visualização nesta matriz define a prioridade. O SizeMappingBuilder usado no exemplo acima é uma maneira conveniente de gerar uma matriz desse formato, com tamanhos ordenados automaticamente do maior para o menor. Nesse exemplo, a saída de SizeMappingBuilder.build() é:

[
  [[1024, 768], [[750, 200], [728, 90]]],
  [[640, 480], [[300, 250]]],
  [[0, 0], []]
]