@SeoBilbao
#CW15
Congreso Web de Zaragoza
Google Tag Manager
Un
nuevo
paso
en
la
Analí3ca
Digital

@SeoBilbao
#CW15
Sobre mí
Lucía Marín
lucia@experimentando.es @SeoBilbao
AnalíBca Web, Tag Manager y Formación en Aukera

@SeoBilbao
#CW15
Un nuevo paso en la AnalíBca Digital

@SeoBilbao
#CW15
Lo que vamos
a
ver hoy
ü Qué es y por qué es conveniente usar un tag manager
ü Estructura, funcionamiento y capa de datos de GTM
ü Ejs. de eBquetas: Google AnalyBcs y AdWords
ü Consejos e ideas para sacar el máximo parBdo a GTM

@SeoBilbao
#CW15
Qué
es
Google Tag Manager
Una puerta abierta al código en Bempo real, que flexibiliza el MarkeBng
Online, al dotarle de más independencia respecto a Desarrollo.
Sirve para insertar y gesBonar algunos fragmentos de código HTML y JS
remotamente, sin tener que subir cambios a producción ni publicar.
Para instalarlo y comenzar a trabajar solo debemos insertar un código JS
de contenedor/iframe en el siBo web.

@SeoBilbao
#CW15
Usos
principales
de Google Tag Manager
ü Códigos
de
seguimiento
y
conversión
(analíBca, campañas online).
ü Otros códigos HTML y JS: cambios
de
contenido
puntuales, o
pequeñas modificaciones del aspecto del siBo web.
ü
Personalización en Bempo real, según
interacción del usuario, al
poder vincularse la ejecución de código a eventos generados por el
usuario. Ej. Pop up tras 15 minutos de inac2vidad…

@SeoBilbao
#CW15
Por
qué
usar un Tag Manager
Mejora el nivel de implementación y consultoría de analíBca web

@SeoBilbao
#CW15
Por
qué
usar un Tag Manager
Mejor que el código. Menor complejidad. Mayor análisis. Mayor control.

@SeoBilbao
#CW15
Por
qué
usar un Tag Manager
Si sabes programar, mejor para B :)
ü Variables
ü JavaScript Personalizado
ü Aprende más rápido
¡Oportunidad, no Amenaza!

@SeoBilbao
#CW15
Por
qué
usar un Tag Manager
Nicho de mercado ($$$).
Estandarización de peBciones a desarrollo.
Capa
de
datos: es donde
residen los datos y es la
encargada de acceder a los
mismos. (Wikipedia)

@SeoBilbao
#CW15
Estructura y Funcionamiento
de Google Tag Manager

@SeoBilbao
#CW15
CONTENEDOR
= Instalación individual de GTM con la que
trabajamos. Normalmente: Una por web.
CUENTA
= Agrupación lógica de 1 o más contenedores.
Una por empresa, o por cliente.
USUARIO
= Cuenta de usuario (email) de Google. Puede
tener acceso a una o más cuentas y / o contenedores.
Conceptos: Usuario
-­‐
Cuenta
-­‐
Contenedor

@SeoBilbao
#CW15
Permisos a nivel de
Cuenta
o
Contenedor
Usuario
Cuenta
Contenedor
Contenedor
Cuenta
Contenedor
Usuario

@SeoBilbao
#CW15
Estructura del
Contenedor
de GTM
CONTENEDOR
DE
GTM
E3quetas
(tags)
Ac3vadores
(triggers,
reglas)
Variables
(macros)

@SeoBilbao
#CW15
ELquetas:
¿Qué fragmentos de código vamos a
gesBonar desde GTM?

@SeoBilbao
#CW15
ELquetas en Google Tag Manager
Códigos
HTML
o
JS que integramos en nuestras webs de
manera remota desde los contenedores de GTM.
Ejs. códigos de seguimiento de analí2ca, usabilidad, conversiones, remarke2ng, …
Google
Tag
Manager

@SeoBilbao
#CW15
ELquetas en Google Tag Manager
• PLANTILLAS para servicios de Google y de otros proveedores.
• EBquetas HTML
PERSONALIZADAS para otros códigos.

@SeoBilbao
#CW15
Ejemplo:
Seguimiento
de
Google
AnalyLcs

