Un cambio de diseño se produce cuando un elemento visible de tu página cambia de posición o tamaño, lo que afecta la posición del contenido a su alrededor. A veces, el cambio es intencional, como 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 graves de usabilidad.
En esta guía, se explica cómo medir y minimizar el cambio de diseño cuando se trabaja con las etiquetas del publicador de Google (GPT).
Cómo los anuncios causan cambios de diseño
Por lo general, los anuncios se solicitan de forma asíncrona y agregan contenido de forma dinámica a tu página durante o después de su carga. Mientras se recuperan los anuncios, el resto de la página sigue cargándose y es posible que el usuario vea contenido que no sea de anuncios. Si no reservas espacio suficiente para los anuncios que se cargan, es posible que estos reemplacen el contenido visible que no es de anuncios cuando se agregan a la página.
Cuando se trabaja con las etiquetas del publicador de Google, hay algunos puntos en el ciclo de vida del anuncio en los que puede ocurrir el cambio de diseño:
- Cuando se llama a
display()Un espacio puede expandirse o contraerse, según la configuración. - Cuando se renderiza el contenido del anuncio. Se puede cambiar el tamaño de un espacio publicitario si se publica un anuncio fluido o si no hay suficiente espacio disponible. En este punto, un espacio también puede expandirse o contraerse, 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 esté un espacio publicitario dentro del viewport, más contenido puede desplazar. Ten especial cuidado con los espacios cerca de la parte superior del viewport inicial (mitad superior de la página). Estos espacios pueden causar una cantidad desproporcionada de cambio de diseño, ya que es más probable que sean visibles cuando se carga su contenido de anuncios.
Cómo medir el cambio de diseño
El Cambio de diseño acumulado (CLS) es una métrica de las Métricas web esenciales que puedes usar para cuantificar el impacto de los cambios de diseño en tu sitio, tanto en el laboratorio como en el campo.
En el laboratorio
Las herramientas de Lab miden la CLS de forma sintética. Esto significa que no dependen de la interacción real del usuario, lo que los hace adecuados para su uso en flujos de trabajo de integración continua y desarrollo local. Sin embargo, estas herramientas suelen medir solo 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 los que experimentaría un usuario real.
Publisher Ads Audits for Lighthouse es una herramienta que se puede usar para medir el CLS atribuido específicamente a los anuncios de GPT. Para obtener más información, consulta la documentación de auditoría para reducir el cambio de diseño relacionado con los anuncios.
Las herramientas para desarrolladores de Chrome también se pueden configurar para destacar los cambios de diseño mientras navegas por tu 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). La RUM te permite observar cómo los factores del mundo real, como las capacidades del dispositivo, las condiciones de la red, la interacción del usuario y la personalización de la página, afectan el CLS, que a menudo es difícil o imposible simular con pruebas sintéticas.
Minimiza 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 de anuncios determinado con CSS. La forma más eficaz de hacerlo es establecer una altura y un ancho fijos directamente en el div del espacio de anuncios. Sin embargo, si bien esto funciona bien para las posiciones de anuncios estáticas de tamaño fijo, las situaciones más complicadas pueden requerir un enfoque más detallado. En las siguientes secciones, se explican algunas situaciones comunes.
Espacios publicitarios de varios tamaños
Para los espacios de anuncios que aceptan varios tamaños, te recomendamos uno de los siguientes enfoques:
- Reserva espacio para el tamaño más grande configurado para la publicación.
- Reserva espacio para el tamaño más pequeño configurado para la publicación.
- Reserva espacio para el tamaño que es más probable que se publique, determinado por el examen de los datos históricos de relleno 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 en blanco adicional 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 evitar 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 publicarse evita el exceso de espacio en blanco alrededor de tu anuncio. Esta puede ser una buena opción si tu espacio publicitario suele estar completo con creatividades más pequeñas o en los casos en que todos los tamaños que admite el espacio son similares. Sin embargo, este método genera un cambio de diseño en el caso de que se publique una creatividad más grande que el tamaño reservado (aunque estos cambios suelen ser más pequeños en comparación con no reservar espacio en absoluto).
Para lograr un equilibrio entre el espacio en blanco y los cambios de diseño, puedes reservar una cantidad de espacio "promedio" para tus posiciones de anuncios. Por ejemplo, reservar 100px
verticalmente genera un pequeño espacio en blanco cuando se entrega una creatividad 320x50, pero
reduce la puntuación de CLS en comparación con no reservar espacio. Deberás experimentar con diferentes tamaños para encontrar el mejor equilibrio para tu propio sitio.
Cuando determines cuánto espacio reservar para un espacio determinado, examinar los datos históricos de relleno de los informes de Google Ad Manager puede ayudarte a tomar una decisión más fundamentada. Para ilustrar mejor esto, explora algunos ejemplos.
Ejemplo 1
| Tamaño de creatividad (publicada) | Impresiones del servidor de anuncios (%) |
|---|---|
300x250 |
70% |
320x50 |
30% |
En este caso, reservar 250px verticalmente puede reducir en gran medida el CLS, ya que la mayoría de las creatividades publicadas 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 verticalmente debería evitar un cambio de diseño la mayor parte del tiempo.
Cómo reservar espacio
Te recomendamos que especifiques el tamaño de tu espacio de anuncios a través de las propiedades CSS min-height y min-width para abordar este problema:
<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>
El uso de los atributos min-height y min-width te permite reservar una cantidad mínima de espacio para tu 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 el contenido en el caso de que se publique una creatividad más grande.
Puedes combinar esta técnica con las consultas de medios de CSS para especificar diferentes mínimos para diferentes tamaños de pantalla:
@media screen and (max-width: 960px) {
#ad-slot {
min-height: 100px;
}
}
Se debe evitar reservar espacio con JavaScript, ya que esto 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 de anuncios fluidos no especifican un conjunto fijo de tamaños compatibles. En cambio, estos espacios cambian de tamaño automáticamente para adaptarse al contenido de creatividad que se les entrega, lo que les permite admitir creatividades de tamaño indeterminado. Como resultado, no es posible reservar espacio para estos espacios antes de solicitar contenido de anuncios, y los anuncios de tamaño fluido siempre causan cambios de diseño.
Para mitigar los efectos de los cambios de diseño cuando se trabaja con posiciones de anuncios fluidas, te recomendamos lo siguiente:
- Usa solo el tamaño
fluidpara las posiciones debajo de la mitad inferior de la página. - Recupera los espacios fluidos lo antes posible para minimizar la posibilidad de que un usuario los desplace hasta que estén a la vista antes de que se cambie su tamaño.
Contracción y expansión de espacios publicitarios
El método collapseEmptyDivs() te permite contraer los divs 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 señaló en la sección anterior, contraer y expandir los espacios de anuncios puede provocar cambios de diseño en dos puntos diferentes del ciclo de vida del anuncio.
Si necesitas usar esta función, puedes reducir el impacto de los cambios de diseño con los datos históricos de relleno de los informes de Ad Manager para implementar las siguientes prácticas recomendadas:
- Los espacios que probablemente se completen siempre deben comenzar expandidos.
- Los espacios que es poco probable que se completen siempre deben comenzar contraídos.
Para ver una muestra de implementación, consulta el ejemplo de Cómo contraer las posiciones de anuncios vacías.