Google Tag Manager en 5 pasos

Google Tag Manager explicado en 5 pasos

Si ya tienes instalado Google Analytics y te parece un rollo hacer seguimiento de eventos, Google Tag Manager es el complemento perfecto, se basa en etiquetas y aquí te muestro cómo se instala en tu sitio web.

Artículo actualizado a Google Tag Manager v3.

Google Tag Manager está siendo cada vez más demandado y no me extraña, es un software gratuito de Google y la verdad es que tiene un potencial impresionante.

Por eso he decidido actualizar este artículo. En la siguiente gráfica de Tendencias de Google puedes ver el interés de GTM en los últimos 5 años:

Interés de GTM a lo largo del tiempo

Pues empecemos…

Has creado tu web y ya tienes instalado el Código de Google Analytics.

Y lo utilizas para saber cuántas visitas tienes al mes o qué páginas tienen mayor interés.

Pero también quieres saber cuántos usuarios han hecho clic en el botón “enviar” del formulario de contacto en el último mes, o quieres saber cómo modificar la tasa de rebote para no tener unos valores tan imprecisos.

Persona no sabe de Google tag manager

#1 En el primer caso tendrás que crear un evento en Google Analytics y modificar el código del sitio web para implementarlo.

Si sabes crear eventos con Google Analytics y te manejas con el html o php de tu sitio web, lo puedes hacer tú.

#2 En el segundo caso tendrás que crear un línea de Javascript y pegarla dentro del código de Google Analytics. Si no eres programador lo tienes un poco más complicado.

#3 Otra opción es instalar un plugin de eventos de Google Analytics si tienes WordPress y con él puedes hacer seguimiento de botones-enlaces y scroll de manera supersencilla en la versión gratuita.

Usar Google Tag Manager

Ahora bien, la cuarta opción es usar Google Tag Manager.

Porque no hace falta ni que modifiques el código de tu sitio web ni que seas programador de javascript.

Ventajas de usar Google Tag Manager

Estas son algunas de sus ventajas:

  • Todos los cambios se hacen en Google Tag Manager y no en la página web.
  • Eres independiente de un programador para personalizar el código de Google Analytics.
  • Tu página cargará más rápido al no usar líneas de código nuevas cada vez que creas un evento.
  • Al tenerlo todo en una herramienta es más preciso medir eventos.
  • Es muy útil para aplicaciones móviles porque puedes cambiar etiquetas sin tener que publicar la aplicación en Google Play si es Android o iTunes si es IOS.

1. ¿Cómo funciona?

Yo lo llamaría insertador de javascript, más que administrador de etiquetas, pero reconozco que mi nombre es más feo.

Google tag manager se basa en etiquetas.

Una etiqueta es un código Javascript que envía información desde tu sitio web a otras herramientas, como por ejemplo, Google Analytics, DoubleClick, Google Optimize

Su estructura consta de tres partes:

  1. Una es tu cuenta,
  2. otra el contenedor y
  3. por último la etiqueta.

Cada cuenta puede tener varios contenedores. Y cada contenedor puede tener varias etiquetas.

Estructura de Google tag manager

2. ¿Cómo se instala?

Primero has de crearte una cuenta en Google Tag Manager.

Vas a Cuentas > Crear cuenta

A esta cuenta le puedes asignar 4 tipos de contenedores: página web, android, ios y amp.

Cuatro tipos de contenedores en GTM

Esto último que consiste en acelerar tu página web para dispositivos móviles eliminando todo el javascript y haciendo la carga superrápida. Muchas páginas web y varios periódicos importantes ya lo usan

La configuras para página web, aceptas la condiciones del servicio y te sale una pantalla con dos códigos:

Códigos Google Tag Manager

El último código es para cuando no está disponible javascript en el navegador.

3. ¿Dónde colocar el código de Google Tag Manager?

Independientemente del tipo de página web que tengas, html, WordPress, Joomla, Prestashop, etc, el primer código de GTM lo debes colocar justo después de la etiquetatan arriba como puedas ya que así las etiquetas se activarán antes de que se cargue toda la página.

Si es un WordPress, lo puedes hacer de las siguientes formas:

1.- Manualmente, pegando el primer código de GTM dentro del archivo header.php.

Concretamente justo debajo de la siguiente línea de código:
linea header

Y el segundo código, el que empieza por <noscript> justo después de la etiqueta <body>

2.- Otra opción es buscar en la apariencia de tu tema, algo que haga referencia a escribir los scripts en el theme:

Este ejemplo es de GeneratePress:

Instalación de Google Tag manager en WordPress


3.-
Si tu sitio de WordPress lo has hecho con Genesis Framework, copias el siguiente código:

add_action(‘genesis_before’, ‘google_tag_manager’);
function google_tag_manager() { ?>
<!– Google Tag Manager –>
Aquí copias tu código de GTM
<!– End Google Tag Manager –>
<?php
}

Y lo pegas en el fichero functions.php de tu tema hijo de Genesis.

4.- Y por último, con el plugin DuracellTomi’s Google Tag Manager for WordPress, no lo he probado a fondo y yo prefiero no mejor no usar plugins para instalar Google Tag Manager, pero lo dejo por si acaso te interesa.

Otros plugins que he probado no me han convencido por una sencilla razón: copian el código de GTM al final de la página y no justo después de la etiqueta <head> como es lo recomendable.

4. ¿Cómo crear la etiqueta de seguimiento de Google Analytics?

La interfaz de GTM está cambiando constantemente, así que lo en la versión 1 de gtm se llamaba Reglas y Macros luego se llamó Activadores y Variables, respectivamente. En la versión 3 se sigue manteniendo esta nomenclatura.

