En esta guía se explica cómo usar el fragmento antiparpadeo de Optimize, que permite cargar de manera asíncrona tu contenedor de Optimize y, al mismo tiempo, ocultar la página hasta que el contenedor esté preparado. De esta manera, los usuarios no ven el contenido inicial de la página antes de que un experimento lo modifique.
Código del fragmento antiparpadeo
Si quieres añadir el fragmento antiparpadeo a tu sitio, inserta el siguiente código en la sección <head> de todas las páginas que cargan el contenedor de Optimize antes de cualquier otro código que haya en la página. Además, debes sustituir la cadena OPT-XXXXXX por tu ID de contenedor de Optimize:
<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,
{'OPT-XXXXXX':true});</script>
Si quieres entender mejor cómo funciona el fragmento antiparpadeo de Optimize, consulta la versión comentada que se incluye a continuación:
<!-- Optimize anti-flicker CSS code -->
<style>
/* Sets the opacity of any element with this class to 0 */
.async-hide {
opacity: 0 !important
}
</style>
<!-- Optimize anti-flicker JavaScript code -->
<script>
/**
* Adds a class to the <html> element that hides the page until the Optimize
* container is loaded and the experiment is ready. Once Optimize is ready
* (or 4 seconds has passed), the class is removed from the <html> element
* and the page becomes visible again.
*
* @param {Window} a The global object.
* @param {HTMLHtmlElement} s The <html> element.
* @param {string} y The name of the class used to hide the <html> element.
* @param {string} n The name of property that references the dataLayer object.
* @param {number} c The max time (in milliseconds) the page will be hidden.
* @param {Object} h An object whose keys are Optimize container IDs.
* @param {undefined} i (unused parameter).
* @param {undefined} d (unused parameter).
* @param {undefined} e (unused parameter).
*/
(function(a, s, y, n, c, h, i, d, e) {
// Adds a class (defaulting to 'async-hide') to the <html> element.
s.className += ' ' + y;
// Keeps track of the exact time that the snippet executes.
h.start = 1*new Date;
// Creates a function and assigns it to a local variable `i` as well as
// the `end` property of the Optimize container object. Once Optimize is
// loaded it will call this function, which will remove the 'async-hide'
// class from the <html> element, causing the page to become visible again.
h.end = i = function() {
s.className = s.className.replace(RegExp(' ?' + y), '');
};
// Initializes the dataLayer as an empty array if it's not already initialized
// and assigns the passed Optimize container object to the dataLayer's `hide`
// property. This makes the function defined above accessible globally at the
// path `window.dataLayer.hide.end`, so it can be called by Optimize.
(a[n] = a[n] || []).hide = h;
// Creates a timeout that will call the page-showing function after the
// timeout amount (defaulting to 4 seconds), in the event that Optimize has
// not already loaded. This ensures your page will not stay hidden in the
// event that Optimize takes too long to load.
setTimeout(function() {
i();
h.end = null
}, c);
h.timeout = c;
})(
window, // The initial value for local variable `a`.
document.documentElement, // The initial value for local variable `s`.
'async-hide', // The initial value for local variable `y`.
'dataLayer', // The initial value for local variable `n`.
4000, // The initial value for local variable `c`.
{'OPT-XXXXXX': true} // The initial value for local variable `h`.
);
</script>
Personalizar el fragmento antiparpadeo
En algunos casos es necesario personalizar el fragmento antiparpadeo. Estos son los motivos más habituales:
- Para cargar varios contenedores de Optimize.
- Para ampliar el tiempo de espera de la función de retrollamada.
- Para cambiar el nombre de la clase que se ha añadido al elemento
<html>.
Cargar varios contenedores
Si quieres que se carguen varios contenedores de Optimize, puedes personalizar el fragmento para que la página permanezca oculta hasta que se hayan cargado todos.
Para especificar más de un contenedor, añade claves adicionales al objeto contenedor que aparece al final del fragmento. Con este código, se espera a que se carguen los contenedores OPT-XXXXXX y OPT-YYYYYY:
<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,
{'OPT-XXXXXX':true,'OPT-YYYYYY':true});</script>
Cambiar el tiempo de espera
Para cambiar el tiempo predeterminado que Optimize debe esperar antes de quitar la clase .async-hide del elemento <html> (en caso de que Optimize tarde demasiado en cargar), cambia el número que aparece al final del fragmento.
Con el siguiente código, transcurrirán 5000 milisegundos antes de que se muestre la página:
<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',5000,
{'OPT-XXXXXX':true});</script>
Cambiar el nombre de la clase async-hide
Si el nombre de la clase async-hide ya está definido en el código CSS, puedes elegir otro. Si decides cambiar el nombre de la clase, hazlo tanto en la etiqueta <style> como en el argumento que aparece al final del fragmento.
Con el siguiente código, se usará la clase optimize-loading en lugar de async-hide:
<style>.optimize-loading { 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,'optimize-loading','dataLayer',4000,
{'OPT-XXXXXX':true});</script>