Google Tag Manager tutorial : cómo usarlo para mejorar la analítica de tu web (sin tocar una línea de código)

¿Recuerdas el día en que quisiste conectar Google Analytics a la web de tu tienda online? Con este Google Tag Manager tutorial hoy podras conectarlo.
Seguramente pensaste que sería un proceso sencillo… hasta que te encontraste con una etiqueta de código larguísima y algo sobre el “head” de tu plantilla que, salvo que tuvieras algunas nociones de diseño web, no te sonaría de nada.

Así que es probable que acabases llamando a un diseñador externo, que tardó en hacer la configuración el mismo tiempo que en tomarse un café (pero te cobró la hora completa de trabajo).

Y para añadir el código de Google Ads, igual.
Y para el píxel de Facebook o el de Snapchat lo mismo.
Y así sucesivamente.

Por eso…
¿No sería mucho mejor que cada vez que quisieras conectar una nueva herramienta de analítica web a tu e-commerce pudieras hacerlo tú mismo sin depender de nadie?

Pues eso es posible si utilizas Google Tag Manager, el administrador de etiquetas de Google.
Y en este post te vamos a explicar qué es y cómo utilizarlo paso a paso con un tutorial tag manager muy completo.

Así dejas de pagarle los cafés al diseñador. 😉

👉 Qué es Google Tag Manager y cómo funciona

Para que lo entiendas mejor, vamos a suponer que tu web es un edificio, y para acceder a él, cada herramienta utiliza su propia puerta (su etiqueta o código de seguimiento).

Así que, cada vez que quieres conectar otra nueva, tienes que crear una puerta exclusivamente para ella (es decir, volver a meterte en el código fuente de la web y editarlo).

Pero lo que te permite Google Tag Manager (GTM) es crear una “puerta universal” por la que pueden entrar todas las herramientas.
O dicho de otro modo:

Google Tag Manager genera un fragmento de código único, llamado “contenedor”, para conectar cualquier herramienta externa sin modificar el código fuente de la web.
Así, cuando quieras usar un píxel para SEM, un mapa de calor o lo que sea, podrás hacerlo tú mismo desde la interfaz de GTM.
Mucho más cómodo (y barato). 😉

✅ Términos básicos de Google Tag Manager que debes conocer

Si no tienes demasiados conocimientos sobre diseño web, ahora mismo es posible que te sientas un poco perdido.

Pero no te preocupes.

Para que este tutorial tag manager te sea lo más útil posible, antes de nada vamos a ver algunos términos con los que es importante que te familiarices:

• Contenedor: el fragmento de código que genera Google Tag Manager, y el único que tendrás que insertar en tu web. Es ese “código-puerta” del que hablábamos.
• Etiqueta: las etiquetas son los identificadores que utilizan otras herramientas para conectarse con tu página. Google Analytics tiene su propia etiqueta, Google Ads tiene otra, el píxel de Facebook tiene la suya… Es como su “DNI” para entrar por la puerta.
• Variable: las variables son las “instrucciones” de lo que debe hacer una etiqueta, como “recoger datos de las cookies de usuarios”. Esto te lo explicaremos más en detalle en este mismo post.
• Activador: indica cuándo se pone en marcha la acción de una etiqueta. Por ejemplo, la etiqueta empezará a recoger datos de las cookies de los usuarios “cuando la página se haya cargado por completo”.

Una vez aclarados estos términos, vamos a ver cómo puedes utilizar Google Tag Manager en tu web.

👉 Google Tag Manager tutorial: Cómo instalar y utilizar Google Tag Manager

La primera parte del proceso es la única difícil, donde sí tendrás que modificar algo de código.

Después, todo lo demás será muy sencillo. 😉

✅ 1. Instalar Google Tag Manager en WordPress

Para simplificar las cosas, vamos a explicarte cómo instalar GTM en WordPress.

Pero no te preocupes, porque si en lugar de eso utilizas PrestaShop, Magento o Shopify (o cualquier otro CMS de código abierto), el proceso será básicamente el mismo.

➡️ A. Crear una cuenta

Al igual que con la mayoría de herramientas de Google, para utilizar esta debes hacerte una cuenta de usuario.

Para eso tienes que irte a la web de Google Tag Manager y rellenar los siguientes datos:

1. Datos de la cuenta: el nombre que quieras darle y el país.

2. Contenedor: aquí te pide que crees tu primer contenedor.

Simplemente tienes que indicar un nombre (para poder identificarlo luego) y marcar el uso que vas a darle (por lo general, “Sitio web”).

Una vez le des a “Crear” y aceptes los términos y condiciones, accederás a la interfaz de Google Tag Manager.

➡️ B. Instalación

Lo primero que verás al entrar será un pop up como este con dos códigos:

Estos serán los únicos fragmentos de código que deberás introducir en tu web, y que actuarán como contenedor para las etiquetas del resto de herramientas.

En general, hay dos maneras de hacerlo:

