En esta charla desgranamos distintas cciones que podemos llegar a tomar desde GTM en un site. Implementaciones, Accesos al DOM, Gestión de campañas, Alertas, CRO e incluso SEO. Todo desde una sola herramienta. La charla contiene distintos links con los que descargar las implementaciones realizadas.
5. El interés en Tag Manager
Iñaki Huerta- @ikhuerta#UWABCN
6. El interés en Tag Manager
Iñaki Huerta- @ikhuerta#UWABCN
7. ¿Qué te aporta un Tag manager?
Iñaki Huerta- @ikhuerta#UWABCN
Trabajo del
desarrollador
Tu Trabajo
GTM
Nueva área
bajo control
- Es más técnico…
- Y hay que trabajar más…
- Pero desplazas la carga de trabajo a quien le importa realmente el resultado de lo que se está
haciendo.
9. Google Tag Manager
Un “Simple” gestor de etiquetas javascript
Iñaki Huerta- @ikhuerta#UWABCN
GTM
Etiquetas de GTM
Genera
Que son
capaces de
generar
muchas otras
etiquetas Google Adwords
Google Analytics
DobleClick
ComScore
ClickTale
Y casi cualquier
Herramienta…
Las etiquetas de GTM
recogen mucha información
de tu web
Y con esta
información
1. Se decide qué
etiquetas lanzar
2. Se decide con qué
parámetros
10. #UWABCN Iñaki Huerta- @ikhuerta
<html>
<head>
[… datos en el head …]
[… datos en el head …]
[… datos en el head …]
<head>
<body>
[… datos en el body …]
[… datos en el body …]
[… datos en el body …]
[… datos en el body …]
[… datos en el body …]
[… datos en el body …]
</head>
</html>
Siempre tras la apertura del <body>
11. #UWABCN Iñaki Huerta- @ikhuerta
El día que descubres Google Tag Manager
DataLayer
Un sistema:
- Cómodo
- Fácil de validar
- Y más fácil aun de implementar
Para nutrir de datos de negocio a GTM
12. #UWABCN Iñaki Huerta- @ikhuerta
Validaciones que se hacen con las
variables y con los eventos para
determinar si se imprimen o no las
etiquetas.
También son capaces de provocar eventos.
Son los tags que se imprimirán en nuestra
página dependiendo de si se lanzan los
activadores asignados.
Extraen de la página las “variables” que
usaremos para:
a) Comprobar los activadores.
b) Configurar valores de las etiquetas.
Variables
Etiquetas
Activadores
13. #UWABCN Iñaki Huerta- @ikhuerta
El día que descubres Google Tag Manager
Tag de GTM
DataLayer
URLs – Cookies
DataLayer – Variables JS
Eventos automáticos
JS personalizado
Páginas vistas
- agrupaciones contenido
- dimensiones personalizadas
- url manipulada
Eventos
- Clicks
- Scrolls
- Tiempo
- Formularios
- Etc…
Datos de producto
- Impresiones
- Clicks
- Carrito y Checkout
- Transacciones
- Etc…
18. #UWABCN Iñaki Huerta- @ikhuerta
GTM permite exportar e importar tus configuraciones
¿Y quien dice que tenemos que importar/exportar
configuraciones completas?
19. #UWABCN Iñaki Huerta- @ikhuerta
Podemos crear contenedores que contengan solo el añadido exacto que queramos reutilizar…
20. #UWABCN Iñaki Huerta- @ikhuerta
E importarlo cuando deseemos en el proyecto donde necesitemos ese mismo añadido…
Siempre en modo
“combinar”
para no borrar el
resto de la configuración
de nuestro contenedor
21. #UWABCN Iñaki Huerta- @ikhuerta
E importarlo cuando deseemos en el proyecto donde necesitemos ese mismo añadido…
25. #UWABCN Iñaki Huerta- @ikhuerta
Cómo ver un elemento en el DOM (en formato HTML)
1) Click Derecho y
aparece el menú
2) Seleccionamos,
“inspeccionar elemento”
3) El elemento nos aparece resaltado y
podemos ver sus atributos:
class =“url track-social”
href = “http://tiwtter.com/ikhuerta”
Texto = Twitter
29. #UWABCN Iñaki Huerta- @ikhuerta
GTM está hecho sobre Javascript
- Lo lee
- Lo cambia
- Le asigna eventos
30. #UWABCN Iñaki Huerta- @ikhuerta
1. Accediendo a información que IT no te ha preparado
en el dataLayer
Variable - Variable que contiene la info del HTML
33. #UWABCN Iñaki Huerta- @ikhuerta
La única condición es que el “activador” sea de tipo “DOM Preparado”
34. #UWABCN Iñaki Huerta- @ikhuerta
2. Cambiando el diseño de tu página con GTM
Etiqueta - Javascript que cambia tu diseño o contenidos
35. #UWABCN Iñaki Huerta- @ikhuerta
Existen multitud de librerias javascript
que facilitan la manipulación del DOM
Etc…
36. #UWABCN Iñaki Huerta- @ikhuerta
Existen multitud de librerias javascript
que facilitan la manipulación del DOM
Etc…
Tu Site es muy probable que ya esté
usando algunas de ellas
37. #UWABCN Iñaki Huerta- @ikhuerta
Creando etiquetas personalizadas en GTM podemos aplicar el script con los
cambios que hagan falta…
Nueva Etiqueta
38. #UWABCN Iñaki Huerta- @ikhuerta
Creando etiquetas personalizadas en GTM podemos aplicar el script con los
cambios que hagan falta…
Por desgracia, aun nada nos libra de que alguien
con nociones de JS sea quien haga estos añadidos.
BANNER
39. #UWABCN Iñaki Huerta- @ikhuerta
3. Añadiendo eventos a acciones de los usuarios
Etiqueta
Activador - Que detecta el click/envío/etc…
- Que lanza el evento hacia GA
- o la página virtual
41. #UWABCN Iñaki Huerta- @ikhuerta
Delimitamos que clicks
exactos son a los que
queremos asociar el evento
42. #UWABCN Iñaki Huerta- @ikhuerta
Todas estas acciones hay que gestionarlas con cuidado
- El HTML podria cambiar
- Podríamos romper alguna funcionalidad
- O simplemente volver locos a
los desarrolladores
43. #4 Conocer y actuar en
consecuencia de la campaña
Para los marketers…
44. #UWABCN Iñaki Huerta- @ikhuerta
Antiguamente (GA Classic) siempre sabíamos las campañas de las visitas
La cookie _utmz contiene
utm_medium
utm_source
utm_campaign
etc…
45. #UWABCN Iñaki Huerta- @ikhuerta
Pero con universal analytics perdimos esta información
¿Y nuestras
campañas?
utm_medium
utm_source
utm_campaign
etc…
46. #UWABCN Iñaki Huerta- @ikhuerta
Sabemos como funcionan las
campañas…
… por qué no emularlas?
Proceso
Automático
¿Tenemos
Referral?
¿es un
Buscador?
¿UTM’s
en la
URL?
Proceso
Manual
medium = referral
source = {dominio}
campaign = (not set)
keyword = (not set)
content = (not set)
medium = organic
source = {buscador}
campaign = (not set)
keyword = {keyword}
content = (not set)
medium = (none)
source = (not set)
campaign = (not set)
keyword = (not set)
content = (not set)
medium = utm_medium
source = utm_source
campaign = utm_campaign
keyword = utm_term
content = utm_content
Para cada visita…
No
Sí
Sí
Sí
No
No
Se leen las etiquetas utm…
47. #UWABCN Iñaki Huerta- @ikhuerta
Desarrollamos un código javascript que se comporte igual que lo
hace Google y genere nuestras cookies de campaña...
Variables
Etiqueta - Javascript que genera las cookies de campaña
- Utm medium
- Utm source
- Utm campaign
- Utm content
- Utm term
- Landing page
- Referal page
48. #UWABCN Iñaki Huerta- @ikhuerta
Desarrollamos un código javascript que se comporte igual que lo
hace Google y genere nuestras cookies de campaña...
Variables
Etiqueta - Javascript que genera las cookies de campaña
- Utm medium
- Utm source
- Utm campaign
- Utm content
- Utm term
- Landing page
- Referal page
NO HACE FALTA QUE LO PROGRAMEIS VOSOTROS
PODEIS IMPORTAR NUESTRO CONTENEDOR YA PROGRAMADO:
ikaue.com/recursos/gtm/emulador-de-campanas.json
51. #UWABCN Iñaki Huerta- @ikhuerta
Usos de disponer de la campaña en variablesGTM o cookies
1. Cualificación de la base de datos de conversiones
2.Deduplicación de pixeles de proveedores
3.Adaptación gráfica a campañas
53. #UWABCN Iñaki Huerta- @ikhuerta
Se genera
la
campaña
Navegación con la campaña identificada
Se genera
la
conversión
Podemos guardar la
campaña en BBDD interna
54. #UWABCN Iñaki Huerta- @ikhuerta
Plataforma de Campañas
Nuestro Site
Publicidad
Landing Form Agradecimiento
Con “Pixel”
Click Conversión
Herramienta Control
y Reporting
Funcionamiento de un pixel de conversión
55. #UWABCN Iñaki Huerta- @ikhuerta
Plataforma de Campañas
Nuestro Site
Publicidad
Landing Form Agradecimiento
Con “Pixel”
Click Conversión
Herramienta Control
y Reporting
Funcionamiento de un pixel de conversión
El problema:
El pixel no controla si antes de convertir
llega una nueva campaña
56. #UWABCN Iñaki Huerta- @ikhuerta
Pixeles con deduplicación:
Etiqueta
Activador - Que tiene en cuenta la campaña
- Que lanza el pixel de nuestro proveedor
58. #UWABCN Iñaki Huerta- @ikhuerta
La continuidad del mesaje es una herramienta genial de
conversión para algunos canales
¡El mejor precio
del mercado!
Contrata nuestros
servicios
Baja conversión
59. #UWABCN Iñaki Huerta- @ikhuerta
La continuidad del mesaje es una herramienta genial de
conversión para algunos canales
¡El mejor precio
del mercado!
Con el mejor precio
del mercado
¡Mucho mejor!
utm_content=precio
60. #UWABCN Iñaki Huerta- @ikhuerta
Pixeles con deduplicación:
Etiqueta
Activador - Que tiene en cuenta la campaña
- Que lanza cambios en el DOM de la web
61. #5 Seguimiento de campañas
internas de la web
Para los responsables de producto
62. #UWABCN Iñaki Huerta- @ikhuerta
¿Cómo podemos
medir la publicidad
interna de la web?
63. #UWABCN Iñaki Huerta- @ikhuerta
Usar UTM’s no es la solución pues rompen la
campaña original…
medium=email
source=clients
medium=internal
source=slider
CAMPAÑA 1 CAMPAÑA 2
La venta se queda
con la última
campaña
Campaña Campaña interna
64. #UWABCN Iñaki Huerta- @ikhuerta
ic_medium
ic_source
ic_campaign
ic_content
ic_term
Nuestro Sistema:
1 - Creamos variables de campaña exactamente iguales a las de GA, pero internas
/colchones.e?ic_source=portal&ic_medium
=home&ic_content=carrusel&ic_campaign
=colchones_20160226
/colchones.e
65. #UWABCN Iñaki Huerta- @ikhuerta
Nuestro Sistema:
2 – Creamos como dimensines personalizadas estas variables en Google Analytics
66. #UWABCN Iñaki Huerta- @ikhuerta
Variables
Etiqueta - Javascript que detecta las URLs y genera las cookies
- Internal campaign medium
- Internal campaign source
- Internal campaign campaign
- Internal campaign content
- Internal campaign term
- Internal campaign page
- Internal campaign page
Etiqueta - De página vista con dimensiones personalizadas con
los datos de campaña
1 – Gestionamos con GTM que llege esa información a esas variables
68. #UWABCN Iñaki Huerta- @ikhuerta
Y ya tenemos campañas internas en Google Analytics
NO HACE FALTA QUE LO PROGRAMEIS VOSOTROS
PODEIS IMPORTAR NUESTRO CONTENEDOR YA PROGRAMADO:
ikaue.com/recursos/gtm/emulador-de-campanas.json
73. #UWABCN Iñaki Huerta- @ikhuerta
Solución: crear una nueva variable de URL, que esté limpia
Variable - La URL, pero ahora limpia
Etiquetas - Pagina: vista, manipulando la URL
- Eventos: Manipulando la URL
- Ecommerce: Manipulando la URL
76. #UWABCN Iñaki Huerta- @ikhuerta
NO HACE FALTA QUE LO PROGRAMEIS VOSOTROS
PODEIS IMPORTAR NUESTRO CONTENEDOR YA PROGRAMADO:
ikaue.com/recursos/gtm/page-mod.json
77. #7 Creación de usuarios
persistentes
Para los enamorados de las personas
78. dataLayer = [{
userId : ‘123456’
…
}];
#UWABCN Iñaki Huerta- @ikhuerta
Seguir a los usuarios logados es una de las
prácticas más usadas a día de hoy…
80. Dejamos de seguirlePodemos seguir al usuario
#UWABCN Iñaki Huerta- @ikhuerta
El problema es cuando el usuario se des-identifica
81. Dejamos de seguirlePodemos seguir al usuario
#UWABCN Iñaki Huerta- @ikhuerta
El problema es cuando el usuario se des-identifica
¿Cómo le identificamos en
estas páginas?
82. #UWABCN Iñaki Huerta- @ikhuerta
Creamos cookies persistentes que se copien de la de usuario, pero que no se
borren cuando este lo pida.
Variable - Sacando el usuario del dataLayer
Etiquetas
- Pagina vista, con userId persistente
- Eventos , con userId persistente
- Ecommerce , con userId persistente
Variable - Creando y leyendo la cookie persistente
83. #UWABCN Iñaki Huerta- @ikhuerta
Creamos cookies persistentes que se copien de la de usuario, pero que no se
borren cuando este lo pida.
Variable - Sacando el usuario del dataLayer
Etiquetas
- Pagina vista, con userId persistente
- Eventos , con userId persistente
- Ecommerce , con userId persistente
Variable - Creando y leyendo la cookie persistente
NO HACE FALTA QUE LO PROGRAMEIS VOSOTROS
PODEIS IMPORTAR NUESTRO CONTENEDOR YA PROGRAMADO:
ikaue.com/recursos/gtm/persistent-user-id.json
84. #8 Alertas en tu movil o email
cuando suceda algo
Para los más ansiosos
91. #UWABCN Iñaki Huerta- @ikhuerta
En CRO necesitamos realizar cambios en la web
Cambios directos para acciones que no
esperen a IT
Ya conocemos la forma en la que hacer
los cambios desde GTM
Etiqueta
92. #UWABCN Iñaki Huerta- @ikhuerta
En CRO necesitamos realizar cambios en la web
Cambios directos para acciones que no
esperen a IT
Realización de A/B Testing sin
implementación de IT
Ya conocemos la forma en la que hacer
los cambios desde GTM
Etiqueta
Exactamente lo mismo pero lanzando el
propio sistema de A/B en la etiqueta
Etiqueta
94. #UWABCN Iñaki Huerta- @ikhuerta
4.
En las variaciones, nos inventamos la URL,
aunque no exista
95. #UWABCN Iñaki Huerta- @ikhuerta
6.
Existirán fallos, y los ignoramos.
Publicamos, aún con los fallos.
Podemos anotar que es un Exp. Javascript.
5. Ignoramos el tag corta y pega
Pero apuntamos el ID de Experimento,
lo necesitaremos para la implementación.
97. #UWABCN Iñaki Huerta- @ikhuerta
ID de experimento
7. Nueva Etiqueta
NO HACE FALTA QUE LO PROGRAMEIS VOSOTROS
PODEIS IMPORTAR EL CÓDIGO BASE CON UN CONTENEDOR:
ikaue.com/recursos/gtm/ab-testing-base.json
98. #UWABCN Iñaki Huerta- @ikhuerta
¡Cuidado!
Google no recomienda los A/B desde GTM por algo…LíneadeTiempo
La carga de una página con GTM
Se carga el Tag de GTM
Etiqueta A/B testing
<html>
<head>
[…]
</head>
<body>
[…]
[…]
[…]
</body>
</html>
99. #UWABCN Iñaki Huerta- @ikhuerta
¡Cuidado!
Google no recomienda los A/B desde GTM por algo…LíneadeTiempo
La carga de una página con GTM
Se carga el Tag de GTM
Etiqueta A/B testing
<html>
<head>
[…]
</head>
<body>
[…]
[…]
[…]
</body>
</html>
Pasan como mínimo 0,1 segundos, pero puede ser mucho más…
100. #UWABCN Iñaki Huerta- @ikhuerta
¡Cuidado!
Google no recomienda los A/B desde GTM por algo…LíneadeTiempo
La carga de una página con GTM
Se carga el Tag de GTM
Etiqueta A/B testing
<html>
<head>
[…]
</head>
<body>
[…]
[…]
[…]
</body>
</html>
Pasan como mínimo 0,1 segundos, pero pueden ser más…
En algunas webs el usuario puede notar un efecto de flash,
viendo la versión A del test durante unos milisegundos
para luego visualizar como el diseño cambia