Si tienes una página web seguramente gran parte de tu tiempo lo ocupes pensando en formas de mejorarla y actualizarla. Hoy en día, con los avances tecnológicos y el dominio de los medios digitales, ofrecer el mejor servicio no es ya opcional sino indispensable.

Google Optimize es una herramienta de testing y experimentación que te ayudará a medir el impacto de los cambios que implementes en tu sitio con el fin de determinar aquellos que funcionen mejor.

En este tutorial vamos a integrar Google Optimize en Webflow a través de Google Tag Manager. Esta guía está escrita paso a paso: seguirla será muy fácil incluso si no ha integrado ninguna herramienta en Webflow antes.

Requisitos

Antes de comenzar, es necesario tener una cuenta en los siguientes servicios. Todos ellos tienen un nivel gratuito con el que podemos trabajar.

• Google Analytics
• Google Optimize
• Administrador de etiquetas de Google
• Webflow

Además, también necesitarás haber integrado previamente las siguientes herramientas:

• Google Analytics con Google Tag Manager

Paso 01 - Copiar el ID de tu Container en Google Optimize

Cuando entras en Google Optimize, si ya has creado tu cuenta y tu nuevo container, deberás tener en cuenta cuál es el código de identificación que te asigna Google Optimize: el ID de tu container.

Encontrarás este ID de la siguiente manera

• Al entrar en Google Optimize, verás una caja con tu container, haz click en él.
• Una vez dentro, entra en settings o configuración, que encontrarás en el menú de arriba a la derecha.
• Dentro de settings o configuración, verás los detalles del container, el nombre que le has dado y, al lado, a la derecha el código de identificación o ID del mismo. Este código está formado por carácteres alfanuméricos.
• Selecciona el código de identificación o ID y cópialo.

Paso 02 - Crea una nueva etiqueta o Tag en Google Tag Manager

Una vez hayas entrado en tu cuenta de Google Tag Manager, verás a la izquierda el menú desde donde podrás crear nuevas etiquetas o Tags, disparadores o Triggers, Variables, Carpetas o Folders y Plantillas o Templates. 

Para crear una nueva etiqueta, debes seguir los siguientes pasos

• Haz click en la opción de etiquetas o Tags en el menú. 
• Una vez dentro de etiquetas o Tags, haz click en Nueva o New. 
• Haz click en Tag Configuration
• Del desplegable, elige la opción de Google Optimize
• Ahora puedes cambiar el nombre de la etiqueta en la casilla que aparece en el menú arriba a la izquierda. Puedes llamarla Google Optimize.
• Te aparecerá un espacio para poder pegar el código de identificación o ID que ya hemos copiado de Google Optimize. Pega ese código.
• Debajo de la casilla de identificación verás otra casilla para seleccionar la variable apropiada. Selecciona la variable de Google Analytics que ya has creado. Si todavía no has creado tu variable de Google Analytics, consulta este otro artículo.
• Haz click en guardar o save.

Paso 03 - Seleccione la etiqueta de optimización de Google antes de la de Google Analytics

Desde su cuenta de Google Tag Manager, deberá configurar las etiquetas para que la etiqueta Google Optimize se dispare antes que la de Google Analytics.

Para activar el orden de preferencia de las etiquetas, sigue estos pasos

• En tu cuenta de Google Tag Manager, selecciona la opción de etiquetas o Tags en el menú de la izquierda.
• Entra en la etiqueta o Tag de Google Analytics y haz click sobre las opciones avanzadas o Advanced Settings. 
• Debajo del desplegable de secuencia de etiquetas o Tag Sequencing, haz click en la casilla que dice "Fire a tag before Google Analytics Universal Analytics [o el nombre que le hayas dado] fires" 
• Una vez seleccionada la opción anterior, puedes elegir la etiqueta o Tag que se activará antes que Google Analytics Universal Analytics [o el nombre que le hayas dado]. Selecciona Google Optimize.
• Haz click en guardar o Save y ya lo tienes.

Paso 04 - Publica tu container de Tag Manager para que los cambios se activen

Desde tu escritorio de Google Tag Manager, haz click en el botón de enviar o submit que encontrarás en el menú superior derecho. 

Para publicar tu container, sigue estos pasos

• Desde la pantalla que se desplegará al hacer click en el botón submit, podrás editar el nombre y descripción de tu versión. 
• Haz click en el botón de publicar

🚨 Corregir el parpadeo de página

Es posible que al implementar Google Optimize la página parpadee. Para corregir esto, puedes ocultar la página temporalmente. Así, Google Optimize tendrá el tiempo suficiente para cargar el contenedor.

La forma de ocultar la página es incluir el fragmento anti parpadeo o snippet anti flicker en el código de la página. 

• Copy the following code in all the pages in which you included Optimize as high as posible in the <head> tag. The anti flicker code -if you have installed dataLayer- must be included after the dataLayer code.</head>

• Debemos colocar el código del sitio y el código de Tag Manager justo después del fragmento antiparpadeo.

¡Gracias!

‍