Google Tag Manager

Guía básica Google Tag Manager: Explicación Paso a Paso + Imágenes

No te compliques la vida y empieza a usar Google Tag Manager. Siguiendo todos los pasos de este post, en poco tiempo estarás usando técnicas y herramientas de medición web como lo hacen los profesionales del marketing digital.

En esta guía voy a enseñarte cómo instalar Google Tag Manager en tu web y a vincularlo con Google Analytics, ambas herramientas 100% gratuitas.

Por otro lado, también aprenderás a crear eventos en Tag Manager para medir casi cualquier acción que los usuarios realicen dentro de tu web.

 ¿Qué es Tag manager?

Google Tag Manager es el administrador de etiquetas de Google, con el que podremos crear y actualizar las etiquetas de nuestro sitio web de forma rápida y sencilla desde un mismo lugar.

Una etiqueta puede servir, por ejemplo, para que una determinada herramienta trabaje dentro de nuestra web o para crear eventos que midan el comportamiento o interacción de los usuarios con algún elemento concreto.

Antes de Tag Manager, para implementar en nuestra web herramientas, como por ejemplo Google Analytics, teníamos que editar el código cada vez que queríamos implementar alguna, algo peligroso si no se poseen los conocimientos necesarios.

Usando la herramienta de Google, el proceso se simplifica y sólo tendremos que tocar el código de nuestra web una sola vez, algo que con mi ayuda te va a resultar sencillo y seguro.

Además de integrar Google Analytics en nuestro sitio web, que debe ser la primera herramienta que debemos instalar para recoger y analizar datos de comportamiento de usuarios, podemos usar multitud de etiquetas de forma fácil, rápida y segura, como por ejemplo Google Adwords, Hotjar, hacer remarketing, etc…

Las posibilidades de Tag Manager son enormes, podemos medir el porcentaje de scroll que hacen nuestros visitantes, si hacen clic en un botón concreto de nuestra web, el número de reproducciones de un vídeo y si los usuarios lo ven entero o no, en definitiva, podemos medir casi cualquier cosa que se nos ocurra.

Pero no vayamos tan rápido y empecemos por el principio, vamos a implementar Google Tag Manager en nuestra web para empezar a crear e insertar etiquetas de todas las herramientas que queramos.

 ¿Qué vamos a encontrar en la herramienta?

Los elementos que manejaremos se dividen en 3 niveles:

Etiquetas: Es una porción de código Javascript que manda información recogida en una web o app a herramientas externas a ésta, como por ejemplo Google Analytics.

Activadores: Son las condiciones que deben cumplirse durante la sesión de un usuario en una web para que salten las etiquetas y se empiecen a recoger datos.

Variables: Son elementos que pueden afectar a las etiquetas o a los activadores.

Implementar Google Tag Manager en mi web

Para empezar a usar Google Tag Manager, sólo tenemos que insertar una porción de código en el «header» de nuestra página.

El miedo a tocar el código de una web puede generar rechazo, e incluso terror, llevándonos a abandonar la idea de usar ciertas herramientas por no embarcarnos en semejante empresa.

No os asustéis si nunca habéis tocado código, es un proceso muy sencillo. Siguiendo estos pasos, estaréis midiendo con Tag Manager y Google Analytics en un periquete el comportamiento de los usuarios o clientes que visitan vuestra web o blog.

Vamos al lío y empecemos:

  • Antes de nada, tienes que estar logueado con tu cuenta de Google.
  • Una vez tengas la sesión abierta, ve a Google Tag Manager y crea una cuenta.

Crear una cuenta (contenedor) es algo sencillo. Haz clic en el botón crear cuenta.A este menú también se puede acceder desde tu espacio de trabajo haciendo clic en el logotipo de Tag Manager y después en » crear cuenta«,

o en la pestaña de «administrador» y seguidamente clicando en el signo «+».

  • Ya estamos en el menú para crear una cuenta. Ahora tenemos que configurarla rellenando los datos que nos vayan pidiendo y después aceptar los términos del servicio.

Una cuenta de Google Tag Manager puede tener varios contenedores, así que puedes dar un nombre más genérico a ésta y otro más específico al contenedor o contenedores que le vayas agregando.

  • Una vez creada la cuenta y aceptados los términos y condiciones, Tag Manager nos da los códigos que tendremos que insertar en nuestra web, no cierres esta pestaña porque te hará falta después.

 

