Usar el fragmento para ocultar páginas de Optimize

En esta guía se explica cómo usar el fragmento para ocultar páginas de Optimize, el cual permite cargar de manera asíncrona el 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 que se muestra en la página antes de que un experimento lo modifique.

Código del fragmento para ocultar páginas

Si quieres añadir el fragmento para ocultar páginas a tu sitio web, inserta el siguiente código en la sección <head> de cada una de las páginas que cargan el contenedor de Optimize, antes de cualquier otro código que aparezca en la página. Además, debes sustituir la cadena GTM-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,
{'GTM-XXXXXX':true});</script>

Si quieres entender mejor cómo funciona el fragmento para ocultar páginas de Optimize, consulta la versión comentada que se incluye a continuación:

<!-- Optimize page-hiding CSS code -->
<style>
/* Sets the opacity of any element with this class to 0 */
.async-hide {
  opacity: 0 !important
}
</style>

<!-- Optimize page-hiding 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), '');
  };

  // Initalizes 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`.
    {'GTM-XXXXXX': true} // The initial value for local variable `h`.
);
</script>

Personalizar el fragmento para ocultar páginas

En algunos casos es necesario personalizar el fragmento para ocultar páginas. Estos son los motivos más habituales:

  • Cargar varios contenedores de Optimize.
  • Ampliar el tiempo de espera de las devoluciones de llamada.
  • 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 asegurarte de que la página permanezca oculta hasta que se hayan cargado todos los contenedores.

Para especificar más de un contenedor, añade claves adicionales al objeto contenedor, el cual aparece al final del fragmento. Con este código, se espera a que se carguen los contenedores GTM-XXXXXX y GTM-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,
{'GTM-XXXXXX':true,'GTM-YYYYYY':true});</script>

Cambiar el tiempo de espera

Para cambiar el tiempo predeterminado que Optimize debe esperar antes de retirar la clase .async-hide del elemento <html> (en caso de que Optimize tarde demasiado en cargar los contenedores), cambia el número que se indica al final del fragmento.

Con el siguiente código, antes de que se muestre la página transcurrirán 5000 milisegundos:

<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,
{'GTM-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, elige otro. Si decides cambiar el nombre de la clase, hazlo en la etiqueta <style> y en el argumento que se indica 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,
{'GTM-XXXXXX':true});</script>