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:
- A resposta do anúncio é recebida.
- O conteúdo do criativo é gravado em um iframe, com a altura inicial definida como
0px
e a largura definida como100%
. - 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 tamanho750x200
ou728x90
poderão ser veiculados. - Quando
1024x768
> janela de visualização >=640x480
, anúncios de tamanho300x250
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], []]
]