Instalar Optimize

Cómo implementar Optimize en un sitio web

Para instalar Optimize, se debe añadir un pequeño fragmento de código al sitio web en cuestión, lo que permite mostrar experiencias de Optimize (pruebas y personalizaciones) a los visitantes.

Requisitos previos

Antes de empezar, debe tener una cuenta de Optimize y un contenedor vinculado a una propiedad de Google Analytics. En el artículo Configurar Optimize, encontrará instrucciones para cumplir ambos requisitos. Para etiquetar el sitio web con el fragmento de Optimize, también necesita permiso para editar su código HTML.

Elegir un método

En función de cómo se implemente Google Analytics, hay dos métodos recomendados para instalar Optimize:

  1. Método 1: Si usa la etiqueta global de sitio web (gtag.js).
  2. Método 2: Si usa Google Tag Manager.

Método 1: Instalar Optimize con la etiqueta global de sitio web (gtag.js)

Nota: Si usa Google Tag Manager, siga estas otras instrucciones.

Paso 1: Instale la etiqueta global de sitio web con Analytics

Nota: Si ya usa la etiqueta global de sitio web y Analytics en su sitio web, vaya al paso 2, donde se explica cómo añadir el ID de contenedor de Optimize.

Para instalar Optimize, necesita una etiqueta global de sitio web (gtag.js) con Google Analytics. Puede obtenerla en la consola de administración de Google Analytics (Administrar > columna Propiedad > Información de seguimiento > Código de seguimiento) o personalizar el ejemplo siguiente.

Ejemplo: Etiqueta global de sitio web con Google Analytics

El fragmento siguiente carga la biblioteca gtag.js, define GA_TRACKING_ID como ID de propiedad de Google Analytics predeterminado y envía un hit de página vista a Google Analytics.

<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GA_TRACKING_ID');
</script>

 

Nota: Sustituya GA_TRACKING_ID por su ID de seguimiento de Google Analytics.

En el Centro de Ayuda de Analytics encontrará más información sobre cómo configurar el seguimiento de Analytics.

Paso 2: Implemente Optimize en la etiqueta global de sitio web

