Uma mudança de layout ocorre quando um elemento visível na página muda de posição ou tamanho, afetando a posição do conteúdo ao redor. Às vezes, a mudança é intencional, como quando um contêiner se expande como resultado de uma ação do usuário. No entanto, a natureza dinâmica dos anúncios pode levar a mudanças inesperadas de layout, que têm um efeito negativo na experiência do usuário e podem causar problemas graves de usabilidade.
Este guia explica como medir e minimizar a mudança de layout ao trabalhar com tags do Google para editores (GPTs).
Como os anúncios causam mudanças no layout
Os anúncios geralmente são solicitados de forma assíncrona e adicionam conteúdo dinamicamente à página durante ou após o carregamento. Enquanto os anúncios são buscados, o restante da página continua sendo carregado, e o conteúdo não publicitário pode ficar visível para o usuário. Se você não reservar espaço suficiente para os anúncios que estão sendo carregados, eles podem acabar deslocando o conteúdo não publicitário visível quando forem adicionados à página.
Ao trabalhar com as tags do Google para editores, há alguns pontos no ciclo de vida do anúncio em que a mudança de layout pode ocorrer:
- Quando
display()é chamado. Um slot pode ser expandido ou recolhido, dependendo de como ele foi configurado. - Quando o conteúdo do anúncio é renderizado. Um slot pode ser redimensionado se um anúncio fluido for veiculado ou se houver espaço insuficiente. Um slot também pode ser expandido ou recolhido nesse ponto, dependendo de como ele foi configurado.
- Depois que o conteúdo do anúncio for renderizado. Alguns tipos de criativos são projetados para expandir depois de aparecerem na página.
Quanto maior o espaço de anúncio dentro da viewport, maior o potencial de deslocamento do conteúdo. Tenha cuidado especial com slots perto da parte de cima da janela de visualização inicial (acima da dobra). Esses slots podem causar uma quantidade desproporcional de mudança de layout porque têm mais chances de ficarem visíveis quando o conteúdo do anúncio é carregado.
Como medir a troca de layout
O Cumulative Layout Shift (CLS) é uma métrica das Core Web Vitals que pode ser usada para quantificar o impacto das mudanças de layout no seu site, tanto no laboratório quanto no campo.
No laboratório
As ferramentas de laboratório medem a CLS sinteticamente. Isso significa que eles não dependem da interação do usuário real, o que os torna adequados para uso em integração contínua e fluxos de trabalho de desenvolvimento local. No entanto, essas ferramentas geralmente medem o desempenho apenas durante o carregamento da página e são limitadas nas condições que podem simular. Portanto, os valores informados podem ser menores do que os que um usuário real teria.
O Publisher Ads Audits for Lighthouse é uma ferramenta que pode ser usada para medir o CLS especificamente atribuível aos anúncios GPT. Para mais detalhes, consulte a documentação da auditoria reduzir a mudança de layout relacionada a anúncios.
O Chrome DevTools também pode ser configurado para destacar mudanças de layout enquanto você navega pelo site. Ele pode ser usado para identificar manualmente as mudanças de layout que ocorrem perto dos espaços de anúncios na página.
No campo
As ferramentas de campo medem a CLS que os usuários reais encontram ao interagir com seu site. Esse processo é conhecido como monitoramento de usuários reais (RUM). O RUM permite observar como a CLS é afetada por fatores do mundo real, como recursos do dispositivo, condições de rede, interação do usuário e personalização da página, que geralmente são difíceis ou impossíveis de simular com testes sintéticos.
Como minimizar a mudança de layout
A única maneira garantida de evitar a mudança de layout é reservar uma quantidade suficiente
de espaço para um determinado slot de anúncio usando CSS. Definir uma altura e uma largura fixas
diretamente no espaço de anúncio div é a maneira mais eficaz de fazer isso. No entanto,
embora isso funcione bem para slots de anúncios estáticos de tamanho fixo, cenários mais
complicados podem exigir uma abordagem mais sutil. Alguns cenários comuns são
explicados nas seções a seguir.
Espaços de anúncio com vários tamanhos
Para slots de anúncios que aceitam vários tamanhos, recomendamos uma das seguintes abordagens:
- Reserve espaço para o maior tamanho configurado para veicular.
- Reserve espaço para o menor tamanho configurado para veicular.
- Reserve espaço para o tamanho com maior probabilidade de veiculação, determinado por dados de preenchimento históricos dos relatórios do Google Ad Manager.
Como escolher a abordagem certa
Reservar espaço para o maior tamanho configurado para veicular é a maneira mais eficaz de eliminar mudanças de layout. No entanto, esse método pode resultar em espaço em branco extra ao redor do anúncio, caso um criativo menor que o tamanho reservado seja exibido. Reduzir o espaço do anúncio para corresponder ao tamanho do criativo veiculado resultaria em uma mudança de layout adicional. Por isso, é recomendável evitar essa prática. Em vez disso, a centralização vertical e horizontal pode ser usada para reduzir o impacto visual do excesso de espaço em branco.
Por outro lado, reservar espaço para o menor tamanho configurado para veiculação evita o excesso de espaço em branco ao redor do anúncio. Essa pode ser uma boa opção se o espaço do anúncio geralmente for preenchido com criativos menores ou em casos em que todos os tamanhos compatíveis com o espaço forem semelhantes. No entanto, esse método resulta em uma mudança de layout no caso de um criativo maior que o tamanho reservado ser veiculado. No entanto, essas mudanças geralmente são menores em comparação com a não reserva de espaço.
Para encontrar um equilíbrio entre o espaço em branco e as mudanças de layout, reserve uma
quantidade "média" de espaço para seus slots de anúncios. Por exemplo, reservar 100px
verticalmente gera um pequeno espaço em branco quando um criativo 320x50 é veiculado, mas
reduz a pontuação de CLS em comparação com a reserva de nenhum espaço. Você vai precisar
testar tamanhos diferentes para encontrar o melhor equilíbrio para seu site.
Ao determinar quanto espaço reservar para um determinado slot, examinar os dados de preenchimento anteriores dos relatórios do Google Ad Manager pode ajudar você a tomar uma decisão mais informada. Isso pode ser melhor ilustrado com alguns exemplos.
Exemplo 1
| Tamanho do criativo (exibido) | Impressões do servidor de anúncios (%) |
|---|---|
300x250 |
70% |
320x50 |
30% |
Nesse caso, reservar 250px verticalmente pode reduzir bastante o CLS, já que a
maioria dos criativos veiculados são 300x250.
Exemplo 2:
| Tamanho do criativo (exibido) | Impressões do servidor de anúncios (%) |
|---|---|
970x90 |
60% |
728x90 |
10% |
320x50 |
20% |
728x250 |
5% |
300x250 |
5% |
Nesse caso, a maioria dos anúncios tem no máximo 90px de altura. Portanto, reservar 90px
na vertical evita uma mudança de layout na maioria das vezes.
Como reservar espaço
Recomendamos que você especifique o tamanho do seu slot de anúncio usando as propriedades CSS min-height e min-width:
<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>
O uso dos atributos min-height e min-width permite reservar uma quantidade mínima de espaço para o espaço do anúncio, além de permitir que o navegador aumente o tamanho do contêiner conforme necessário. Isso garante que nenhum conteúdo seja cortado no caso de um criativo maior ser veiculado.
Você pode combinar essa técnica com consultas de mídia CSS para especificar diferentes valores mínimos para diferentes tamanhos de tela:
@media screen and (max-width: 960px) {
#ad-slot {
min-height: 100px;
}
}
Evite reservar espaço com JavaScript, porque isso pode resultar em uma mudança de layout no momento em que o script é carregado. Reservar espaço com CSS evita esse risco.
Espaços de anúncio flexíveis
Os espaços de anúncio flexíveis não especificam um conjunto fixo de tamanhos compatíveis. Em vez disso, esses slots são redimensionados automaticamente para se ajustar ao conteúdo do criativo vendido, permitindo que eles ofereçam suporte a criativos de tamanho indeterminado. Como resultado, não é possível reservar espaço para esses slots antes de solicitar o conteúdo do anúncio, e os anúncios de tamanho fluido sempre causam mudanças no layout.
Para reduzir os efeitos das mudanças de layout ao trabalhar com slots de anúncios fluidos, recomendamos o seguinte:
- Use o tamanho
fluidapenas para slots abaixo da dobra. - Pegue os slots fluidos o mais cedo possível para minimizar a chance de um usuário rolar para que eles apareçam antes que o slot seja redimensionado.
Recolher e expandir espaços de anúncio
O método collapseEmptyDivs() permite
recolher divs de espaço do anúncio para que eles não ocupem espaço na página quando
não houver conteúdo de anúncio para exibir. No entanto, esse recurso deve ser usado com cuidado,
porque pode causar mudanças de layout não intencionais. Conforme observado na
seção anterior, a redução e a expansão de slots de anúncios podem causar mudanças
no layout em dois pontos diferentes do ciclo de vida do anúncio.
Se você precisar usar esse recurso, reduza o impacto das mudanças de layout usando dados de preenchimento históricos dos relatórios do Ad Manager para implementar as práticas recomendadas a seguir:
- Os slots que provavelmente serão preenchidos devem sempre começar abertos.
- Os espaços que provavelmente não serão preenchidos devem começar recolhidos.
Para conferir um exemplo de implementação, consulte o exemplo Colapsar slots de anúncios vazios.