Introducción a Google Tag Manager

1.  ¿Qué es Google Tag Manager?

Google Tag Manager es el gestor de etiquetas gratuito de Google que nos permite gestionar todas las etiquetas de marketing de nuestro sitio web sin necesidad de editar el código fuente.

Para ello Google Tag Manager dispone de una serie de plantillas predeterminadas para insertar etiquetas como Google Analytics, Google AdWords, DoubleClick y además etiquetas HTML donde podemos insertar cualquier trozo de código que queramos

2. ¿Por qué usarlo para instalar Google Analytics?

El funcionamiento de Google Analytics se basa en la ejecución de un código JavaScript, el cual ha de insertarse dentro del <head> de la página web que se desea traquear.

Hasta ahora, solo podíamos acceder al código fuente e insertar ese código JavaScript. Si además queremos añadir un evento personalizado de Google Analytics, una página virtual o añadir la funcionalidad de comercio electrónico, de nuevo tendríamos que acceder al código y editarlo para aplicar los cambios.


Con Google Tag Manager, la inserción del código (en este caso del propio contenedor de Google Tag Manager) se produce tan sólo una vez en la página que se desea traquear justo después de la etiqueta de apertura <body>. Todos los futuros cambios se realizarán a través de la interfaz de Google Tag Manager.

 

3. ¿Qué es el dataLayer?

El dataLayer o “Capa de datos” en español, es un objeto de JavaScript que se añade a las páginas de nuestro sitio web, el cual contiene una serie de variables (a definir tal y como queramos) disponibles para ser usadas dentro de nuestro contenedor de GTM, siempre y cuando este se defina antes que nuestro contenedor de GTM.

 Ejemplo de dataLayer:

4. Estructura de Google Tag Manager

Cuenta: Asociada a tu cuenta de Gmail.

Contenedor: Un contenedor de Google Tag Manager se asociará la mayoría de las veces a una página web concreta. Este contenedor dispone de un código único, el cual es el que ha de insertarse en todas las páginas de tu sitio web. Aquí podrás gestionar de una forma muy fácil y sencilla todas las etiquetas que tienes dentro de tu página web.

Workspace: Esta característica se ha incorporado recientemente. Sirve para que varias personas o equipos puedan trabajar de forma simultánea en el mismo contenedor. Si vas a ser tú la única persona que tenga acceso, no te preocupes demasiado, normalmente utilizarás el “default”. Estate atento a próximas entradas donde explicaré más en detalle esta funcionalidad.

Tags o etiquetas: Normalmente las identificamos como ‘etiquetas de marketing’, son en realidad pequeños trozos de código HTML o JavaScript que envían información a terceros como Google Analytics o Google AdWords.

Google Tag Manager tiene una serie de plantillas predefinidas para este tipo de etiquetas pero además, aporta mucha flexibilidad ya que se puede insertar cualquier otra etiqueta que no disponga de una plantilla, gracias a las etiquetas HTML y etiquetas de imagen.


En la siguiente imagen podemos ver algunas de las etiquetas predefinidas (o plantillas) destacadas disponibles dentro de Google Tag Manager. Existen muchas más que iremos viendo en detalle en futuras entradas.

 

Triggers o activadores: Los triggers o activadores (antiguamente llamados reglas) en Google Tag Manager son las condiciones que se establecen para que se ejecuten las diferentes etiquetas.

Dependiendo del tipo de etiqueta que queramos ejecutar, necesitaremos definir el tipo de activador: Página vista, Clics en enlaces, Envío de Formularios, Errores de JavaScript, Eventos personalizados….

Por ejemplo, para añadir la etiqueta de seguimiento de Google Analytics a nuestro sitio web, utilizaremos el activador ‘Todas las páginas’ 

Tipos de activadores:

  • Página vista
  • Clics en botones
  • Clics en enlaces
  • Envío de formularios
  • Temporizador
  • Evento personalizado
  • Cambios en el historial de GTM
  • Error de JavaScript

Variables: Las variables en Google Tag Manager son elementos que guardan determinada información, la cual puede ser usada posteriormente por cualquiera de los elementos de nuestro contenedor de GTM.

Como podemos ver en la imagen anterior, en nuestro contenedor de GTM podemos encontrar nuestras variables agrupadas de dos maneras:

  • Variables integradas
  • Variables definidas por el usuario

Tipos de variables:

  • Cadena constante
  • Cookie de origen
  • Elemento DOM
  • JavaScript personalizada
  • Modo de depuración
  • Número aleatorio
  • Número de versión del contenedor
  • Tabla de consulta
  • URL
  • URL de referencia de HTTP
  • Variable de capa de datos
  • Variable de evento automático
  • Variable JavaScript

Carpetas: Las carpetas es otras de las funcionalidades recientemente añadidas a Google Tag Manager. Nos sirven para poder agrupar etiquetas del mismo tipo o relacionadas con el fin de mantener un orden. Esta utilidad es especialmente útil para empresas o sitios web donde se gestionan un gran número de etiquetas.

 

5. Consola de GTM

Google Tag Manager dispone de una ‘consola’ en al que podemos ver el estado de nuestras etiquetas, activadores y variables, con el objetivo de poder identificar fácilmente qué etiquetas se están ejecutando, en que momento, o si no se están ejecutando, saber el porqué.

Para acceder a esta consola, simplemente tenemos que hacer clic en el botón de ‘vista previa’ de nuestro contenedor de GTM y acceder a nuestro sitio web:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Como podemos observar en la imagen anterior, una vez hemos activado la vista previa de nuestro contenedor y recargamos alguna de las páginas de nuestro sitio web donde se encuentra el código de nuestro contenedor, nos aparece la consola. 

Aquí vemos qué etiquetas se están ejecutando, en qué momento, y cuáles no y por qué. Además podemos ver el estado de nuestras variables en cada momento.

Si te ha interesado esta entrada, seguro que te han surgido muchas dudas. Google Tag Manager es una herramienta con una infinidad de funcionalidades y características, por lo que sería imposible contarte todo en una entrada.

Por eso, te adelanto algunas de las próximas entradas que publicaré para que puedas seguir aprendiendo como funciona Google Tag Manager.

Próximas entradas:

  • Instalación de Google Tag Manager en tu web
  • Etiquetas de Google Tag Manager
  • Variables de Google Tag Manager
  • Activadores de Google Tag Manager
  • El dataLayer en profundidad
Compartir

Deja un comentario