Conferencia impartida por Carlos Rabadán en la Feria de Tiendas Virtuales 2016 sobre el cambio de paradigma que supone empezar a utilizar Google Tag Manager (GTM): principales gestores de etiquetas, ventajas del uso de GTM, instalación de GTM, contenedores, disparadores y variables.

1. APRENDE A USAR
GOOGLE TAG
MANAGER

2. Hello!
CARLOS RABADÁN
ANALISTA WEB EN SEMMANTICA

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

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

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

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

8. La acumulación de etiquetas provoca
PROBLEMAS

9. Ensucian el
documento web
Deterioran el
rendimiento
Requieren de la
intervención de IT
Provocan errores

10. Necesario un
CAMBIO
DE PARADIGMA

11. Liberar la página
de etiquetas
Administrarlas
externamente

12. GESTORES DE
ETIQUETAS
ó
TAG MANAGEMENT
SYSTEMS
(TMS’s)

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

14. En otras palabras…

15. Una etiqueta para gestionarlas a
todas
Gestores de Etiquetas

16. Algunos conceptos clave a tener
en cuenta

17. 1
Por sí solos, los TMS’s
no miden nada. Para
eso hay que crear
etiquetas

18. 2
El script del TMS ha de
estar instalado en todas
las páginas del portal
que deseemos medir

19. 3
Los TMS’s son
inyectores de código.
Hay que tener cuidado
con lo que hacemos
antes de publicar
nuevos cambios

21. De acuerdo, ¿pero esto no iba
sobre
Google Tag Manager ?

22. Google Tag Manager
aka
GTM
Es el gestor de etiquetas de Google

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

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

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

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

27. Pero no es oro todo lo que reluce…

28. 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» 

29. 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»>……..

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

31. Cuenta
Contenedor
Componente Componente
Contenedor
Componente
…
…
GTM por dentro

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

33. Dentro de cada contenedor podremos crear
tres tipos de componentes distintos

34. ETIQUETA
(Tag)
VARIABLEDISPARADOR
(Trigger)

35. El componente principal de GTM. Nos permitirán enviar
datos de analítica a la herramienta que queramos
ETIQUETA

36. También podremos modificar el DOM de la página e
inyectar nuevo contenido HTML (scripts) mediante un tipo
de etiqueta especial
ETIQUETA

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

38. Diferentes clases de
disparadores para
definir con precisión
cuándo se debe lanzar
una etiqueta
DISPARADOR

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

40. Capacidad para crear
disparadores en función de
nuestras necesidades en
cada momento
Un disparador también
podrá usarse como
bloqueante de etiquetas
DISPARADOR

41. VARIABLE
Valores auxiliares
definidos a partir de la
página, de un elemento
del DOM o de una
función personalizada

42. VARIABLE
Podremos invocar
variables a la hora de
configurar cualquiera
de los tres
componentes
principales de GTM

43. VARIABLE
Las variables amplían
enormemente las
posibilidades de GTM,
haciéndolo una
herramienta más
escalable y eficiente

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

45. You’ll know my name
DATALAYER

46. “
“
Objeto Javascript encargado de almacenar todos
los datos de cada una de las interacciones del
usuario con la página que haya podido escuchar
GTM
DATALAYER

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

48. ¿Y por qué es tan importante?
DATALAYER
Porque es el nexo de comunicación entre GTM e IT

49. 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, …)

50. Y toda esa comunicación tiene lugar
dentro del Datalayer

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

52.  Tag Assistant
 Dataslayer
 Wasp
 Ghostery
 Tag Manager Injector
 GTM Sonar
 EditThisCookie

53. ¿Es para mí?
La pregunta que debes hacerte ahora

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

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

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

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

58. Gracias