Instalar el fragmento antiparpadeo

Este fragmento puede ayudarle a evitar el parpadeo de página.

Introducción

Si sigue los pasos que se indican en los artículos sobre la instalación del fragmento y las prácticas recomendadas para colocar fragmentos (más abajo), su página web debería cargar Optimize antes que otros recursos necesarios para mostrarla. Si su página carga Optimize primero, no parpadeará y no será necesario instalar el fragmento antiparpadeo.

El parpadeo de página se produce cuando una página web se muestra brevemente con el estilo predeterminado del navegador antes de cargar una hoja de estilo CSS externa que la vuelve a renderizar y que hace que los elementos parpadeen de manera momentánea para mostrarse con el nuevo estilo.

La forma más eficaz de evitar que su página parpadee al cargar Optimize es ocultarla temporalmente mientras se carga el contenedor de Optimize. Para ello, añada el fragmento antiparpadeo como primera secuencia de comandos de la página.

Si nota que la página parpadea, confirme que ha seguido todos los pasos indicados en los artículos sobre la instalación del fragmento y las prácticas recomendadas antes de probar otras opciones para solucionar el problema.

En concreto, debe asegurarse de haber incluido el fragmento de Optimize tan arriba como sea posible en el elemento <HEAD> del código HTML de su sitio web. Si se coloca el fragmento en la parte superior de la etiqueta <HEAD>, se solucionan la mayoría de los problemas de parpadeo.

Audiencia

Este artículo está dirigido a clientes que han observado parpadeo en las páginas que ha modificado con Optimize para probarlas.

No instale el fragmento antiparpadeo:

  • ... si el fragmento de Optimize no está en la parte superior del elemento <HEAD>.
  • ... si no ha observado que la página parpadee.
  • ... si utiliza eventos de activación que no activan cambios la primera vez que se carga una página.
  • ... con un sistema de gestión de etiquetas como Google Tag Manager.

¿Se puede instalar el fragmento antiparpadeo mediante un sistema de gestión de etiquetas?

No instale el fragmento antiparpadeo con un sistema de gestión de etiquetas como Google Tag Manager.
Instale el fragmento implementándolo directamente en la página web y no mediante un sistema de gestión de etiquetas ni a través de una secuencia de comandos asíncrona. Si no puede instalarlo implementándolo en la página, sáltese este paso.

Disminuir el parpadeo de página

Si observa que la página parpadea después de haber seguido los pasos indicados anteriormente, la forma más eficaz de mitigar este problema al cargar Optimize es ocultar temporalmente la página mientras se carga el contenedor de Optimize. Para ello, añada el fragmento antiparpadeo como primera secuencia de comandos de la página.

Cómo funciona

Optimize muestra variantes a los visitantes de su sitio web modificando el modelo de objetos del documento (DOM). En algunos casos, los cambios se realizan en elementos que ya son visibles para el usuario final. Estos cambios visibles son lo que se denomina "parpadeo de página".

El parpadeo de página se produce cuando una página web se muestra brevemente con el estilo predeterminado del navegador antes de cargar una hoja de estilo CSS externa que la vuelve a renderizar y que hace que los elementos parpadeen de manera momentánea para mostrarse con el nuevo estilo.

Implementar el fragmento antiparpadeo

Para instalar el fragmento antiparpadeo, siga estos pasos:

  1. Copie el código completo que se incluye más abajo y añádalo a todas las páginas con Optimize tan arriba como sea posible en la etiqueta <HEAD>, pero siempre detrás de cualquier declaración de dataLayer que pueda haber.
  2. Asegúrese de que el fragmento de Optimize o el contenedor de Tag Manager se incluyen inmediatamente después del fragmento antiparpadeo.

Ejemplo de fragmento antiparpadeo

<HTML>
<HEAD>
<!-- anti-flicker snippet (recommended)  -->
<style>.async-hide { opacity: 0 !important} </style>
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',4000,
{'CONTAINER_ID':true});</script>

Nota: Sustituya CONTAINER_ID por su ID de contenedor de Optimize. Si utiliza Google Tag Manager para implementar Optimize, sustituya CONTAINER_ID por el ID de su contenedor de Tag Manager.

Debe inicializar dataLayer por encima del fragmento antiparpadeo para que el rendimiento de su sitio web no se vea afectado. No anule la capa de datos más adelante en la página.

Prácticas recomendadas para colocar fragmentos

Para obtener un rendimiento óptimo, coloque el fragmento de Optimize en la parte superior de la etiqueta <HEAD> de cada página web que quiera optimizar.

Los únicos elementos que deben aparecer encima del fragmento de Optimize son los siguientes:

  • Todo el código de inicialización de dataLayer que haya. Nota: Si se utiliza el fragmento antiparpadeo, la variable dataLayer no debe reasignarse después.
  • Todas las secuencias de comandos que declaren variables de JavaScript, funciones o cookies que utilice en Optimize, como bibliotecas jQuery o JavaScript que se usen en la implementación o la segmentación. Nota: Con Optimize no se instala jQuery de forma predeterminada.
  • El fragmento antiparpadeo opcional, cuando se usa para disminuir el parpadeo de la página.

Si usa una política de seguridad de contenido, consulte el artículo Requisitos de seguridad de Optimize para asegurarse de que esa política permite usar el dominio del fragmento en su sitio web (google-analytics.com o googleoptimize.com).

Personalizar el fragmento antiparpadeo

El fragmento antiparpadeo incluye una función de tiempo de espera que se puede configurar para dejar de aplicar los cambios experimentales si transcurre demasiado tiempo. Una vez que pasa el tiempo de espera, la página se muestra. De esta forma, el usuario solo ve el contenido predeterminado y no la nueva experiencia.

Consulte más información sobre cómo personalizar el fragmento antiparpadeo.

Usuarios de Tag Manager

Nota: Si usa Google Tag Manager para implementar Optimize, rellene el fragmento antiparpadeo con el ID de contenedor de Tag Manager en lugar de con el ID de contenedor de Optimize.

Al añadir la etiqueta de Optimize al contenedor de Tag Manager, evitará que la página parpadee hasta que Optimize se cargue. Esto no afectará a la página si inhabilita la etiqueta posteriormente.

Consulte más información sobre cómo instalar Optimize con Google Tag Manager.

Nomenclatura

El parpadeo de página también se conoce como "parpadeo de JavaScript", "parpadeo de DOM", "parpadeo de contenido sin estilo" (FOUC) o "parpadeo de texto sin estilo" (FOUT). El fragmento para ocultar páginas se denominaba anteriormente "fragmento antiparpadeo".

¿Te ha resultado útil esta información?
¿Cómo podemos mejorar esta página?
Búsqueda
Borrar búsqueda
Cerrar búsqueda
Aplicaciones de Google
Menú principal
Buscar en el Centro de ayuda
true
101337
false
false