@SeoBilbao
#CW15
EBqueta de Universal
AnalyLcs
En lugar de esto…

@SeoBilbao
#CW15
EBqueta de Universal
AnalyLcs
Configuramos esto…
Y Google Tag Manager
se encarga de generar
el código correcto.

@SeoBilbao
#CW15
AcLvadores:
¿Cómo hacemos que aparezcan los códigos
donde deseamos?

@SeoBilbao
#CW15
AcLvadores / Triggers / Reglas en v1
ü Marcan cuándo
se
debe
acLvar
(o
no) una eBqueta.
ü Por cada eLqueta como mínimo un
acLvador.
ü El bloqueo para excepciones (“gana” a la acBvación).

@SeoBilbao
#CW15
AcBvadores: Evento
+
Condiciones
EVENTO
Obligatorio
¿Qué medir?
CONDICIÓN Opcional
¿Cuándo medirlo?

@SeoBilbao
#CW15
Eventos
AutomáLcos: Salto de calidad en
AnalíBca Web y Medición de Conversiones
Ejs. Descargas PDF, clics enlaces/elementos, temporizadores…
Eventos
AutomáLcos
con pocos
clics
de
configuración.
Para todo lo demás… Eventos
Personalizados.

@SeoBilbao
#CW15
Ejemplos npicos de AcLvadores
Google
AnalyLcs:
AcBvar en PÁGINAS SEGUIMIENTO
Google
AdWords:
AcBvar SOLO en CONVERSIÓN

@SeoBilbao
#CW15
Ejemplo: Seguimiento Google AnalyBcs (en
todas las páginas que nos interese)

@SeoBilbao
#CW15
Ejemplo: Conversión de Google AdWords (en
descarga de PDF)

@SeoBilbao
#CW15
¿Qué
ocurre
si
tenemos…
… acBvadores diferentes?
… varias condiciones en acBvador?
AcLvadores vs Condiciones
/
Filtros
aukera.es/blog/estructura-­‐de-­‐google-­‐tag-­‐manager/

@SeoBilbao
#CW15
Variables:
Enriquece tus datos y OpBmiza GTM

@SeoBilbao
#CW15
{{Variables}}:
Consultas en Bempo real
Capturan
datos
en Bempo de ejecución,
para acceder a ellos donde se necesite.
Ej. Importe carrito.
El equivalente
a
variables
o
funciones
de apoyo de la mayoría de lenguajes de
programación.

@SeoBilbao
#CW15
{{Variables}}:
Almacena y ReuBliza datos
Almacena
datos: FIJOS o DINÁMICOS. En
Lempo
real (se recalculan cada vez que se
hace referencia a ellos). Ej. UA-­‐ AnalyBcs.
Comunes
al
Contenedor:
se pueden
reuLlizar en diversas eBquetas y
acBvadores, los definen y complementan.

@SeoBilbao
#CW15
{{Variables}}:
Para datos que queramos…
-­‐ ReuLlizar
o
comparLr entre eLquetas. Ej. Importe Pedido.
-­‐ Calcular
en
Lempo
real
(ej. Hostname, URL clicada, etc.)
-­‐ ULlizar
en
acLvadores:
Definen condiciones al compararse
con un valor concreto.
-­‐ ULlizar
en otras variables.
Por ej. JavaScript personalizado.

@SeoBilbao
#CW15
{{Variables}}: Ejs. Uso dentro de eLquetas
-­‐ PlanLllas
de
ELqueta:
-­‐ ELquetas
HTML
personalizadas. Por ej.:
<img height="1" width="1" style="display:none;"
alt="" src="//t.co/i/adsct?
p_id=Twitter&tw_sale_amount={{ImportePedido}}
&tw_order_quantity={{NumPedido}}" /></noscript>

@SeoBilbao
#CW15
Ejemplo de Evento AutomáBco aprovechando
Variables: Seguimiento
de
descargas
PDF

@SeoBilbao
#CW15
Evento
+
Variables = AutomaBzación + Info
No
afecta
al
Rebote
-­‐>

@SeoBilbao
#CW15
{{Variables}} Integradas vs Definidas por usuario

@SeoBilbao
#CW15
Variables
definidas
por
el
usuario:
Las 4 Variables Fundamentales en GTM
aukera.es/blog/variables-­‐clave-­‐google-­‐tag-­‐manager