1. Con el editor de WordPress: esto significa entrar en el archivo con el código fuente de WordPress e introducir directamente los fragmentos de código. No te lo recomendamos salvo que sepas muy bien cómo hacerlo (porque podrías borrar algo importante).
2. Con un plugin: la opción más fácil es utilizar un plugin que introduzca estos códigos por ti. Hay muchísimos que te ofrecen esta función, pero puedes usar el propio plugin de Google Tag Manager.

Si no lo tienes claro, lo mejor es que se lo pidas directamente al diseñador (esta será la única vez que tengas que hacerlo). 😉

Una vez hayas instalado el código, en la interfaz de GTM pulsa el botón «Enviar» que te aparece arriba a la derecha.

Te mostrará una ventana en la que tendrás que poner el nombre de esta versión. Cada vez que hagas una modificación en el contenedor (como conectar una herramienta, por ejemplo) el sistema creará una versión nueva de ese contenedor.

Por último, pulsa en «Publicar» para activarlo.

✅ 2. Instalar un código de seguimiento

Ahora sí, vamos a ver cómo conectar esas herramientas de analítica web de forma fácil y rápida con Google Tag Manager.

Algunas, como Google Analytics, ya cuentan con una configuración predefinida, mientras que en otras tendrás que hacerlo manualmente.

Vamos a ver un ejemplo de ambas.

➡️ A. Google Analytics

Primero veamos el proceso para instalar Google Analytics.

Dentro de la interfaz de Google Tag Manager, pulsa en “Nueva etiqueta”. Te aparecerá una ventana en la que deberás seguir estos pasos:

• En primer lugar, asígnale un nombre a la etiqueta (para poder identificarla si la quieres editar más adelante).
• Al pulsar en “Configuración de la etiqueta”, te saldrá una inmensa lista de opciones. Escoge “Google Analytics”.
• En el tipo de seguimiento selecciona “Página vista” (suele venir así por defecto).

Ahora sal un momento de Google Tag Manager y entra en Google Analytics.

Ve a Administrar > Configuración de la propiedad y copia el número que te aparece bajo el epígrafe “ID de seguimiento”.

Vuelve de nuevo a la pestaña de Google Tag Manager, pincha en “Seleccionar variables de la configuración” y en “Nueva variable”.

En “ID de seguimiento” pegas el código que has copiado de Google Analytics. El “Dominio de la cookie” lo dejas en auto.

Ahora vamos a establecer que las cookies se registren de forma anónima para respetar la ley RGPD. Para ello, dentro de esa misma ventana, pulsa “Campos que configurar” y añade los siguientes campos:

Una vez hecho, pulsa “Guardar”.

Lo siguiente es entrar en “Activación” para determinar cuándo se disparará la variable de la etiqueta.

Por defecto, la etiqueta estará configurada para activarse en todas las páginas de tu web cuando se cargue la ventana.

Pero pulsando en “Nuevo activador” (el “+” azul arriba a la derecha) puedes añadir un filtro para que solo se active en determinadas páginas (por ejemplo, si quieres medir solo el tráfico de una landing page).

Lo que nosotros te recomendamos es que escojas la opción por defecto. Una vez le des a guardar, ya tendrás tu etiqueta de Google Analytics en funcionamiento.

Ahora vamos a ver cómo instalar la etiqueta de seguimiento de una opción fuera de la lista.

➡️ B. Píxel de Facebook

Para este ejemplo vamos a utilizar el Píxel de Facebook Ads, pero el proceso es el mismo para cualquier otra etiqueta que quieras añadir.

Primero haz clic en “Nueva etiqueta”, pero dentro de las opciones de configuración escoge “HTML personalizado”.

En el recuadro que te aparece tienes que añadir el fragmento de código de tu Píxel (lo encontrarás en el Ads Manager de tu cuenta publicitaria).

A continuación, pincha en la opción “Configuración avanzada” que te aparece bajo el recuadro. Dentro de “Opciones de activación de la etiqueta”, selecciona “Una vez por página”. El resto lo puedes dejar igual.

En “Activación”, de nuevo puedes elegir que el Píxel se active en todas las páginas de tu web o solo en algunas concretas.

Cuando le des a guardar, tu Píxel estará listo para registrar las visitas de tus usuarios y hacer campañas de retargeting.

👉 Ya sabes usar Google Tag Manager, pero… ¿por qué quedarte solo con herramientas externas?

Hay un aspecto de la analítica de su web que muchos de nuestros clientes no suelen tener en cuenta.

En muchas ocasiones, los datos más interesantes para hacer crecer tu e-commerce los puedes encontrar dentro de tu propia web.

Por ejemplo, como las estadísticas de búsquedas que te ofrece un buscador inteligente como Doofinder.

¿Quieres saber más?

Entonces puedes descargarte nustro e-book en el que te explicamos cómo puedes aumentar un 20% tus ventas con un buscador inteligente.

Y si lo que quieres es probar Doofinder por ti mismo, puedes hacerlo gratis durante 30 días entrando aquí.

¡Ah! Y se instala como un plugin. Así que no te preocupes por tener que tocar el código fuente. 😉