Cuando tenga la etiqueta global de sitio web (gtag.js) con el ID de seguimiento de Google Analytics, debe añadir el ID de contenedor de Optimize a la línea gtag('config', como se indica a continuación:

   gtag('config', 'GA_TRACKING_ID', { 'optimize_id': 'OPT_CONTAINER_ID'});

En Optimize, puede obtener la etiqueta global de sitio web personalizada con los ID de Analytics y Optimize. Para conseguirla, vaya a Contenedor > Configuración del contenedor > Instalar Optimize.

Ejemplo: Etiqueta global de sitio web con Google Analytics y Optimize

<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GA_TRACKING_ID', { 'optimize_id': 'OPT_CONTAINER_ID'});
</script>
 

Nota: Sustituya GA_TRACKING_ID por su ID de seguimiento de Google Analytics y OPT_CONTAINER_ID por su ID de contenedor de Optimize.

Paso 3: Instale la etiqueta global en su sitio web

Para instalar la etiqueta global en su sitio web, pegue el fragmento de código inmediatamente después de la etiqueta <head> de cada página que quiera optimizar.

  • Si la etiqueta global de sitio web ya está instalada, añádale el ID de contenedor de Optimize (consulte el paso 2 anterior) y llévela al principio de la etiqueta <head>.
  • Si la etiqueta global de sitio web no está instalada, instálela justo al principio de la etiqueta <head> de cada página web que quiera optimizar.

Nota: Solo se necesita una etiqueta global de sitio web por página.

Prácticas recomendadas para colocar fragmentos

Para que el rendimiento sea óptimo, coloque la etiqueta global de sitio web justo al principio de la etiqueta <head> de cada página que quiera optimizar.

Los únicos elementos que deben aparecer por encima de la etiqueta global de sitio web son los siguientes:

  1. La inicialización de la capa de datos. Nota: Cuando se usa el fragmento para ocultar páginas, la variable dataLayer nunca se debe reasignar más abajo.
  2. Todas las secuencias de comandos que declaren variables, funciones o cookies de JavaScript y que quiera usar en experiencias de Optimize, por ejemplo, jQuery o cualquier biblioteca de JavaScript que quiera usar en la implementación o la segmentación. Nota: Con Optimize no se instala jQuery de forma predeterminada.
  3. El fragmento para ocultar páginas que se puede usar para evitar el parpadeo.

Método 2: Instalar Optimize con Google Tag Manager

Nota: Si usa la etiqueta global de sitio web (gtag.js), siga estas otras instrucciones.

Si quiere implementar Optimize con Google Tag Manager, siga las instrucciones que se indican a continuación. Si usa otro sistema de gestión de etiquetas, siga las instrucciones correspondientes para añadir Optimize a la etiqueta de Google Analytics que ya tenga.  

Nota:
Si instala Optimize mediante Tag Manager, use un activador del tipo Página vista. Si la etiqueta de Optimize no usa un activador de dicho tipo, la función de ocultar páginas no funciona correctamente, ya que los eventos de tipo "DOM preparado" y "Ventana cargada" tardan demasiado en cargar el contenedor de Optimize.

Ajustes de seguimiento personalizados

Para que todas las etiquetas tengan los mismos ajustes de seguimiento al usar ajustes de seguimiento personalizados, es necesario usar variables de configuración de Google Analytics compartidas entre Tag Manager y dicha plataforma.

Paso 1: Reúna la información necesaria

Para instalar Optimize, necesita la información siguiente:

  1. ID de seguimiento de Analytics.
  2. ID de contenedor de Optimize.
  3. Confirmar que en los ajustes de seguimiento de Tag Manager y Analytics se usan variables de configuración de Google Analytics compartidas.

Paso 2: Configure Optimize en Tag Manager

Cuando tenga la información necesaria, siga estos pasos para configurar Optimize en Tag Manager:

  1. Inicie sesión en Tag Manager y seleccione una cuenta.
  2. Haga clic en Etiquetas > Nueva.
  3. Haga clic en Configuración de la etiqueta > Google Optimize.
  4. Introduzca su ID de contenedor de Optimize.
  5. Seleccione una variable de configuración de Google Analytics.
  6. Haga clic en Guardar y guarde la etiqueta sin activadores.
  7. Abra la etiqueta de página vista de Analytics de la propiedad de Analytics vinculada al contenedor de Optimize.
  8. Haga clic en Configuración de la etiqueta > Configuración avanzada > Secuenciación de etiquetas.
  9. Marque la casilla para que se active otra etiqueta antes que esta. En Etiqueta de configuración, haga clic en el menú y seleccione la etiqueta de Optimize que quiera.
  10. Configure la etiqueta de Optimize de forma que se active una vez por página y guárdela.
  11. Para que se apliquen los cambios, publique el contenedor de Tag Manager.

Consulte más información en la guía de configuración de etiquetas de Optimize del Centro de Ayuda de Tag Manager.

Prácticas recomendadas para colocar fragmentos

Para que el rendimiento sea óptimo, coloque la etiqueta de Tag Manager justo al principio de la etiqueta <head> de cada página que quiera optimizar.

Los únicos elementos que deben aparecer por encima de la etiqueta global de sitio web son los siguientes:

  1. La inicialización de la capa de datos. Nota: Cuando se usa el fragmento para ocultar páginas, la variable dataLayer nunca se debe reasignar más abajo.
  2. Todas las secuencias de comandos que declaren variables, funciones o cookies de JavaScript y que quiera usar en experiencias de Optimize, por ejemplo, jQuery o cualquier biblioteca de JavaScript que quiera usar en la implementación o la segmentación. Nota: Con Optimize no se instala jQuery de forma predeterminada.
  3. El fragmento para ocultar páginas que se puede usar para evitar el parpadeo.

 

Verificar la instalación de Optimize

La mejor forma de comprobar que Optimize se ha instalado correctamente es crear una pequeña personalización de prueba, que se puede eliminar más adelante, y evaluar la herramienta con el diagnóstico de la instalación y el modo de vista previa.

Solucionar problemas de parpadeo de página

Las instrucciones anteriores son válidas para la mayoría de sitios web. Si ve que una página parpadea al ejecutarse Optimize, coloque el fragmento de instalación de Tag Manager o de la etiqueta global de sitio web más arriba en la etiqueta <head> de la página en cuestión. Si sigue habiendo parpadeo, instale el fragmento antiparpadeo y personalícelo según le convenga.

Otras implementaciones

La etiqueta global de sitio web (gtag.js) y Google Tag Manager son los métodos de etiquetado recomendados para hacer implementaciones nuevas. Si usa Universal Analytics, consulte el artículo sobre cómo instalar en un sitio web Optimize con analytics.js. También puede consultar las instrucciones para instalar Optimize con Tag Manager directamente en una página.

Nota: Optimize no funciona con la biblioteca ga.js antigua.

Técnicas de etiquetado avanzadas

Páginas dinámicas y aplicaciones web

Puede usar eventos de activación para especificar como objetivo variables que se definen tras cargar el fragmento de Optimize, por ejemplo, en páginas dinámicas y aplicaciones web.

Varios contenedores de Optimize o Tag Manager

Si añade 'send_page_view': false a todos los contenedores excepto a uno, puede usar varios comandos gtag en una misma página.

Ejemplo: Varios comandos gtag

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());


 gtag('config', 'GA_TRACKING_ID', { 'optimize_id': 'OPT_CONTAINER_ID_1', 'send_page_view': false});

 gtag('config', 'GA_TRACKING_ID', { 'optimize_id': 'OPT_CONTAINER_ID_2'});