@SeoBilbao
#CW15
Los
4
fantásLcos
en
Tag
Manager
JavaScript
Personalizado
Constante
Tabla
de
Consulta
Variable
de
dataLayer

@SeoBilbao
#CW15
1.
Variable
Constante
en
GTM
Almacena un valor (para modificaciones globales)
Ideal para: UA-­‐ AnalyBcs, ID Cuenta AdWords… y todos los
campos que vayan a repeBrse en eBquetas o acBvadores

@SeoBilbao
#CW15
2.
Variable
Tabla
de
Consulta
DisBntos valores dependiendo de otra variable.
aukera.es/blog/google-­‐tag-­‐manager-­‐agencias-­‐publicidad
Filtro por Hostname:
-­‐ Las pruebas a otra UA
-­‐ Evita datos de dominios
disBntos al tuyo (¡valor
predeterminado!)
Todas las
llamadas a
tu GTM (GA)
que no
procedan de
tu dominio,
irán a la
segunda UA-­‐

@SeoBilbao
#CW15
3.
Variable
de
Capa
de
datos
(dataLayer)
Recupera valores de variables enviadas
desde
código siguiendo el estándar de dataLayer de GTM.

@SeoBilbao
#CW15
Fundamental Colaboración de desarrollo …

@SeoBilbao
#CW15
Principales usos de la dataLayer
en
GTM
ü
Eventos
Personalizados: envío de evento en
código (cuando no basten eventos automáBcos)
ü Seguimiento de Ecommerce (Classic y Enhanced)
ü Seguimiento de Conversiones
(valor, id pedido…)

