En este post vamos a ver cómo hacer con éxito una instalación de Google Optimize, cuando ya tenemos una instalación previa de Google Tag Manager y Analytics en la web. Más que cómo implementarlo con Tag Manager, vamos a ver cómo hacerlo si ya tenemos Tag Manager en la web y Analytics funcionando, para que todo sea compatible y quede bien hecho.

Como sabemos, las herramientas publicitarias y de marketing cada vez son más técnicas y complejas, tanto que para la mera instalación ya necesitamos instrucciones. Pues bien, esta es la documentación oficial de Google al respecto, está muy bien, aunque aquí se va a simplificar o tratar de hacerlo un poco más:

Fuente: https://support.google.com/optimize/answer/7359264

Hay varias opciones, como vemos arriba:

• Google Optimize en el código web directamente + GTM para Analytics y otros servicios
• Google Optimize a través de GTM

Aquí, en esta ocasión, vamos a ver la primera opción, pues es la que el propio Google aconseja.

¿Cuál es el código de Google Optimize?

En principio, tras seguir el proceso de generación de tracking de Optimize, en la herramienta se nos dice que necesitamos instalar un código tal que así en la web:

Fijémonos en que dicho código ya lleva ga(‘send’, ‘pageview’). Esto nos indica que se trata un código que, de manera combinada, ejecuta Google Optimize y también manda un pageview a Google Analytics.

¿Cómo instalamos Optimize en código si ya tenemos funcionando Tag Manager y Analytics en la página?

Lo principal a tener en cuenta que el orden de ejecución del código JavaScript para realizar tests A/B es fundamental. El motivo: necesitamos que primero se cargue la variante correcta de la página, y que a continuación se envíe el dato de qué página se vio.

Lo fundamental es que el nuevo fragmento de código (Optimize, o Page Hidding + Optimize, luego explicamos) esté más arriba que el código de Tag Manager, todos dentro del head. El orden como se dice es crítico también en el JavaSript de Optimize si se ponen ambas partes: primero page hidding, luego Optimize. Page Hidding es una propuesta de código JavaScript que nos ofrece Google para que la web espere un poco para mostrarse al cargar la página, para saber bien qué versión de página debe mostrar a través de Optimize, y evitar que se note un salto visual desagradable en conexiones más lentas.

Os recuerdo que en resumen hacemos todo tal y como dice la documentación, aquí solo trataré de trasladarlo y ampliarlo cuando vea necesario, lo más sencillo posible:
https://support.google.com/360suite/optimize/answer/7359264

El paso más avanzado del tutorial de Google es este, se titula así:

«Paso 1: Modifique el código de seguimiento de Analytics»

Voy a ir comentándolo…

Primero, cree una versión modificada del código de seguimiento de Analytics para implementarlo directamente en su sitio web. Si las etiquetas de Analytics en Tag Manager incluyen ajustes de seguimiento de Analytics personalizados, debe agregar las mismas personalizaciones al modificar el código de seguimiento.

A continuación, se explica cómo crear una versión modificada del código de seguimiento de Analytics:

1. Copie el código de seguimiento de Analytics, incluidas sus personalizaciones. Si las etiquetas de Analytics en Tag Manager incluyen ajustes de seguimiento de Analytics personalizados, debe incluirlos en el comando create de Analytics. Por ejemplo, el siguiente comando «create» habilita la configuración automática de dominios de cookie y le asigna el valor «true» a allowLinker:

ga('create', 'UA-XXXXXX-X', 'auto', {allowLinker: true});

Esto quiere decir que debes copiar tu código de Analytics con personalizaciones, si las tuvieras, en cuanto al comando «create» – Campos de solo creación. Ya avisé que esta es la parte más compleja, vamos a por ello :)

Si sois asiduos/as de mi blog y/o de Tag Manager, todo esto de las personalizaciones os sonará,  son configuraciones de la variable de Google Analytics dentro de Tag Manager. Si no, os recomiendo ampliar con estos posts para saber de qué va esta película:

• Seguimiento multidominio y de subdominios en Google Analytics con Tag Manager


• Configuración rápida y avanzada de Google Analytics con Tag Manager

Volviendo al tema, los campos de solo creación, definidos por el comando create de Google Analytics son:

• en su mayoría algunos de lo que en Tag Manager conocemos como «Campos para configurar o Fields to set» (pero ni son todos los que están ni están todos lo que son) > Comando «create» – VER: Campos de solo creación
• el ID de Analytics
• el Cookie Domain o Dominio de la Cookie
• el campo name

Si tengo el código personalizado pues genial! pero si lo he hecho todo con GTM, todos estos campos los podemos encontrar dentro de Tag Manager en la Variable de configuración de Google Analytics:

Y de haber varios campos para configurar y/o el campo name, en lo marcado arriba, lo pondríamos así, por ser un objeto de JavaScript separamos con comas:

ga('create', 'UA-XXXXXX-X', 'auto', {allowLinker: true, alwaysSendReferrer: true});

Lo único que va por libre es el ID de Analytics, con lo que llegamos y lo cambiamos también, por supuesto (nos lo recuerdan en el paso 3 del tutorial de Google).

2. Agregue el complemento de Optimize como una nueva línea justo debajo del comando «create» de Analytics indicado arriba:

ga('require', 'GTM-XXXXXX');

Aquí nos aseguramos de lo dicho antes, que pone el identificador GTM-XXXX que obtuvimos dentro de Optimize.

3. Elimine esta línea si activa las etiquetas de Analytics a través de Tag Manager.

ga('send', 'pageview');

Nota: Sustituya UA-XXXXXXXX-Y por su ID de seguimiento de Analytics y GTM-XXXXXX, por su ID de contenedor de Optimize.»

Fundamental!!! para evitar duplicar nuestro seguimiento de páginas vistas en Google Analytics, provocar un rebote nulo, etc. etc.

EJEMPLO DE IMPLEMENTACIÓN CORRECTA DE OPTIMIZE EN CÓDIGO, SI TENEMOS GTM

Recopilando, tendremos este código en la web, en el <head> de la página tenemos:

1. Page hidding snippet (para que no se vea salto al cargar el test). Opcional, yo lo recomendaría.

<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-<strong>XXXXXX</strong>':true});</script>

Recordemos poner ahí nuestro identificador de optimize.

2. Código de Optimize (con personalizaciones mencionadas antes)

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXX-Y', 'auto'); // Update tracker settings
ga('require', 'GTM-XXXXXX'); // Add this line
// Remove pageview call
</script>

3. Código <script> de GTM justo debajo

<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-YYYYYYY');</script>

Y en apertura del <body>:

4. Parte <noscript> de GTM

<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-YYYYYYY"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

RESULTADO FINAL

En total pondríamos todo este código:

• Arriba en el head:

<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-<strong>XXXXXX</strong>':true});</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXX-Y', 'auto'); // Update tracker settings
ga('require', 'GTM-XXXXXX'); // Add this line
// Remove pageview call
</script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-YYYYYYY');</script>

• Y en apertura del <body&gt solo parte <noscript> de GTM

<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-YYYYYYY"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>