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 é intencionada, 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 gerar mudanças inesperadas de layout, que têm um efeito negativo na experiência do usuário e podem causar sérios problemas de usabilidade.
Este guia explica como medir e minimizar a mudança de layout ao trabalhar com as Tags do editor do Google (GPT).
Como os anúncios causam a mudança de layout
Em geral, os anúncios são solicitados de forma assíncrona e adicionam conteúdo à sua página de modo dinâmico durante ou após o carregamento dela. Enquanto os anúncios são buscados, o restante da página continua carregando, e o conteúdo que não é de anúncio pode ficar visível para o usuário. Se você não reservar espaço suficiente para os anúncios carregados, eles poderão acabar deslocando o conteúdo visível que não é anúncio quando forem adicionados à página.
Ao trabalhar com as Tags do editor do Google, 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 da configuração dele. - Quando o conteúdo do anúncio é renderizado. Um espaço poderá ser redimensionado se for veiculado um anúncio fluido ou se houver espaço insuficiente disponível. Ele também pode se expandir ou recolher nesse momento, dependendo da configuração.
- Depois que o conteúdo do anúncio for renderizado. Certos tipos de criativos são criados para se expandir depois de aparecerem na página.
Lembre-se de que quanto mais alto um espaço de anúncio estiver na janela de visualização, mais conteúdo ele poderá deslocar. Tenha cuidado especial com os espaços perto da parte de cima da janela de visualização inicial (acima da dobra). Esses slots podem causar uma quantidade desproporcional de mudanças de layout, já que é mais provável que fiquem visíveis quando o conteúdo do anúncio é carregado.
Medir a troca de layout
A Mudança de layout cumulativa (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 em campo.
No laboratório
As ferramentas de laboratório medem CLS de forma sintética. Isso significa que eles não dependem de interações reais do usuário, o que os torna adequados para uso em fluxos de trabalho de integração contínua e desenvolvimento local. No entanto, essas ferramentas geralmente medem apenas a performance 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 um usuário real veria.
As auditorias de anúncios do editor para o Lighthouse são uma ferramenta que pode ser usada para medir a CLS especificamente atribuível aos anúncios da GPT. Para mais detalhes, consulte a documentação de auditoria reduzir mudanças de layout relacionadas a anúncios.
O Chrome DevTools também pode ser configurado para destacar mudanças de layout à medida que você navega pelo site. Ele pode ser usado para identificar manualmente as mudanças de layout que ocorrem perto dos espaços de anúncio na sua página.
Em campo
As ferramentas de campo medem a CLS dos usuários reais à medida que eles interagem com seu site. Esse processo é comumente conhecido como monitoramento de usuários reais (RUM, na sigla em inglês). O RUM permite observar como o CLS é afetado por fatores do mundo real, como recursos do dispositivo, condições de rede, interação do usuário e personalização de 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 espaço de anúncio usando CSS. A maneira mais eficaz de fazer isso é definir uma altura e largura fixas diretamente no espaço de anúncio div. No entanto,
embora isso funcione bem para espaços de anúncios estáticos e de tamanho fixo, cenários mais
complicados podem exigir uma abordagem mais detalhada. Alguns cenários comuns são
explicados nas seções a seguir.
Espaços de anúncio de vários tamanhos
Para espaços de anúncio que aceitam vários tamanhos, recomendamos uma das seguintes abordagens:
- Reserve espaço para o maior tamanho configurado para veiculação.
- Reserve espaço para o menor tamanho configurado para veiculação.
- Reserve espaço para o tamanho com maior probabilidade de ser veiculado, determinado examinando os dados históricos de preenchimento dos relatórios do Google Ad Manager.
Como escolher a abordagem certa
Reservar espaço para o maior tamanho configurado para veiculação é 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 veiculado. Reduzir o espaço do anúncio para corresponder ao tamanho do criativo veiculado causaria uma mudança adicional no layout. Por isso, é recomendável evitar isso. 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, ao reservar espaço para o menor tamanho configurado para veiculação, você 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 costuma ser preenchido com criativos menores ou em casos em que todos os tamanhos compatíveis com o espaço são semelhantes. No entanto, esse método resulta em uma mudança de layout caso um criativo maior que o tamanho reservado seja veiculado. No entanto, essas mudanças geralmente são menores quando comparadas à ausência de reserva de espaço.
Para encontrar um equilíbrio entre o espaço em branco e as mudanças de layout, é possível reservar uma
quantidade "média" de espaço para os espaços de anúncio. Por exemplo, reservar 100px verticalmente incorre em um pouco de espaço em branco quando um criativo 320x50 é veiculado, mas reduz a pontuação de CLS em comparação com não reservar espaço. Teste diferentes tamanhos até encontrar o melhor equilíbrio para seu site.
Ao determinar quanto espaço reservar para um determinado espaço, a análise dos dados históricos de preenchimento dos relatórios do Google Ad Manager pode ajudar você a tomar uma decisão mais informada. Isso pode ser ilustrado melhor 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 muito a CLS, já que a
maioria dos criativos veiculados é 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
verticalmente precisa evitar uma mudança de layout na maioria das vezes.
Como reservar espaço
Recomendamos resolver esse problema especificando o tamanho do seu espaço de anúncio usando as propriedades CSS min-height e min-width:
<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>
Usar os atributos min-height e min-width permite que você reserve uma quantidade mínima de espaço para o espaço do anúncio e ainda permite que o navegador aumente o tamanho do contêiner conforme necessário. Isso garante que nenhum conteúdo seja cortado no caso de uma peça criativa maior ser veiculada.
É possível combinar essa técnica com consultas de mídia CSS para especificar valores mínimos diferentes para tamanhos de tela distintos:
@media screen and (max-width: 960px) {
#ad-slot {
min-height: 100px;
}
}
Evite reservar espaço com JavaScript, já que 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úncios 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 veiculado a eles, permitindo que sejam compatíveis com criativos de tamanho indeterminado. Como resultado, não é possível reservar espaço para esses espaços antes de solicitar conteúdo do anúncio, e os anúncios de tamanho flexível sempre causam mudanças de layout.
Para reduzir os efeitos das mudanças de layout ao trabalhar com espaços de anúncios fluidos, recomendamos o seguinte:
- Use o tamanho
fluidapenas para espaços abaixo da dobra. - Busque slots fluidos o mais cedo possível para minimizar a chance de um usuário rolar a tela para a visualização antes que o espaço seja redimensionado.
Espaços de anúncio de expansão e recolhimento
O método collapseEmptyDivs() permite recolher os divs de espaço de anúncio para que não ocupem espaço na página quando não há conteúdo do anúncio para exibir. No entanto, esse recurso precisa ser usado com cautela,
porque pode introduzir mudanças de layout não intencionais. Conforme observado na
seção anterior, os espaços de anúncio de recolhimento e expansão podem causar mudanças de
layout em dois pontos diferentes no ciclo de vida do anúncio.
Se você precisar usar esse recurso, poderá reduzir o impacto das mudanças de layout usando dados históricos de preenchimento dos relatórios do Ad Manager para implementar as seguintes práticas recomendadas:
- Os espaços que provavelmente serão preenchidos devem sempre começar expandidos.
- Os slots com menos probabilidade de serem preenchidos devem sempre começar recolhidos.
Para ver um exemplo de implementação, consulte Recolher espaços de anúncio vazios.