Cómo utilizar contenedores GTM personalizados con Growform
Google Tag Manager (GTM) es un «gestor de etiquetas» extremadamente potente, que te permite añadir fácilmente etiquetas estándar y personalizadas a tu sitio web o formulario.
Para darte algunos ejemplos de lo que se puede hacer con los contenedores personalizados de GTM, puedes:
- Disparar un evento de píxel cuando los usuarios lleguen a un determinado paso o completen el formulario.
- Activar una conversión de anuncios de Google cuando los usuarios hagan clic en un botón determinado
- Utiliza un grabador de pantalla como Fullstory para ver cómo se comportan tus usuarios dentro de tu formulario
- Cualquier otra cosa que se le ocurra.
Table of Contents
🎉 This guide is available in video form!
Este vídeo de 13 minutos te guía a través de cada pequeño paso que necesitas para configurar tus contenedores de Google Tag Manager con Growform:
Una vez que hayas terminado el vídeo, dirígete al parte inferior de este post para ver qué puedes hacer a continuación.
Un rápido repaso a los principales conceptos de GTM
Antes de empezar, aquí tienes un rápido repaso de los principales conceptos de GTM:
- Un contenedor es un «área» o repositorio distinto que contiene etiquetas, activadores y variables. Los contenedores están versionados, y GTM tiene un práctico sistema de control de versiones que te permite «rebobinar» si metes la pata.
- Una etiqueta es un fragmento de código que debe dispararse cuando ocurre algo. GTM tiene una biblioteca de etiquetas estándar que puedes utilizar (como Google Ads), pero también puedes añadir tus propias etiquetas HTML personalizadas. Utilizar etiquetas estándar suele ser aconsejable, ya que introduce menos complejidad y margen de error.
- Un activador es el «cuándo» debe dispararse una etiqueta. Los casos de uso comunes son «Todas las visualizaciones de la página», o cuando se pulsa un determinado botón. Cuando se cumple una condición concreta (o un conjunto de condiciones), se activa el activador y se disparan todas las etiquetas bajo ese activador.
- Una variable es una pequeña pieza de almacenamiento dentro de GTM que facilita el uso y la reutilización de datos. Por ejemplo, almacenamos el ID del formulario dentro de una variable GTM para que sea fácil de reutilizar e insertar en tus propias etiquetas.
Growform utiliza en realidad dos contenedores en lugar de uno, lo que se explica en la siguiente sección…
Lee esto primero: Los problemas ridículamente complicados causados por los iFrames, y por qué Growform utiliza dos contenedores
Como muchos fragmentos de código incrustados, Growform se ejecuta dentro de un iFrame para asegurarse de que no interfiere con tu sitio web (y viceversa).
Esta bella ilustración lo capta muy bien:
Un iFrame es como su propia ventana del navegador.
El iFrame no puede ver nada en tu sitio web, y tu sitio web no puede ver nada dentro del iFrame.
En realidad, son dos sitios web distintos.
Esto plantea serios problemas para el seguimiento, especialmente porque la mayoría de los socios publicitarios no funcionan dentro de un iFrame.
Para superar este reto, hemos consultado a algunos expertos en GTM muy avanzados y hemos creado dos contenedores GTM, que hemos preparado para que los descargues e importes a tu propia cuenta GTM:
- Un contenedor hijo. El trabajo del contenedor hijo es hacer un seguimiento de lo que ocurre dentro de tu formulario y enviarlo al contenedor padre. También puede ser un lugar útil para disparar etiquetas que necesiten «ver» dentro del iFrame, como las aplicaciones de grabación de pantalla.
- Un contenedor padre que recibe eventos del contenedor hijo y dispara realmente las etiquetas.
Así, podemos añadir un contenedor hijo y un contenedor padre a nuestro diagrama de la siguiente forma, con una flecha que representa la comunicación entre los dos contenedores:
Recapitulando:
- Los formularios Growform se ejecutan dentro de un iFrame. Intentar insertar etiquetas en iFrames y conseguir que funcionen está condenado al fracaso.
- Para evitar este problema, hemos creado para ti un contenedor padre y un contenedor hijo.
- El contenedor hijo capta lo que ocurre dentro del iFrame y envía información al contenedor padre.
- El contenedor padre recibe la información del contenedor hijo y dispara la etiqueta real… y la etiqueta funciona de verdad.
- Hemos creado estos contenedores y los hemos puesto a tu disposición para que los descargues y te sirvan de «punto de partida» para tus aventuras de etiquetado.
Parece complicado, pero te guiaremos a través de un par de ejemplos para que puedas disparar etiquetas en un santiamén.
A continuación te explicamos cómo configurarlo…
1 – Crea o inicia sesión en tu cuenta de Google Tag Manager
En primer lugar, navega hasta Google Tag Manager y crea una nueva cuenta si aún no tienes una.
Puede que también tengas que crear una cuenta dentro de Google Tag Manager una vez que estés configurado – en ese momento debes hacer clic en el menú de los «tres puntos» de tu cuenta y pulsar «Crear contenedor».
Ahora deberías crear dos contenedores – Un contenedor padre y un contenedor hijo, y ambos deberían estar configurados en «Web» como contenedor de destino:
2 – Descarga nuestros contenedores de inicio para padres e hijos
You can download our parent and child «starter» containers here:
💾 Growform parent container
💾 Growform child container
No elimines ni cambies ninguna etiqueta, variable o activador que venga con los contenedores de inicio (a menos que sepas realmente lo que haces): tus contenedores dependen de ellos para funcionar correctamente.
3 – Importa nuestros contenedores padre e hijo a tu cuenta GTM
Ahora que ya tienes nuestros contenedores descargados, es hora de importarlos a los nuevos contenedores en blanco que creaste en el paso 1.
Abre tu contenedor padre y navega hasta «Admin», luego pulsa «Importar contenedor». Verás una pantalla como ésta:
Selecciona el growform-parent-container.json (descargado en el paso 2), y elige «espacio de trabajo existente», y luego «espacio de trabajo predeterminado». Puedes utilizar la opción de sobrescribir, ya que tu contenedor estaba vacío de todos modos.
Ahora debes repetir este proceso para el contenedor hijo, de modo que tengas tanto un contenedor hijo como un contenedor padre en tu cuenta, poblados con las etiquetas y variables que configuramos para ti.
4 – Publica tus contenedores y añádelos a tu formulario Growform
Pulsa «Enviar» en tus dos contenedores para que se publiquen:
Ahora tus contenedores están publicados, están en estado de funcionamiento y listos para ser añadidos a tu formulario Growform.
Ve a tu formulario en Growform, pulsa «Configuración del formulario» y luego «Seguimiento y etiquetado». Busca la casilla de Google Tag Manager y copia los ID de tus contenedores padre e hijo en cada uno de ellos. No olvides pulsar «Guardar».
En este punto, tienes una copia exacta de los contenedores «por defecto» que utilizamos bajo el capó para disparar las otras etiquetas (como Facebook y Google Ads).
Esto significa que cualquier otra configuración que tengas en la página de configuración de seguimiento y etiquetado seguirá funcionando, pero será disparada por tu contenedor personalizado, en lugar de por el nuestro. Genial, ¿eh?
Por la misma razón, también significa que la funcionalidad de disparo de este formulario depende de que tus contenedores GTM permanezcan intactos, así que ten cuidado con los contenedores y no elimines nada que ya esté ahí.
¿Y ahora qué?
Ahora que ya has realizado la configuración básica, estás listo para empezar a disparar algunas etiquetas.
Lee nuestras guías a continuación para empezar con algunos casos de uso de la vida real:
Cómo disparar una etiqueta cuando un usuario cambia de paso o completa el formulario
Cómo disparar una etiqueta cuando un usuario pulsa un botón determinado
Cómo activar una etiqueta de grabación de pantalla o similar
Preguntas más frecuentes
Due to the way React works, it can be difficult to use class selectors (.classnames) to target particular elements, so we recommend following this guide if you wish to target a button.
If you want to target some other element, you can always contact support and we’ll be able to target pretty much anything.
Tags should almost always be fired in the parent container: the child container’s job is simply to “tell” the parent container about what’s happening inside Growform’s iFrame, so tags can be fired outside it, in the parent.
For a basic guide to firing your first tag, see here.
Eugh, we know. It’s just part and parcel of working with iFrames.
In theory, you could create your own child container from scratch and add it to your Growform settings.
But this would be next to useless, as tags would only fire inside the iFrame.
By using our “starter” containers, you get access to a bunch of functions and tags that will let you do everything you need to do.
Once you add the our starter containers, Growform will pass the details from your tracking & tagging settings page into your new containers, and everything will function as normal – as long as you keep the containers intact, which are now doing the heavy lifting!
There are 2 approaches when working with multiple forms:
a.) Use the same containers for all forms: This is a perfectly viable option. The form ID and other information is available inside GTM, so you can build logic about what to fire when inside Google Tag Manager. This works particularly well if your forms have similar purposes.
b.) Use different containers for different forms: If you’re managing multiple clients, you can always create a new account for each client. This keeps their tags completely separate and is better for to avoid cross-contamination of tags.
¿Necesitas ayuda con contenedores GTM personalizados? Nuestro equipo tiene experiencia en seguimiento y etiquetado avanzados y puede ayudarte a través del chat en línea de tu cuenta.