Para que Google Tag Manager empiece a funcionar, hay que implementar estos fragmentos de código en el «php» de nuestra web.

Los que usáis WordPress ya no podréis modificar el código desde «apariencia / editor» , tendréis que hacerlo desde el «administrador de archivos» de vuestro hosting.

En caso de que vuestro hosting cuente con «Cpanel», encontraréis los archivos «php» en «administrador de archivos / public html / el nombre de tu web, en mi caso sería «sergiotena.com» / wp-content / themes / nombre del tema que uses» .

Aquellos que no uséis «Cpanel», tendréis que buscar este archivo dentro de vuestro hosting.

Una vez aquí, debemos buscar el archivo «header.php» y editarlo.

  • Editando el código «php»: Ahora que ya podemos editar nuestra etiqueta «header.php», vamos a copiar el primer fragmento de código que nos mostró Tag Manager cuando creamos la cuenta. Es recomendable pegarlo cuanto más cerca de la etiqueta de apertura «<head>» .

En realidad, se podría pegar a cualquier altura entre la etiqueta de apertura «<head>» y la de cierre «</head>», pero asegúrate que esté entre estas dos.

Bien, pues ahora sólo tenemos que ir al archivo «header.php» que tenemos abierto y pegar el código como dijimos.

Ahora vamos a colocar el segundo código que nos dio Tag Manager. En el mismo archivo «header.php», a continuación de la etiqueta de cierre </head>, buscamos la etiqueta «<body» y lo pegamos justo debajo de ésta.

 

Estupendo!!, ya tenemos creada nuestra cuenta de Google Tag Manager y la hemos implementado en nuestra web. Ahora vamos vincular Google Analytics con Tag Manager.

 Combinar Tag Manager con Google Analytics

Google Analytics es la herramienta gratuita de Google para medir el tráfico y actividad en nuestra web, así que implementarla es una de las primeras cosas que debemos hacer para empezar a recoger datos y métricas.

Vamos al escritorio o panel de control.

  • Lo primero que tenemos que hacer es clicar en «nueva etiqueta» y darle un nombre.

  • A continuación, clic en «configuración de la etiqueta» para seleccionar aquella que queremos empezar a utilizar en nuestra web.

Como veis hay muchas opciones, la mayoría muy interesantes.

Hoy vamos a instalar Google Analytics. En el caso de que te aparezcan dos versiones, selecciona «Google Analytics Universal» .

  • Ahora vamos a configurar la etiqueta creada. Como queremos recibir los datos generales de comportamiento de los visitantes en nuestra web, de momento en «tipo de seguimiento«, seleccionamos «página vista» .

En «configuración de Google de Analytics» , si es la primera vez que usas Tag Manager, no tendrás ninguna variable de configuración, así que selecciona «nueva variable» .

Para configurar esta nueva variable, necesitaremos la «ID de seguimiento» de Google Analtytics. Para obtenerla, debes ir a tu cuenta de Google Analytics / administrar (icono del engranaje esquina inferior derecha) / información de seguimiento / código de seguimiento.

Si aún no tienes cuenta, te dejo el enlace a un magnifico tutorial de Google Analytics para principiantes escrito por Javier Balcázar. 

Copiamos la «ID de seguimiento» en su casilla correspondiente, guardamos y damos también nombre a la variable, dejando en «auto» el desplegable «dominio de la cookie» .

 

Hecho esto, ya tendremos creada nuestra etiqueta y su variable. Lo que deberemos hacer ahora es crear el «activador» que pondrá en funcionamiento nuestra etiqueta.

  • Para crear el activador hacemos clic en el cuadro de activación y nos llevará al menú de todos los que tenemos creados. Si es la primera vez que utilizamos Tag Manager, sólo aparecerá el activador «all pages«, el cual elegiremos en este caso y guardamos hasta llegar al panel principal.

Este activador pondrá en funcionamiento la etiqueta de Google Analytics en todas las páginas de nuestra web. 

Aunque ya tenemos creada y configurada nuestra nueva etiqueta, hay un paso muy importante que no podemos olvidar para que empiece a funcionar. Debemos enviar los cambios, así que vamos a hacer clic en el botón «enviar» que vemos en nuestro espacio de trabajo.

IMPORTANTE!! Si ya tenías instalado el código de seguimiento de Google Analytics, debes eliminarlo para que no se dupliquen los datos al recibirlos por dos vías distintas.

 Creación de eventos en Google Tag Manager

