Cómo instalar el código de Google Optimize con Tag Manager

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.

Este código tal cual nos lo ofrece la herramienta solo es apto para casos donde aún no tengamos instalada medición de Google Analytics por ninguna otra vía, no para nuestro caso de hoy. En este post vamos a aprender a editar este código para hacerlo compatible con una instalación ya pre-existente de Google Analytics (hecha a través de Tag Manager).

¿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.

Importante: no hay que quitar nada de lo que ya tenemos puesto de Tag Manager ni de lo configurado en la herramienta, el código de GTM de head y body con el que ya contamos es totalmente independiente a todo esto. Solo introduzco todo esto para contar cómo afecta el orden, lo debemos seguir a rajatabla al añadir estos nuevos códigos en el head para que todo funcione OK.

¡¡OJO!! puede haber una confusión fácil, yo también la tuve: como ya sabemos, Tag Manager tiene un identificador único que empieza por GTM- y CUIDADO porque este es distinto al identificador GTM- del código de Optimize. Nada de reemplazar uno por el otro para querer igualar ambos ni nada de eso (es que esto nos puede pedir la situación si la miramos de manera rápida y por encima, a mi ver ha quedado un poco compleja la implementación). Insistimos: El otro código, el existente de GTM se queda como está. Y el ID tras GTM- dentro del código Optimize y el ID tras GTM- dentro del código de GTM serán distintos.

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:

Cómo reconocer configuración comando create Google Analytics en Tag Manager — Cómo reconocer si existe configuración (**comando create de Google Analytics en GTM**)

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:

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>

★ Si necesitas aprender Google Tag Manager y Analytics, entonces te interesa mi curso online. Consta de material PDF actualizado constantemente. Un sitio para hacer tus prácticas. Y está tutorizado por foro/email durante 2 meses (más opción a clases particulares).

O si prefieres una formación in company, en tu empresa, sobre: