aprende a usar google tag manager (gtm)

APRENDE A USAR

GOOGLE TAG MANAGER

Hello!

CARLOS RABADÁNANALISTA WEB EN SEMMANTICA

Analítica web

““

Análisis cualitativo y

cuantitativo de los datos de tu website y los de la competencia, para

lograr una continua mejora de la experiencia de usuario de tus clientes,

traduciéndose finalmente en los resultados deseados

Avinash Kaushik

Existen multitud de soluciones software de analítica

De una forma u otra, todas necesitan obtener

datos sobre los usuarios, las páginas, las interacciones con el portal, los productos, etc

Para poder recopilar todos estos datos, las herramientas de analítica web necesitan hacer uso de una cosa:

ETIQUETAS

Pequeños fragmentos de código fuente insertados en nuestra web, y que recogen

datos sobre la página y el usuario para enviarlos a la

herramienta que corresponda

Las etiquetas son…

La acumulación de etiquetas provoca

PROBLEMAS

Ensucian el documento web

Deterioran el rendimiento

Requieren de la intervención de IT

Provocan errores

Necesario un

CAMBIODE PARADIGMA

Liberar la página

de etiquetas

Administrarlas

externamente

GESTORES DE

ETIQUETASó

TAG MANAGEMENT

SYSTEMS(TMS’s)

““

Solución software para la gestión simplificada del código web y de las distintas etiquetas de las

herramientas de tracking online

Gestores de Etiquetas

En otras palabras…

Una etiqueta para gestionarlas a todas

Gestores de Etiquetas

Algunos conceptos clave a tener en cuenta

1

Por sí solos, los TMS’sno miden nada. Para eso hay que crear

etiquetas

2

El script del TMS ha de

estar instalado en todaslas páginas del portal que deseemos medir

3

Los TMS’s son inyectores de código.

Hay que tener cuidadocon lo que hacemos antes de publicar nuevos cambios

De acuerdo, ¿pero esto no iba

sobre

Google Tag Manager ?

Google Tag Manageraka

GTMEs el gestor de etiquetas de Google

$

G

FÁCIL EXTENDIDO GRATUITO

COMPLETO GOOGLEPOTENTE

Su curva de aprendizaje es suave

Existe mucha documentación en la red

Todas sus funcionalidades son gratuitas

Hace fácil el trabajar con herramientas de terceros

La seguridad que da tener a un gigante

detrás dando soporte

Buen rendimiento y versátil. Disponible SDKs

para mobile y tablet

Ok… Pero ¿qué me ofrece GTM que no me de ya Analytics?

analytics.js

• n etiquetas en el código fuente• Cada nueva etiqueta requiere hacer

modificaciones en el código fuente • Añadir o modificar etiquetas supone

un proceso técnico y lento (IT)• No se pueden probar las nuevas

etiquetas de forma directa en el entorno de producción

• Imprescindibles conocimientos técnicos para hacer cualquier cosa

• Muchas etiquetas pueden llegar a deteriorar el rendimiento de página

• Etiquetas desperdigadas, administración tediosa

Google Tag Manager

• 1 etiqueta en el código fuente (base)• Todas las etiquetas se gestionan a

través de una aplicación web externa• Los cambios en las etiquetas son

instantáneos• Las modificaciones en etiquetas se

pueden probar de manera local en el entorno de producción

• No son necesarios conocimientos técnicos para realizar mediciones sencillas

• La ejecución de las etiquetas se realiza de manera asíncrona

• Administración centralizada de etiquetas, permitiendo una clasificación personalizada

But wait! There’s more…

Creación de tests A/B de comportamiento y recopilación de datos posteriormenteA/B

Control y monitorización de posibles errores

Personalizar la experiencia de usuario en la web en función de su análisis y/o conocimiento previo

Y muchas más cosas que se nos ocurran!

Pero no es oro todo lo que reluce…

Google Tag Manager

• Es obligatorio introducir el script base en todas aquellas páginas que vayamos a medir

• Implementaciones más avanzadas requieren tener unos conocimientos técnicos mínimos

• Mediciones más complejas requieren introducir ciertos scripts en la web

• Migrar desde una implementación Analytics estándar no es trivial

• Scraping = frágil• Es «peligrosamente potente»

Instalación de GTM

Todas las páginas del portal han de contener el script base de GTM, al comienzo del <body>

<body>

<div><section class=«wrap»>……..

Y a partir de ahí nos olvidamos de la web, todo lo demás se hará a través de la interfaz de GTM

Cuenta

Contenedor

Componente Componente

Contenedor

Componente

…

…

GTM por dentro

Todos los contenedores de GTM llevan asociado un identificador único: GTM-ABCD123

Dentro de cada contenedor podremos crear tres tipos de componentes distintos

ETIQUETA(Tag)

VARIABLEDISPARADOR(Trigger)

El componente principal de GTM. Nos permitirán enviar

datos de analítica a la herramienta que queramos

ETIQUETA

También podremos modificar el DOM de la página e

inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial

ETIQUETA

Colección de plantillas para una configuración rápida y sencilla de múltiples tipos de etiqueta

ETIQUETA

Diferentes clases de disparadores para definir con precisión

cuándo se debe lanzar una etiqueta

DISPARADOR

Cuando el usuario visita cierta página

Al hacer clic sobre un elemento Al enviar un formulario Cuando un elemento se hace

visible en la página Pasados x segundos Cuando se produce un error JS …

DISPARADOR

Capacidad para crear disparadores en función de

nuestras necesidades en cada momento

Un disparador también podrá usarse como

bloqueante de etiquetas

DISPARADOR

VARIABLE

Valores auxiliaresdefinidos a partir de la

página, de un elemento del DOM o de una

función personalizada

VARIABLE

Podremos invocarvariables a la hora de configurar cualquiera

de los tres componentes

principales de GTM

VARIABLE

Las variables amplían enormemente las

posibilidades de GTM, haciéndolo una

herramienta más

escalable y eficiente

ETIQUETA

DISPARADOR

VARIABLEPara poder medir será necesario crear etiquetas

Para ejecutar nuestras etiquetas tendremos que configurar

disparadores

Las variables facilitarán la

configuración de etiquetas y

disparadores, y los harán más versátiles

You’ll know my name

DATALAYER

““

Objeto Javascript encargado de almacenar todos los datos de cada una de las interacciones del

usuario con la página que haya podido escucharGTM

DATALAYER

¿Escuchar?

GTM se puede configurar para que monitorice prácticamente cualquier acción del usuario que navega

Los datos de estas acciones se almacenan en el Datalayer de cada página

Posteriormente podremos leer esta información y crear etiquetas, variables y disparadores en base a estos datos

¿Y por qué es tan importante?

DATALAYER

Porque es el nexo de comunicación entre GTM e IT

En algunas ocasiones, desde GTM necesitaremos

que se nos avise cuando se produzca cierto evento en la página

En otras, necesitaremos que nos pasen

información que no se encuentra disponible a nivel de DOM (transacciones, productos, usuarios, …)

Y toda esa comunicación tiene lugar

dentro del Datalayer

Algunos plugins para el navegador para el día a día con Tag Manager

Tag Assistant Dataslayer Wasp Ghostery Tag Manager Injector GTM Sonar EditThisCookie

¿Es para mí?

La pregunta que debes hacerte ahora

1 ¿Utilizas multitud de herramientas de análitica web en tu website?

2 ¿Tienes que añadir o cambiar etiquetas de estas herramientas a menudo?

3¿Puedes modificar estas etiquetas de forma rápida?

Si has respondido que sí alguna de las anteriores

preguntas significa que una solución tipo Tag Manager te podría ser de gran ayuda

Gracias