10 cosas brutales que puedes hacer con Google Tag Manager - User Web Analytics - eShow BCN 2016

Iñaki Huerta
@ikhuerta
10 Cosas Brutales que puedes hacer con
Google Tag Manager

¡Hola!
Soy Iñaki Huerta
ikhuerta.com
@ikhuerta
hola@ikhuerta.com

#UWABCN Iñaki Huerta- @ikhuerta
El día que descubres Google Tag Manager

El interés en Tag Manager
Iñaki Huerta- @ikhuerta#UWABCN

¿Qué te aporta un Tag manager?
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.

#1 Implementaciones base
de Analitica web
Para todos…

Google Tag Manager
Un “Simple” gestor de etiquetas javascript
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

<html>
<head>
[… datos en el head …]
<head>
<body>
[… datos en el body …]
</head>
</html>
Siempre tras la apertura del <body>

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

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

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
Un mundo de opciones
de implementación en
tu WAT

#2 Carga de configuraciones
ya hechas
Para los más pequeños…

Nos encantan los recursos gratis, ¿verdad?

GTM permite exportar e importar tus configuraciones

GTM permite exportar e importar tus configuraciones
¿Y quien dice que tenemos que importar/exportar
configuraciones completas?

Podemos crear contenedores que contengan solo el añadido exacto que queramos reutilizar…

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

E importarlo cuando deseemos en el proyecto donde necesitemos ese mismo añadido…

ANTES:
DESPUÉS:

#3 ¿Quién necesita a IT?
Para webs poco agiles…

Os presento al DOM (Document Object Model)

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

Accede a cualquier elemento de la página

- Lo lee
- Lo cambia
- Le asigna eventos

GTM está hecho sobre Javascript
- Lo lee
- Lo cambia
- Le asigna eventos

1. Accediendo a información que IT no te ha preparado
en el dataLayer
Variable - Variable que contiene la info del HTML

Nueva Variable

La única condición es que el “activador” sea de tipo “DOM Preparado”

2. Cambiando el diseño de tu página con GTM
Etiqueta - Javascript que cambia tu diseño o contenidos

Existen multitud de librerias javascript
que facilitan la manipulación del DOM
Etc…

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

Creando etiquetas personalizadas en GTM podemos aplicar el script con los
cambios que hagan falta…
Nueva Etiqueta

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

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

Nuevo Activador

Delimitamos que clicks
exactos son a los que
queremos asociar el evento

Todas estas acciones hay que gestionarlas con cuidado
- El HTML podria cambiar
- Podríamos romper alguna funcionalidad
- O simplemente volver locos a
los desarrolladores

#4 Conocer y actuar en
consecuencia de la campaña
Para los marketers…

Antiguamente (GA Classic) siempre sabíamos las campañas de las visitas
La cookie _utmz contiene
utm_medium
utm_source
utm_campaign
etc…

Pero con universal analytics perdimos esta información
¿Y nuestras
campañas?
utm_medium
utm_source
utm_campaign
etc…

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}
keyword = {keyword}
content = (not set)
medium = (none)
source = (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…

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

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

La nueva cookie:
medium
source
campaign
etc…

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

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

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

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

Pixeles con deduplicación:
Etiqueta
Activador - Que tiene en cuenta la campaña
- Que lanza el pixel de nuestro proveedor

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 

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

Pixeles con deduplicación:
Etiqueta
Activador - Que tiene en cuenta la campaña
- Que lanza cambios en el DOM de la web

#5 Seguimiento de campañas
internas de la web
Para los responsables de producto

¿Cómo podemos
medir la publicidad
interna de la web?

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

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

Nuestro Sistema:
2 – Creamos como dimensines personalizadas estas variables en Google Analytics

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

Y ya tenemos campañas internas en Google Analytics

Y ya tenemos campañas internas en Google Analytics
ikaue.com/recursos/gtm/emulador-de-campanas.json

#6 Depurar URLs
Para los legalistas

Va contra las normas de Google Analytics
guardar datos personales en las URLs?
¿Sabias que…

Pero muchas webs lo hacen…
Páginas

¡PUEDEN HASTA CERRARNOS LA CUENTA!

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

ikaue.com/recursos/gtm/page-mod.json

#7 Creación de usuarios
persistentes
Para los enamorados de las personas

dataLayer = [{
userId : ‘123456’
…
}];
Seguir a los usuarios logados es una de las
prácticas más usadas a día de hoy…

El problema es cuando el usuario se des-identifica

Dejamos de seguirlePodemos seguir al usuario

Dejamos de seguirlePodemos seguir al usuario
¿Cómo le identificamos en
estas páginas?

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

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
ikaue.com/recursos/gtm/persistent-user-id.json

#8 Alertas en tu movil o email
cuando suceda algo
Para los más ansiosos

¿Conoceis IFTTT?

¿Conoceis IFTTT?
PERMITE CREAR PIXELES
QUE AL LANZARSE PROVOQUEN
OTRAS ACCIONES

Llamadas a IFTTT:
Etiqueta
Activador - Que detecta la acción a notificar
- Que lanza el Maker de IFFF

Nueva Etiqueta

#9 Optimizaciones de prueba
y A/B testing desde GTM
Para los CRO

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

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

Cómo crear A/B con GA desde GTM
1. 2.
3.

4.
En las variaciones, nos inventamos la URL,
aunque no exista

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.

ID de experimento
7. Nueva Etiqueta

ID de experimento
7. Nueva Etiqueta
PODEIS IMPORTAR EL CÓDIGO BASE CON UN CONTENEDOR:
ikaue.com/recursos/gtm/ab-testing-base.json

¡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>

¡Cuidado!
<html>
<head>
[…]
</head>
<body>
[…]
[…]
[…]
</body>
</html>
 Pasan como mínimo 0,1 segundos, pero puede ser mucho más…

¡Cuidado!
<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

#10 Optimizaciones SEO
con GTM
Para los SEO

La primera vez que oyes que…
“Google Indexa los cambios que hacemos con GTM”

Etiqueta
Activador - Sólo las páginas a manipular
- Que cambia el metadato

Blackfriday.es
(por Miguel Pascual)

Blackfriday.es
(por Miguel Pascual)
¡Y funciona!

Añadiendo marcado semántico (schema) con GTM

El formato de schema Json-LD (json for link data)

Etiqueta
Activador - Sólo las páginas a manipular
- JSON-LD a añadir a tu página

- Sólo las páginas a manipular
- JSON-LD a añadir a tu página

¡Y funciona!

Nota: Que funcione, no significa que sea lo más óptimo.
Son solo parches.

Hoy en día, al seguir trabajando con Tag Manager

Cuando la meta es importante
los obstáculos se vuelven pequeños

Iñaki Huerta
@ikhuerta
¡Muchas Gracias!

10 cosas brutales que puedes hacer con Google Tag Manager - User Web Analytics - eShow BCN 2016

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a 10 cosas brutales que puedes hacer con Google Tag Manager - User Web Analytics - eShow BCN 2016

Similar a 10 cosas brutales que puedes hacer con Google Tag Manager - User Web Analytics - eShow BCN 2016 (20)

Más de Iñaki Huerta (ikhuerta)

Más de Iñaki Huerta (ikhuerta) (20)

Último

Último (20)

10 cosas brutales que puedes hacer con Google Tag Manager - User Web Analytics - eShow BCN 2016