Un cambio de diseño ocurre cuando cambia la posición o el tamaño de un elemento visible en la página, lo que afecta la posición del contenido que lo rodea. A veces, el cambio es intencional, por ejemplo, cuando un contenedor se expande como resultado de una acción del usuario. Sin embargo, la naturaleza dinámica de los anuncios puede generar cambios de diseño inesperados, que tienen un efecto negativo en la experiencia del usuario y pueden causar problemas de usabilidad graves.
En esta guía, se explica cómo medir y minimizar el cambio de diseño cuando se trabaja con Google Publisher Tags (GPT).
Cómo los anuncios cambian el diseño
Por lo general, los anuncios se solicitan de forma asíncrona y dinámica para agregar contenido a tu página mientras se carga o después. Mientras se recuperan los anuncios, el resto de la página se sigue cargando, y es posible que el usuario vea el contenido que no pertenece a anuncios. Si no reservas suficiente espacio para los anuncios que se cargan, es posible que desplacen el contenido visible que no pertenece al anuncio cuando se agreguen a la página.
Cuando se trabaja con Google Publisher Tags, existen algunos puntos en el ciclo de vida de los anuncios en los que se puede producir un cambio de diseño:
- Cuando se llama a
display(). Un espacio puede expandirse o contraerse según cómo se haya configurado. - Cuando se renderiza el contenido del anuncio. Se puede cambiar el tamaño de un espacio publicitario si se publica un anuncio flexible o si no hay suficiente espacio disponible. Un espacio también puede expandirse o contraerse en este punto, según cómo se haya configurado.
- Después de que se renderiza el contenido del anuncio Algunos tipos de creatividades están diseñados para expandirse después de que aparecen en la página.
Ten en cuenta que, cuanto más alto sea un espacio publicitario dentro del viewport, más contenido tendrá el potencial de desplazar. Ten especial cuidado con las ranuras cerca de la parte superior del viewport inicial (en la parte superior de la página). Esos espacios pueden causar una cantidad desproporcionada de cambios de diseño, ya que es más probable que sean visibles cuando se carga el contenido de sus anuncios.
Cómo medir el cambio de diseño
El Cambio de diseño acumulado (CLS) es una métrica de Métricas web esenciales que puedes usar para cuantificar el impacto de los cambios de diseño en tu sitio, tanto en el lab como en el campo.
En el laboratorio
Las herramientas de lab miden CLS de forma sintética. Esto significa que no dependen de la interacción real del usuario, por lo que son ideales para su uso en integración continua y flujos de trabajo de desarrollo local. Sin embargo, estas herramientas suelen solo medir el rendimiento durante la carga de la página y tienen limitaciones en las condiciones que pueden simular, por lo que los valores informados pueden ser más bajos que lo que experimentaría un usuario real.
Las auditorías de anuncios del publicador para Lighthouse son una herramienta que se puede usar para medir la CLS que se atribuye específicamente a los anuncios de GPT. Para obtener más detalles, consulta la documentación de auditoría Cómo reducir los cambios de diseño relacionados con los anuncios.
Las Herramientas para desarrolladores de Chrome también se pueden configurar para destacar los cambios de diseño mientras navegas por el sitio. Se puede usar para identificar manualmente los cambios de diseño que se producen cerca de los espacios publicitarios de tu página.
En el campo
Las herramientas de campo miden el CLS que experimentan los usuarios reales a medida que interactúan con tu sitio. Este proceso se conoce comúnmente como supervisión de usuarios reales (RUM). RUM te permite observar cómo los factores del mundo real afectan al CLS, como las capacidades del dispositivo, las condiciones de la red, la interacción del usuario y la personalización de la página, que suelen ser difíciles o imposibles de simular con pruebas sintéticas.
Cómo minimizar el cambio de diseño
La única forma garantizada de evitar el cambio de diseño es reservar una cantidad suficiente de espacio para un espacio publicitario determinado mediante CSS. La manera más eficaz es configurar una altura y un ancho fijos
directamente en el espacio publicitario div. Sin embargo, aunque esto funciona bien para espacios publicitarios estáticos de tamaño fijo, las situaciones más complicadas pueden requerir un enfoque con más matices. En las siguientes secciones, se explican algunas situaciones comunes.
Espacios publicitarios de varios tamaños
Para los espacios publicitarios que aceptan varios tamaños, recomendamos uno de los siguientes enfoques:
- Reserva espacio para el tamaño más grande que se haya configurado para publicarse.
- Reserva espacio en el tamaño más pequeño que esté configurado para publicarse.
- Reserva espacio para el tamaño con más probabilidades de publicarse, lo que se determina mediante el análisis de los datos de relleno históricos de los informes de Google Ad Manager.
Cómo elegir el enfoque correcto
Reservar espacio para el tamaño más grande configurado para la publicación es la forma más eficaz de eliminar los cambios de diseño. Sin embargo, este método puede generar espacio adicional en blanco alrededor del anuncio, en caso de que se publique una creatividad más pequeña que el tamaño reservado. Reducir el espacio publicitario para que coincida con el tamaño de la creatividad publicada generaría un cambio de diseño adicional, por lo que se recomienda no hacerlo. En su lugar, se puede usar el centrado vertical y horizontal para reducir el impacto visual del exceso de espacio en blanco.
Por otro lado, reservar espacio para el tamaño más pequeño configurado para publicar evita el exceso de espacio en blanco alrededor del anuncio. Esta puede ser una buena opción si tu espacio publicitario suele llenarse con creatividades más pequeñas o cuando todos los tamaños que admite el espacio publicitario son similares. Sin embargo, este método produce un cambio de diseño en caso de que se publique una creatividad más grande que el tamaño reservado (aunque esos cambios suelen ser más pequeños cuando se compara con no reservar espacio).
A fin de lograr un equilibrio entre el espacio en blanco y los cambios de diseño, puedes reservar una cantidad de espacio “promedio” para tus espacios publicitarios. Por ejemplo, reservar 100px genera un poco de espacio en blanco de forma vertical cuando se publica una creatividad 320x50, pero reduce la puntuación de CLS en comparación con no reservar ningún espacio. Deberás experimentar con diferentes tamaños a fin de encontrar el mejor equilibrio para tu sitio.
A fin de determinar cuánto espacio reservar para un espacio determinado, examinar los datos de relleno históricos de los informes de Google Ad Manager puede ayudarte a tomar una decisión más fundamentada. Esto se puede ilustrar mejor explorando algunos ejemplos.
Ejemplo 1
| Tamaño de creatividad (publicada) | Impresiones del servidor de anuncios (%) |
|---|---|
300x250 |
70% |
320x50 |
30% |
En este caso, reservar 250px de forma vertical puede reducir en gran medida el CLS, ya que la mayoría de las creatividades entregadas son 300x250.
Ejemplo 2
| Tamaño de creatividad (publicada) | Impresiones del servidor de anuncios (%) |
|---|---|
970x90 |
60% |
728x90 |
10% |
320x50 |
20% |
728x250 |
5% |
300x250 |
5% |
En este caso, la mayoría de los anuncios tienen una altura máxima de 90px, por lo que reservar 90px de forma vertical debería evitar un cambio de diseño la mayor parte del tiempo.
Cómo reservar un espacio
Para resolver este problema, te recomendamos que especifiques el tamaño del espacio publicitario mediante las propiedades de CSS min-height y min-width:
<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>
El uso de atributos de altura mínima y ancho mínimo te permite reservar una cantidad mínima de espacio para el espacio publicitario y, al mismo tiempo, permitir que el navegador aumente el tamaño del contenedor según sea necesario. Esto garantiza que no se corte ningún contenido en caso de que se publique una creatividad más grande.
Puedes combinar esta técnica con las consultas de medios CSS a fin de especificar diferentes mínimos para distintos tamaños de pantalla:
@media screen and (max-width: 960px) {
#ad-slot {
min-height: 100px;
}
}
Se debe evitar reservar espacio con JavaScript, ya que puede generar un cambio de diseño en el momento en que se carga la secuencia de comandos. Reservar espacio con CSS evita este riesgo.
Espacios publicitarios flexibles
Los espacios publicitarios flexibles no especifican un conjunto fijo de tamaños que admiten. En cambio, estos espacios cambian de tamaño automáticamente para adaptarse al contenido de creatividades que se les entrega, lo que les permite admitir creatividades de tamaño indeterminado. Como resultado, no es posible reservar espacio para esos espacios antes de solicitar el contenido del anuncio, y los anuncios de tamaño flexible siempre generan cambios de diseño.
Para mitigar los efectos de los cambios de diseño cuando se trabaja con espacios publicitarios flexibles, te recomendamos lo siguiente:
- Usa el tamaño
fluidsolo para la parte inferior de la página. - Recupera ranuras flexibles lo antes posible para minimizar la posibilidad de que un usuario las desplace a la vista antes de cambiar el tamaño de la ranura.
Cómo contraer y expandir espacios publicitarios
El método collapseEmptyDivs() te permite contraer los elementos div del espacio publicitario para que no ocupen espacio en la página cuando no haya contenido del anuncio para mostrar. Sin embargo, esta función se debe usar con precaución, ya que puede generar cambios de diseño no deseados. Como se indicó en la sección anterior, contraer y expandir espacios publicitarios puede provocar cambios en el diseño en dos momentos diferentes del ciclo de vida del anuncio.
Si necesitas usar esta función, puedes reducir el impacto de los cambios de diseño mediante los datos de relleno históricos de los informes de Ad Manager para implementar las siguientes prácticas recomendadas:
- Los espacios que probablemente se completen siempre deben comenzar expandidos.
- Las ranuras que probablemente no se llenen siempre deben comenzar con el estado contraído.
Para ver una muestra de implementación, consulta el ejemplo Contraer espacios publicitarios vacíos.