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

[email protected]

#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


Nueva Variable




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 seguirle Podemos seguir al usuario



Dejamos de seguirle Podemos 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í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>



Línea d

e T

iem

po



<html>

<head>

[…]

</head>

<body>

[…]

[…]

[…]

</body>

</html>

Pasan como mínimo 0,1 segundos, pero puede ser mucho más…



Línea d

e T

iem

po



<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

Data & Analytics

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