10 cosas brutales que puedes hacer con google tag manager - user web analytics - eshow bcn 2016
Post on 21-Apr-2017
18.725 Views
Preview:
TRANSCRIPT
¿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.
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
#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>
#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
#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
#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…
Una sola
implementación
de GTM
Iñaki Huerta- @ikhuerta #UWABCN
Un mundo de opciones
de implementación en
tu WAT
#UWABCN Iñaki Huerta- @ikhuerta
GTM permite exportar e importar tus configuraciones
¿Y quien dice que tenemos que importar/exportar
configuraciones completas?
#UWABCN Iñaki Huerta- @ikhuerta
Podemos crear contenedores que contengan solo el añadido exacto que queramos reutilizar…
#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
#UWABCN Iñaki Huerta- @ikhuerta
E importarlo cuando deseemos en el proyecto donde necesitemos ese mismo añadido…
#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
#UWABCN Iñaki Huerta- @ikhuerta
GTM está hecho sobre Javascript
- Lo lee
- Lo cambia
- Le asigna eventos
#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
#UWABCN Iñaki Huerta- @ikhuerta
La única condición es que el “activador” sea de tipo “DOM Preparado”
#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
#UWABCN Iñaki Huerta- @ikhuerta
Existen multitud de librerias javascript
que facilitan la manipulación del DOM
Etc…
#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
#UWABCN Iñaki Huerta- @ikhuerta
Creando etiquetas personalizadas en GTM podemos aplicar el script con los
cambios que hagan falta…
Nueva Etiqueta
#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
#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
#UWABCN Iñaki Huerta- @ikhuerta
Delimitamos que clicks
exactos son a los que
queremos asociar el evento
#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
#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…
#UWABCN Iñaki Huerta- @ikhuerta
Pero con universal analytics perdimos esta información
¿Y nuestras
campañas?
utm_medium
utm_source
utm_campaign
etc…
#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…
#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
#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
#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
#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
#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
#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
#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
#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
#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
#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
#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
#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
#UWABCN Iñaki Huerta- @ikhuerta
Nuestro Sistema:
2 – Creamos como dimensines personalizadas estas variables en Google Analytics
#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
#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
#UWABCN Iñaki Huerta- @ikhuerta
Va contra las normas de Google Analytics
guardar datos personales en las URLs?
¿Sabias que…
#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
#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
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…
Dejamos de seguirle Podemos seguir al usuario
#UWABCN Iñaki Huerta- @ikhuerta
El problema es cuando el usuario se des-identifica
Dejamos de seguirle Podemos 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?
#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
#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
#UWABCN Iñaki Huerta- @ikhuerta
¿Conoceis IFTTT?
PERMITE CREAR PIXELES
QUE AL LANZARSE PROVOQUEN
OTRAS ACCIONES
#UWABCN Iñaki Huerta- @ikhuerta
Llamadas a IFTTT:
Etiqueta
Activador - Que detecta la acción a notificar
- Que lanza el Maker de IFFF
#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
#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
#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.
#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
#UWABCN Iñaki Huerta- @ikhuerta
¡Cuidado! Google no recomienda los A/B desde GTM por algo…
Línea d
e T
iem
po
La carga de una página con GTM
Se carga el Tag de GTM Etiqueta A/B testing
<html>
<head>
[…]
</head>
<body>
[…]
[…]
[…]
</body>
</html>
#UWABCN Iñaki Huerta- @ikhuerta
¡Cuidado! Google no recomienda los A/B desde GTM por algo…
Línea d
e T
iem
po
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…
#UWABCN Iñaki Huerta- @ikhuerta
¡Cuidado! Google no recomienda los A/B desde GTM por algo…
Línea d
e T
iem
po
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
#UWABCN Iñaki Huerta- @ikhuerta
La primera vez que oyes que…
“Google Indexa los cambios que hacemos con GTM”
#UWABCN Iñaki Huerta- @ikhuerta
Etiqueta
Activador - Sólo las páginas a manipular
- Que cambia el metadato
#UWABCN Iñaki Huerta- @ikhuerta
Etiqueta
Activador - Sólo las páginas a manipular
- JSON-LD a añadir a tu página
#UWABCN Iñaki Huerta- @ikhuerta
Nota: Que funcione, no significa que sea lo más óptimo.
Son solo parches.
top related