Ya hemos creado nuestra cuenta y su correspondiente contenedor, así que ahora vamos a aprender cómo crear y configurar eventos en Google Tag Manager.

Vamos a ver cómo se hace esto configurando un tipo de evento super útil a la hora de conocer el comportamiento de los visitantes de nuestra web; la profundidad de scroll, es decir, cuan abajo de nuestros post o páginas leen nuestros visitantes.

Empecemos con la creación de una etiqueta de evento para medir la profundidad de scroll que hacen los usuarios en nuestra web.

Pasos que vamos a seguir:

Crear la etiqueta

1. Tipo de etiqueta: Desde el panel principal, vamos a crear una etiqueta (nueva etiqueta / nombrar etiqueta / configuración de etiqueta) y seleccionamos Google Analytics Universal, ya que queremos que nos envíe los resultados allí para poder medirlos y analizarlos.

2. Tipo de seguimiento: Queremos que sea un «evento», a diferencia de cuando implementamos Google Analytics que queríamos que midiera «páginas vistas».

3. Parámetros de seguimiento de eventos

3.1 Categoría: Nombramos la categoría, en este caso podemos poner «scroll».

3.2 Acción: Vamos a llamarla «Profundidad de scroll».

3.3 Etiqueta: Aquí ya tenemos que elegir una de las variables que le vamos a asignar a esta etiqueta de evento.

En este caso, para medir la profundidad del scroll, hacemos clic en en botón con forma de ficha del desplegable y seleccionamos «Scroll Depth Threshold«.

NOTA: Si es la primera vez que usamos Google Tag Manager, posiblemente no se nos presenten muchas opciones de variables, por lo que tendremos que activarlas.

Para ello, vamos al panel de inicio / clic en variables / configuración / y aquí podemos activarlas todas o aquellas que necesitemos, las más usuales serán las siguientes; el grupo de páginas, eventos (dentro del grupo de utilidades), y los grupos de clicks, formas, vídeos y scroll.

3.4 Valor: Lo dejamos en blanco, ya el objetivo de esta etiqueta no es la monetización.

3.5 Hit de interacción: Lo dejamos como viene por defecto, es decir en «falso».

3.6 Configuración de Google Analytics: Seleccionamos la variable de configuración que creamos en el paso anterior.

Ahora toca configurar el activador, Para ello hacemos clic en el cuadrante de «activación«.

1. Elegir activador: Aunque en la imagen a mí me aparezca «profundidad de scroll», es posible que vosotros sólo tengáis «all pages», ya que este ya lo usamos al crear la etiqueta de Google Analytics. Si lo tenéis lo seleccionáis y si no tendremos que crearlo.

2. Crear nuevo tipo de activador

2.1 Hacemos clic en el signo «+» situado en la esquina superior derecha y seleccionamos el activador.

2.2 Le ponemos el nombre que queramos, hacemos clic en «configurador del activador» y seleccionamos el tipo de activador que queramos crear, en este caso «profundidad de desplazamiento«.

2.3 Configurar la profundidad del scroll: Una vez hemos configurado el activador «profundidad de desplazamiento», vamos a decirle a Tag Manager los porcentajes que queremos medir, si el scroll es horizontal o vertical y si queremos que se active en todas las páginas o sólo en algunas.

2.4 Ahora sólo nos queda guardar todas las veces que sea necesario hasta que lleguemos al escritorio y, muy importante, enviar los cambios, no quiero ser pesado pero hasta que no enviéis los cambios y publiquéis la etiqueta no va a funcionar.

Enhorabuena!! Ya tienes insertado en tu web Google Tag Manager, lo has vinculado con Google Analytics y sabes cómo crear eventos.

Si te ha servido el contenido, la mejor manera que tienes de agradecérmelo es compartir en tus redes sociales o dejar un comentario

Suscríbete a mi blog y recibe los últimos tutoriales, post y guías.

 

 

Rate this post
Sergio Rodríguez Tena
info@sergiotena.com

Aficionado al cine, la lectura y las buenas historias, sobre todo de cine negro. Graduado en Publicidad y Relaciones Públicas | Máster en Gestión e Investigación de la Comunicación Empresarial | Cursando el Máster en Marketing Digital en Aula Cm.

No hay comentarios

Si quieres dejar un comentario, puedes hacerlo aquí debajo, gracias.

Share This