Si ya tienes tu página web en WordPress y utilizas o quieres utilizar Google Optimize para realizar diferentes experimentos, seguramente te haya surgido la duda de como ha de realizarse la inserción de código del código de Google Optimize cuando actualmente ya tienes configurado Google Analytics a través de Google Tag Manager.
Sigue leyendo y descubre todo hacerlo. Si todavía no tienes muy claro qué es Google Optimize descúbrelo aquí.
Antes de nada, decirte que puedes insertar el código de Google Optimize de dos formas diferentes:
- Insertar Google Optimize en el código fuente
- A través de Google Tag Manager
Contenido de la entrada
1. Insertar Google Optimize en el código fuente
Si ya has estado investigando acerca de como instalar Google Optimize en tu página web, seguramente hayas accedido a la documentación oficial de Google donde te indican como hacerlo paso por paso.
Sin embargo, al igual que me pasó a mí en su momento, esta opción puede llevar a confusiones si ya tienes Google Analytics añadido a tu página web, pero lo has hecho a través de Google Tag Manager.
Es por eso por lo que quiero destacar que esta opción es únicamente recomendada cuando tu código de Google Analytics esta implementado en tu página web directamente en el código fuente (sin que tengas las etiquetas creadas en Google Tag Manager).
De hecho, si pruebas a modificar el código que te indica Google en su guía, eliminando el ‘Pageview’ cuando procedas a la verificación del código, de advertirá que tu código de Analytics debe de estar implementado todo de la misma manera. Es decir, o todo en GTM o todo en código fuente.
1.1. Edita o copia el código de Google Optimize
Copia o mejor dicho edita tu código de Google Analytics de la siguiente forma.
<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-X', 'auto');
ga('require', 'GTM-XXXXXX');
ga('send', 'pageview');
</script>Sustituye:
- UA-XXXXXXX-X por el ID de tu propiedad de Google Analytics
- GTM-XXXXXX por el ID de tu contenedor de Google Optimize (¡ojo! no es el ID de Google Tag Manager)
1.2. Edita el fragmento de código para ocultar páginas
Este código no es obligatorio pero sí recomendado. Lo único que tienes que hacer es copiar el siguiente código y sustituir el ‘GTM-XXXXXX’ por el ID de tu contenedor de Google Optimize:
<!-- Page-hiding snippet (recommended) -->
<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>1.3. Añádelo en el archivo header.php
Una vez tienes listos los dos códigos anteriores anterior, accede al archivo ‘header.php’ dentro de tu tema de WordPress. (Apariencia -> Editor -> header.php) y exactamente en el orden en el que se muestra en la siguiente imagen:
¡Importante! Este archivo ‘header.php’ es muy delicado y cualquier fallo puede ‘romper’ tu página web por lo que te recomiendo que hagas una copia de seguridad antes de realizar cualquier cambio, para que puedas volver a atrás en el caso de que algo falle.
2. Insertar Google Optimize a través de Google Tag Manager
A día de hoy, la mayoría de implementaciones de Google Analytics se hace a través de Google Tag Manager. Esta opción para insertar el código es la que debes llevar a cabo si ya tienes tu ‘tracking’ de Google Analytics en tu contenedor de GTM.
2.1. Crea la etiqueta de Google Optimize en tu contenedor de GTM
Lo primero de todo es crear la etiqueta de Google Optimize en tu contenedor. Para ello, utilizaremos la plantilla predefinida donde únicamente tendremos que insertar el código de nuestro contenedor de Google Optimize.
Cuando hayas añadido el ID de tu contenedor de Google Optimize y seleccionado la variable de tu propiedad de Google Analytics con la que deseas enlazar tu contenedor de Google Optimize, guarda la etiqueta sin añadir ningún activador.
El siguiente paso es decirle a esta nueva etiqueta de Google Optimize que se ejecute antes de tu etiqueta de ‘Página Vista’ de Google Analytics.
Para ello accede a tu etiqueta de de Google Analytics que se ejecuta en todas las página, y en ‘Configuración Avanzada -> Secuencia de etiquetas’ activa la casilla ‘Active una etiqueta antes de que se active UA – Pageview’ y seleccionado tu nueva etiqueta de Google Optimize, tal y como puedes ver en la siguiente imagen:
Guarda los cambios y publica una nueva versión de tu contenedor de GTM (o usa la vista previa).
2.2. Edita el fragmento de código para ocultar páginas
Para evitar que el usuario vea una versión de la página y seguidamente (cuando Google Optimize está listo) la variación del experimento, añadiremos un código que evitará que se le muestra la página al usuario hasta que Google Optimize no se haya ejecutado.
Copia y edita el siguiente código, pero esta vez sustituyendo GTM-XXXXXX por el ID de tu contenedor de GTM y no por el de Google Optimize:
<!-- Page-hiding snippet (recommended) -->
<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>2.3. Añade el fragmento de código para ocultar páginas en el header.php
Esta vez, únicamente tienes que añadir el fragmento de código que acabas de editar para ocultar páginas en el archivo header.php tal y como se muestra en la siguiente imagen:
3. Verifica que has instalado Google Optimize correctamente
Si es la primera vez que estas configurando Google Optimize y tu código todavía no ha sido verificado, te saldrá en mensaje similar al siguiente en el panel del experimento de tu contenedor de google Optimize que te dirá si lo has hecho bien o no.
Si este mensaje no te aparece, puedes utilizar el ‘Google Tag Assistant’ para verificar que se ha instalado correctamente.
Nota: Si todavía no sabes verificar si tus herramientas de Google han sido correctamente añadidas suscríbete y descarga la guía gratuita para descubrir cómo hacerlo. Cómo puedes ver en la siguiente imagen, mi etiqueta de Google Optimize aparece en color verde y por tanto Google Optimize está correctamente implementado.
Espero que te haya resultado útil y si tienes cualquier duda te animo que participes en el grupo privado de Facebook o directamente añadiendo tu comentario en esta entrada.
Si quieres saber más acerca de Google Optimize te invito a que le eches un vistazo a este Tutorial de Google Optimize.