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 Google Publisher Tags (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 aparecer en la página.
Ten en cuenta que cuanto más alta sea la posición del espacio publicitario dentro del viewport, mayor será el potencial de contenido que pueda desplazar. Ten especial cuidado con las ranuras 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 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 del lab miden el 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. Esto 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 usuarios reales mientras interactúan con tu sitio. Este proceso se conoce comúnmente como supervisión de usuarios reales (RUM). RUM te permite observar cómo CLS se ve afectado por factores del mundo real, como las capacidades del dispositivo, las condiciones de la red, la interacción del usuario y la personalización de páginas, que a menudo son difíciles o imposibles de 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, aunque esto funciona bien para espacios publicitarios estáticos de tamaño fijo, es posible que las situaciones más complicadas requieran un enfoque más sutil. Algunas situaciones comunes se explican en las siguientes secciones.
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 entregarlo evita el exceso de espacio en blanco alrededor del anuncio. Esta puede ser una buena opción si tu espacio publicitario suele estar lleno de 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 tales cambios suelen ser más pequeños en comparación con no reservar espacio).
Para lograr un equilibrio entre el espacio en blanco y los cambios de diseño, puedes reservar una cantidad "promedio" de espacio para tus espacios publicitarios. 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. Tendrás que experimentar con diferentes tamaños a fin de 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, exploremos 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 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 ningún contenido en 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 esos espacios antes de solicitar contenido del anuncio, y los anuncios de tamaño flexible siempre provocan 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 ranuras flexibles lo antes posible para minimizar la posibilidad de que un usuario las desplace para verlas antes de que se cambie el tamaño de la ranura.
Contraer y expandir espacios publicitarios
El método collapseEmptyDivs() te permite contraer los elementos div del espacio publicitario de modo 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.