@SeoBilbao
#CW15
Capa
de
datos
(dataLayer)
en
GTM
Formato válido
en
cualquier
parte
de la página
(antes o después del código del contenedor de GTM):
window.dataLayer = window.dataLayer || [];
dataLayer.push({
Para cualquier lenguaje de programación.
¡Gracias @BaldrickTM!

@SeoBilbao
#CW15
dataLayer para Variable con Valor
del
Pedido
Ejemplo de dataLayer:
<script type='text/javascript'>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'revenue': 45
</script>
Ponemos el nombre de la variable tal cual, ¡y listo! J
Capturar
valor
en
VARIABLE
DE
DATALAYER

@SeoBilbao
#CW15
dataLayer para AcBvador Evento
Personalizado
<script type='text/javascript'>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'Pedido'
</script>
Para acLvadores complejos de eBquetas, para mandar datos/eventos
a Google AnalyBcs… Muy úBl en envío de transacciones (para evitar
duplicidad), en formularios sin thank you page…
Ac3vador
de
EVENTO
PERSONALIZADO

@SeoBilbao
#CW15
dataLayer de Enhanced
Ecommerce
(I)
<script type='text/javascript'>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'Pedido',
'ecommerce': {
'purchase': {
'actionField': {
'id': 'AB1234',
'revenue': 45,
'tax':3.5,
'shipping': 4.5,
'coupon': '', //ej. Valor vacío
}, // continúa en la siguiente página…
Ahorra
Lempo
y
detecta
errores
1. Mandar siempre con evento
2. Números sin comillas, cadenas con
3. Puntos para decimales
4. ¡Vigila las comillas!
support.google.com/tagmanager/answer/3002596
simoahava.com/analy3cs/ecommerce-­‐3ps-­‐google-­‐
tag-­‐manager
developers.google.com/tag-­‐manager/devguide

@SeoBilbao
#CW15
Cómo recuperar valores anidados:
'products': [{
'name': 'Pulsera Amazonas',
'id': 'PUL23',
'price': 45,
'brand': 'AR',
'category': 'Pulseras',
'variant': 'Roja',
'quantity': 1,
'coupon': '' //último sin coma
}]
}
}
});
</script>
developers.google.com/tag-­‐manager/devguide
developers.google.com/tag-­‐manager/enhanced-­‐ecommerce
ecommerce.purchase.
acBonField.revenue
dataLayer v2: El punto
(.) representa un valor
anidado:
ecommerce {
purchase {
acBonField {
revenue:
dataLayer de Enhanced
Ecommerce
(II)

@SeoBilbao
#CW15
Ej. EBqueta de AdWords con valor dinámico :)
AcBvamos en página o en evento de confirmación:
¡OJO! Solo uno de los acBvadores/eventos (página
o personalizado). Si no, duplicaremos. Leer más >

@SeoBilbao
#CW15
4.
Variable
de
JavaScript
Personalizado
Código
JavaScript insertado desde
GTM para
recopilar un dato que nos interese, uBlizamos una
función JS que devuelva un valor.

@SeoBilbao
#CW15
Ej.
Variable
de
JavaScript
Personalizado
<script type='text/javascript'>
function() {
return
document.getElementById('importe')
.innerHTML;
}
</script>

@SeoBilbao
#CW15
Publicación
y
Vista
Previa/Depuración:
¿Cómo subimos y probamos los
cambios realizados con GTM?

@SeoBilbao
#CW15
¡¡No olvidemos PUBLICARRR!!
Borrador
del
contenedor
Vista
previa
y
depuración
Publicación
Funcionamiento
de Google Tag Manager

@SeoBilbao
#CW15
Control de Versiones
y
Publicación
Los cambios van a un
borrador
de
contenedor
que debemos publicar.
Cada publicación es una
versión
que podremos
consultar y restaurar.
RESTAURAR
versión

@SeoBilbao
#CW15
Publicar o no publicar: Esa es la cuesBón

@SeoBilbao
#CW15
Probar siempre: Vista previa y depurar
Como si publicáramos pero solo
lo vemos en nuestro navegador.
Entorno
de
pruebas
ideal, revisa
la correcta ejecución de las
eBquetas antes de su publicación
definiBva.

@SeoBilbao
#CW15
Depuración: verificar
que todo funcione
Secuencia de eventos a la izquierda.
En cada
evento
vemos eBquetas, dataLayer y valores de variables
(pueden ser diferentes según el elemento al que afecten ej. Clic).

@SeoBilbao
#CW15
Google AnalyBcs: Configuraciones
y
consejos
¡Adiós a personalizaciones de código!

@SeoBilbao
#CW15
Google AnalyBcs: Algunas Configuraciones
Datos de display
Ecommerce Mejorado
Dimensiones personalizadas
Páginas virtuales

@SeoBilbao
#CW15
Google AnalyBcs: Campos
para
configurar
¡Fundamental! userID, cookieDomain, anonymizeIp, page
(páginas virtuales), referrer…
aukera.es/blog/actualizacion-­‐tag-­‐manager-­‐campos-­‐para-­‐configurar-­‐google-­‐analy3cs

@SeoBilbao
#CW15
Grupos de Contenido para Expedientes
X
• URL
real
(completa) de desBno, anterior, siguiente y de salida.
• Resolución de cuesBones de eBquetado de enlaces, falso tráfico
directo (redirecciones), errores 404, etc.
l3analy3cs.com/2014/10/07/2-­‐unusual-­‐content-­‐groups

@SeoBilbao
#CW15
Ahorra Bempo: Configura
y
duplica
1) Perfecciona
eLquetas
BASE: dimensiones personalizadas, grupos de
contenido, seguimiento mulBdominio, UserID…
2) Variables
en todos los campos posibles (modificaciones GLOBALES)
3) Copia
y
duplica
para arrastrar configuraciones

@SeoBilbao
#CW15
Ejemplo avanzado: Cambios
en
Contenido
Coexistencia de varias versiones de página, cambios en APARIENCIA.
QUÉ:
Varias versiones simultáneas en el contenedor, que se publicarán
en función de las necesidades con un par de clics.
V1
V2
CÓMO:
Contenedor GTM separado del “normal”.
Solo
recogida
en
local
Entrega
y
Recogida

@SeoBilbao
#CW15
¿Varios contenedores en un siBo web?
Es posible que en un siBo web convivan varios contenedores de GTM,
siempre que realicemos un sencillo cambio: renombrar
la
dataLayer.
<script type='text/javascript'>
window.dataLayer2 = window.dataLayer2 || [];
dataLayer.push({
'event': 'Pedido'
</script>

@SeoBilbao
#CW15

@SeoBilbao
#CW15
¿Dudas o preguntas?
Lucía Marín
lucia@aukera.es
@SeoBilbao
experimentando.es
cursotagmanager.com