Tutorial

Cómo integrar Google Optimize en el flujo de la web a través de GTM

Fani Sánchez

-

Elisa Garrido

Product Owner

-

Junior Maker Analyst

@

Mínimo.

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 tu sitio de Webflow a través de Google Tag Manager. La guía está escrita paso a paso por lo que seguirla es muy sencillo incluso si no has integrado antes ninguna herramienta en Webflow.

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 - Activa la etiqueta o Tag de Google Optimize antes que la de Google Analytics

Desde tu cuenta de Google Tag Manager, tendrás que configurar las etiquetas de manera que la de Google Optimize se active 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.

  • Copia el siguiente código en todas las páginas en las que hayas incluido Optimizar lo más alto posible en la <head> etiqueta. El código antiparpadeo -si ha instalado dataLayer- debe ser incluido después del código dataLayer.</head>
  • Debemos colocar el código del sitio y el código de Tag Manager justo después del fragmento antiparpadeo.


¡Gracias!

¿Como este artículo? Corre la voz.

Código bajo y sin código en acción

Suscríbete a nuestro boletín de noticias

Únete a nuestro boletín de noticias y recibe recursos, contenido curado e inspiración para el diseño directamente en tu bandeja de entrada.

¡Gracias! Su presentación ha sido recibida!
Algo salió mal al enviar el formulario. Por favor, inténtelo de nuevo.

Lo último de nuestro Blog

Tienes preguntas, tenemos respuestas

FAQ

¿Quiénes somos?
¿Cuánto tiempo lleva construir mi producto digital o MVP?
¿Puedo trabajar con Minimum.run de forma continua una vez que mi MVP o producto esté lanzado?
¿Con qué tecnologías e integraciones trabaja Minimum.run?
¿Cuál es el proceso de trabajo con Minimum.run?
¿Cuáles son las entregas típicas?
¿Seré capaz de gestionar mi producto personalizado una vez que esté lanzado?
Suscríbase a