Upload
lucia-marin
View
2.550
Download
1
Embed Size (px)
Citation preview
@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 [email protected] @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 [email protected] @SeoBilbao experimentando.es cursotagmanager.com