Tutorial Google Tag Manager: cĂłmo usarlo para mejorar la analĂ­tica de tu web (sin tocar una lĂ­nea de cĂłdigo)

tutorial-google-tag-manager

ÂżRecuerdas el dĂ­a en que quisiste conectar Google Analytics a la web de tu tienda online?

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 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 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.

👉 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.

Google Tag Manager cuenta

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”).

Google Tag Manager contenedor

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:

Google Tag Manager codigo

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.

google tag manager enviar contenedor

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”.

Google Tag Manager id 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:

Google Tag Manager anonamyze ip

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).

google tag manager activacion

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 este 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. ;)