</script>

 

Nota: Sustituya GA_TRACKING_ID por su ID de seguimiento de Google Analytics, y OPT_CONTAINER_ID_1 y OPT_CONTAINER_ID_2 por sus ID de contenedor de Optimize.

Si usa el fragmento para ocultar páginas opcional, debe configurarlo para que tenga en cuenta todos los contenedores. En el sitio web para desarrolladores de Optimize, encontrará más información sobre cómo cargar varios contenedores.

Nombre de dataLayer personalizado

Si quiere personalizar el nombre de dataLayer, debe incluir el parámetro "l" en la secuencia de comandos y cambiar la función gtag.

Ejemplo: Nombre de dataLayer personalizado

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID&l=myNewName"></script>
<script>
window.myNewName = window.myNewName || [];
function gtag(){myNewName.push(arguments);}
gtag('js', new Date());

gtag('config', 'GA_TRACKING_ID', { 'optimize_id': 'OPT_CONTAINER_ID'});
</script>

 

Nota: Sustituya GA_TRACKING_ID por su ID de seguimiento de Google Analytics y OPT_CONTAINER_ID por su ID de contenedor de Optimize.

En el ejemplo anterior, se han destacado tres cambios:

  1. &l=myNewName se ha añadido a la etiqueta <script>
  2. window.myNewName = window.myNewName || [];
  3. function gtag(){myNewName.push(arguments);}

Si va a implementar el fragmento para ocultar páginas que reduce el parpadeo y usa un nombre personalizado de dataLayer, recuerde que debe cambiarlo en la última línea de dicho fragmento. En el ejemplo siguiente, "dataLayer" se ha cambiado a "myNewName".

Ejemplo: dataLayer personalizado en un fragmento para ocultar páginas

<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','myNewName',4000,
{'OPT_CONTAINER_ID':true});</script>

Nota: Sustituya OPT_CONTAINER_ID por su ID de contenedor de Optimize.

¿Te ha resultado útil esta información?
¿Cómo podemos mejorar esta página?