Cómo integrar Google Optimize en Webflow a través de GTM

Si tienes un sitio web, seguro que dedicas mucho tiempo a pensar en formas de mejorarlo y actualizarlo. Hoy en día, ofrecer el mejor servicio digital ya no es opcional sino esencial.

Google Optimize es una herramienta que te ayudará a actualizar y mejorar tu interfaz y experiencia de usuario. Te permite medir el impacto de los cambios que implementas en tu sitio para determinar cuáles funcionan mejor.

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

Requerimientos

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

• Google Analytics
• Google Optimize
• Administrador de etiquetas de Google
• Flujo web

De lo contrario, también necesitarás tener integradas las siguientes herramientas:

• Google Analytics con Google Tag Manager

Paso 01: Copia tu ID de contenedor en Google Optimize

Cuando entres en tu panel de control de Google Optimize, después de crear tu cuenta y tu contenedor, necesitarás saber el ID de tu contenedor.

Sigue estos pasos para encontrar el ID de tu contenedor

• En tu panel de control de Google Optimize, verás un recuadro con tu contenedor, haz clic en él.
• Una vez dentro de tu contenedor, haz clic en la configuración. Encontrarás el botón de configuración en la esquina superior derecha.
• Una vez dentro de tu configuración, podrás ver los detalles de tu contenedor. Verás el nombre de tu contenedor y su ID. Este identificador es un código de números y letras.
• Selecciona el ID y cópialo.

Paso 02: crea un nuevo Etiqueta en Google Tag Manager

Una vez en tu cuenta de Google Tag Manager, verás el menú en la parte derecha de la página. A través de este menú podrás acceder a diferentes configuraciones y gestión de Etiquetas, Disparadores, Variables, Carpetas y Plantillas.

Sigue estos pasos para crear una etiqueta nueva

• Haga clic en el Etiquetas opción en el menú.
• Una vez dentro Etiquetas haga clic en Nuevo.
• Haga clic en Configuración de etiquetas
• En el menú que se muestra, elige el Google Optimize opción.
• Ahora puedes cambiar el nombre de la etiqueta en el cuadro que verás en la parte superior izquierda de la página. Puedes llamarlo Google Optimize.
• Verás un cuadro para pegar tu ID de Google Optimize. Pégalo.
• Debajo del recuadro ID verás otro recuadro para seleccionar la variable apropiada. Selecciona la variable de Google Analytics que ya creaste. Si aún no ha creado su variable de Google Analytics, consulta este otro artículo.
• Haz clic en el botón de guardar.

Paso 03: selecciona Google Optimize Etiqueta antes de Google Analytics

Desde tu cuenta de Google Tag Manager, tendrás que configurar las etiquetas para que la etiqueta de Google Optimize se active antes que la de Google Analytics.

Siga estos pasos para cambiar la secuencia de preferencias de etiquetas

• En tu cuenta de Google Tag Manager, selecciona Etiquetas opciones en el menú de la izquierda.
• Haga clic en su Google Analytics Etiqueta y, a continuación, haga clic en Configuración avanzada.
• En Secuenciación de etiquetas, haga clic en «Disparar una etiqueta antes de Google Analytics Universal Analytics [o el nombre que le diste] incendios« caja
• Una vez seleccionada la opción anterior, puede elegir la Etiqueta que se activará antes de Google Analytics Universal Analytics [o el nombre que le diste]. Selecciona Google Optimize.
• Haga clic en Guardar botón.

Paso 04: Publica tu contenedor de Tag Manager para activar los cambios

Desde el panel de control de Google Tag Manager, haz clic en enviar botón*.* Encontrará este botón en la esquina superior derecha de la página.

Sigue estos pasos para publicar tu contenedor

• En la página que se muestra, verá que, después de hacer clic en enviar Con este botón podrás editar el nombre y la descripción de tu versión.
• Haz clic en el botón de publicación.

🚨 Corrige el parpadeo de la página

Al implementar Google Optimize, es probable que la página parpadee. Para solucionar este problema, puedes ocultar temporalmente la página. De esta forma, Google Optimize tendrá tiempo suficiente para cargar el contenedor.

Sigue estos pasos para ocultar la página, que incluyen fragmento antiparpadeo en el código de la página.

• Copia el siguiente código en todas las páginas en las que hayas incluido Optimize lo más alto posible en la <head>etiqueta. El código antiparpadeo (si ha instalado DataLayer) debe incluirse después del código DataLayer</head>.

• También querrás colocar el código global del sitio y el código del administrador de etiquetas justo después del fragmento antiparpadeo.

¡Gracias!

‍