Tamanhos de anúncio

Cada espaço de anúncio definido precisa especificar os tamanhos de anúncio qualificados para veiculação nesse espaço espaço. A forma como os tamanhos dos anúncios são especificados varia de acordo com o tipo de anúncio a ser exibidos, bem como o tamanho e a flexibilidade dos próprios espaços de anúncio.

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

O código completo dos exemplos incluídos neste guia pode ser encontrado na Central de Ajuda de tamanho.

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, somente criativos com o tamanho 300x250 serão veiculados.

Ponto-chave: ao trabalhar com anúncios de tamanho fixo, recomendamos que você defina o tamanho do elemento <div> em que o criativo será renderizado. Como criativos geralmente são renderizados de forma assíncrona, eles podem fazer com que outros elementos a página seja alterada se espaço insuficiente for reservado para eles.

Anúncios de vários tamanhos

Se um anúncio for compatível com vários tamanhos, forneça uma lista desses tamanhos ao definindo o espaço de anúncio.

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

Neste exemplo, os criativos com os tamanhos 300x250, 728x90 e 750x200 podem ser veiculado. O Ad Manager só considera os 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 define automaticamente as dimensões iguais a altura declarada e a largura declarada acima de 1 px quando display() é chamado. Nesse caso, seria 750x90. No entanto, esse dimensionamento pode ocorrer após outro conteúdo da página foi carregado, fazendo com que esse conteúdo se movimente. Para evitar trocas de layout, reserve espaço usando CSS, como mostrado guia de minimização da troca de layout.

Ao trabalhar com anúncios de vários tamanhos, garanta que seu layout seja flexível o suficiente para oferecem suporte a um anúncio com o maior tamanho especificado. Isso evita que os criativos sejam cortadas acidentalmente.

Anúncios fluidos

Os anúncios fluidos não têm tamanho fixo. Eles se adaptam ao conteúdo do criativo exibição. No momento, os anúncios nativos são o único anúncio 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());

Neste exemplo, o espaço do anúncio terá a largura de seu contêiner pai e redimensione sua altura para se ajustar ao conteúdo do criativo. As etapas da GPT para redimensionar o espaço de anúncio são os 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 largura definida como 100%.
  3. Quando todos os recursos no iframe terminarem de carregar, o criativo será criado. visível definindo a altura do iframe igual à altura do elemento <body> do iframe.
.

Anúncios responsivos

Os anúncios responsivos estendem os anúncios de vários tamanhos e permitem especificar o tamanho do criativos sejam veiculados com base no tamanho da janela de visualização do navegador, tornando solicitação. Essa funcionalidade pode ser usada para controlar o tamanho dos criativos veiculados a diferentes tipos de dispositivo (computador, tablet, celular etc.).

Isso é feito definindo um mapeamento entre o tamanho da janela de visualização e o tamanho do anúncio. e associar esse mapeamento a um espaço de 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 >= 1024x768, os anúncios de tamanho 750x200 ou 728x90 poderão ser veiculados.
  • Quando 1024x768 > janela de visualização >= 640x480, os anúncios de tamanho 300x250 poderão ser veiculados.
  • Quando a janela de visualização < 640x480, nenhum anúncio pode ser veiculado.

O GPT detectará o tamanho da janela de visualização do navegador, a solicitação e usar o maior mapeamento que couber. Para determinar o maior o mapeamento da GPT considera primeiro a largura e depois a altura (ou seja, [100, 10] > [10, 100]). Caso ocorra um erro no mapeamento ou se a janela de visualização tamanho não puder ser determinado, os tamanhos especificados em defineSlot() serão 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 neste 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 dentro dessa matriz define a prioridade deles. A SizeMappingBuilder usado no exemplo acima é uma forma conveniente de gerar uma matriz de nesse formato, com tamanhos ordenados automaticamente do maior para o menor. Nesse exemplo, a saída SizeMappingBuilder.build() é:

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