En este artículo voy a explicar cómo crear una etiqueta de Google Analytics que dé los datos de las páginas vistas del sitio web.

Así que al contenedor que acabamos de crear (por ejemplo, tu página web) le vamos a asignar una etiqueta.

Vamos a Administrador>Etiquetas y la configuramos:

1.- Damos un título a la etiqueta, por ejemplo “Seguimiento Google Analytics”.
Título de etiqueta de Google Tag Manager

2.- Seleccionamos el tipo de producto, como ves hay varios, pero para este ejemplo escogemos Universal Analytics de Google Analytics.
Tipo de etiqueta en GTM

 

3.- El tipo de etiqueta que elegiremos es Universal Analytics (UA) que es la evolución del anterior código de seguimiento que se llama Classic Analytics. Da la opción de elegirlo porque, allá por el 2013 todavía no existía la última versión y te da la opción de instalar Google Tag Manager con la código de seguimiento antiguo.
4.- Escribes tu ID de seguimiento de Google Analytics.

Si no sabes dónde está, entras en tu cuenta de Google Analytics y lo verás en Administrador>Propiedad>Información de seguimiento>Código de seguimiento…

… y pegas el ID de seguimiento:
Configurar etiqueta

 

 

Cada etiqueta tiene un tipo de seguimiento.

En concreto, para Google Analytics el tipo de seguimiento que haremos será por Página vista (pageview), es decir que dé los datos de las páginas vistas en el sitio web.

5.- Y por último, activamos esta etiqueta en todas las páginas del sitio web:
Activar en todas las páginas

Y listo.

Ya tienes configurado Google Tag Manager con la etiqueta de Google Analytics.

Recuerda eliminar de tu sitio web el anterior código de Google Analytics y así evitas que envíe datos por duplicado.

Ahora sólo queda publicar (botón superior derecha de la interfaz) y Google Tag Manager quedará implementado.
Botón publicar en GTM

5. ¿Cómo sé que lo he instalado correctamente?

De estas tres maneras:

    • 1.- Con el depurador (Debug) de Google Tag Manager.
    • 2.- Con el navegador Chrome, instalando el complemento Tag assistant.
    • 3.- A través de Google Analytics.

Tú eliges.

1. Con el depurador de Google Tag Manager.

En la interfaz de tu cuenta de GTM, verás un botón rojo con una flecha, que ofrece las opciones de publicar, depurar (vista previa) y guardar borrador.

Antes de publicar escribes la url de tu página web en una pestaña nueva de tu navegador y en la interfaz de Google Tag Manager haces clic en el botón “vista previa”.

Publicar con gtm

Ahora a tu página le aparecerá una ventana con el depurador de GTM y si está correctamente implementado te aparecerá una ventana similar a esta:

Que informa de que la etiqueta que hemos configurado con el nombre de “Seguimiento Google Analytics” está activa en esta página (tags fired on this page):

Etiqueta activada en GTM

Si quieres quitar esta ventana del depurador, es decir, salir del modo de vista previa de GTM, sólo tienes que ir a la interfaz de Google Tag Manager y hacer clic en “Salir del modo de vista previa“.

Salir de vista previa en GTM

2. Con el complemento (add-on) Tag assistant de Chrome.

Abres el navegador Chrome e instalas el complemento Tag Assitant.

Una vez instalado, en la barra de herramientas verás un icono como este:

tag assistant icon

Escribes en la barra de direcciones tu página web, haces clic en el icono azul de tag manager y lo activas:

Activar tag manager

Si está correctamente implementado Google Tag manager con la etiqueta de Google Analytics, verás dos iconos de color verde:

tag manager correcto

3. A través de Google Analytics.

Esta es la forma menos fiable de comprobar que GTM está bien implementado, a no ser que visites tu cuenta de Google Analytics en un horario en que nadie te visita o tengas pocas visitas.

Abre un navegador, escribe la url de tu página web y en tu cuenta de Google Analytics observa en tiempo real, si eres el usuario activo.

Comprobar GTM en Google Analytics

Espero que no eches en falta nada en este artículo, si es así o quieres saber algo más de cómo implementar el código de Google Tag Manager, no dudes en comentármelo.
Nos vemos en los comentarios 🙂

Artículo escrito el día 11-Ene-2016, actualizado el 29-Nov-2016

1 Star2 Stars3 Stars4 Stars5 Stars (4 votes, average: 5,00 out of 5)
Cargando…

2 comentarios en “Google Tag Manager explicado en 5 pasos

  1. Hola Alberto,
    Me ha encantado tu post. Estoy tratando de averiguar cómo funciona Google Tag Manager pero no me acaba de quedar del todo claro. Al menos tu entrada es de las poquitas que me ha servido para aprender más cosas que vincular tag y analytics
    Gracias.

    • Hola Raquel,
      muchas gracias por tus palabras, desde luego Google Tag Manager para los que no somos programadores nos facilita mucho la labor de hacer seguimiento de eventos. Con Google Analytics se puede hacer claro que sí, pero es fácil cometer más errores. Pero le he encontrado un pequeño "pero", y es que en las páginas que está implementado no permite hacer test A/B, supongo que será un mal menor y en la próxima actualización esto quedará subsanado. Si le encuentras otro "pero" coméntamelo, yo estoy todo el día aprendiendo de Google Analytics y GTM, ambas no sé si tienen límites… supongo que sí. Gracias de nuevo.
      Saludos!!

Deja un comentario