aprende a medir tu ecommerce con gtm
TRANSCRIPT
APRENDE A MEDIR TU ECOMMERCE CON GTM
DO IT YOURSELF
Quienes Somos
CARLOS RABADAacuteNANALISTA WEB
ANA BERGESANALISTA Y SEM MANAGER
Contenidos del Taller
1) Queacute es la Analiacutetica Web2) Definiendo las necesidades de medicioacuten3) Recoleccioacuten de los datos4) Implementacioacuten con Google Tag Manager
1 Queacute es la Analiacutetica Web
Toma de decisiones en la empresa
Quienes Somos
CARLOS RABADAacuteNANALISTA WEB
ANA BERGESANALISTA Y SEM MANAGER
Contenidos del Taller
1) Queacute es la Analiacutetica Web2) Definiendo las necesidades de medicioacuten3) Recoleccioacuten de los datos4) Implementacioacuten con Google Tag Manager
1 Queacute es la Analiacutetica Web
Toma de decisiones en la empresa
Contenidos del Taller
1) Queacute es la Analiacutetica Web2) Definiendo las necesidades de medicioacuten3) Recoleccioacuten de los datos4) Implementacioacuten con Google Tag Manager
1 Queacute es la Analiacutetica Web
Toma de decisiones en la empresa
1 Queacute es la Analiacutetica Web
Toma de decisiones en la empresa
Toma de decisiones en la empresa
ldquo ldquoiquestAnaliacutetica Web
Recopilacioacuten medicioacuten evaluacioacuten y explicacioacuten racional de los datos obtenidos de Internet con el propoacutesito de entender y
optimizar el uso de la paacutegina web de la organizacioacuten
Asociacioacuten Espantildeola de Analiacutetica Web
ldquo ldquoiquestAnaliacutetica Web
Anaacutelisis cualitativo y cuantitativo de su sitio web y de la competencia para impulsar una mejora
continua de la experiencia online que tienen tanto sus clientes habituales como los potenciales y que se traduce en los resultados deseados
Avinash Kaushik
Todo deberiacutea responder a un objetivohellip
hellipla analiacutetica web nos ayuda a saber si se estaacuten cumpliendo y sugerir acciones correctivas
Realizar acciones sin planificar objetivos obtener ni evaluar resultados no es analiacutetica webhellip
Analiacutetica Web
Queacute medirMeacutetricas que necesitamos segmentos de cliente doacutende y coacutemo captar esos datos1
2 Recoleccioacuten de datosImplementar estructurar datos almacenar validar y consolidar
3 Aportar valorInterpretacioacuten transformar datos en conocimiento optimizacioacuten de la estrategia predecir y anticiparnos
1 Queacute medirSMART
Specific Measurable Archivable Relevant and Timely
Objetivo Negocio Objetivo Web KPI
Incrementar ventas Incrementar 10 el ratio de conversioacuten en 1 mes Conversioacuten
Incrementar ventas Incrementar el ticket medio un 10 en un mes AOV
Incrementar la notoriedad de marca
Aumentar cada mes un 7 traacutefico maacutes con respecto al mes anterior
Var sesiones branded mes con respecto al mes anterior
1 Queacute medir
1 Queacute medir
Compra
Paso 3 de carrito
Antildeadir carrito
Consulta DisponibilidadComparar Producto
Consultar Enviacuteo y Devolucioneshellip
Visita la ficha
ldquoEl 78 de los usuarios que compraron consultaron la poliacutetica de enviacuteos y devolucionesrdquo
1 Queacute medir
Segmentacioacuten de clienteIdentifica los tipos de usuario en el sitio para extraer conclusiones maacutes precisas y definir acciones eficaces demografiacutea fuentes de traacutefico dispositivos comportamiento sitio cliente no cliente arquetipos etc
1 Queacute medirSi tuacute te comes 2 panes y yo me como solo 1 panhellip
197 (86)
1 Queacute medirDatos segmentados por tipo de cliente
1 Queacute medirDatos segmentados por tipo de cliente
Distributor Otros Partner Premium Partner VIP Partner Usuarios
Totales
Captacioacuten 4604 886 5618 8311 3426 22845
Interactuacutean 6 9 6 6 8 7
Solicitan Maacutes Info 57 90 79 90 93 82
Compra 45 8 23 9 6 16
2 Recoleccioacuten de datos
2 Recoleccioacuten de datos
VOLUMENMuestreo Analytics y significancia
VARIEDAD
CADUCIDAD
VERACIDADErrores tecnologiacutea e
implementacioacuten datos inaccesibles no modificacioacuten
datos distintas meacutetricas
Web SM APPs Fidelizacioacuten compraetc Gestores de Etiquetas
Alta caducidad de los datos
3 Aportar valor Mapa estrateacutegico Breve y conciso Suficientes y relevantes Faacutecil de obtener y a tiempo Adaptado al receptor
3 Aportar valor
3 Aportar valor
3 Aportar valor
Mes Sesiones Transacciones Ingresos
Enero 1500 102 9966
Febrero 1420 133 13260
Marzo 1450 172 15514
Abril 1445 224 17748
Mayo 1460 291 19150
3 Aportar valor
iquestPromociones disentildeo del sitio estacionalhellip
Mes Sesiones Transacciones Ingresos Var Ingresos
Ticket Medio
Enero 1500 102 9966 98
Febrero 1420 133 13260 33 100
Marzo 1450 172 15514 17 90
Abril 1445 224 17748 14 192
Mayo 1460 291 19150 8 6574
3 Aportar valor
bull Puede haber maacutes de uacutenica interpretacioacuten vaacutelida
bull Correlacioacuten VS Causalidad
bull Tiempo competencia y contexto
bull Transformar los datos en conocimiento y acciones
3 Aportar valor
2 Definiendo las necesidades de medicioacuten
iquestDe queacute depende la tasa de conversioacuten
conversiones sesiones
En el negocio online influyen muchos factores tanto la atraccioacuten del cliente como posteriormente en su retencioacuten e ldquoinvitacioacuten a la accioacutenrdquo
Asimismo debemos tener en cuenta que existen factores coyunturales temporales y de cliente que influyen en cada paso
Y finalmente debemos entender el anaacutelisis como una parte vital en la empresa
Captacioacuten de traacuteficoComposicioacuten del traacutefico branded vs not branded geneacuterico vs especiacuteficohellip Modelos de atribucioacuten
Sitio webEstructura y jerarquiacutea facilidad navegacioacuten accesibilidad legibilidad persuabilidad credibilidad confiaza info productos contacto faacutecil etc
ProductoBuen producto buen precio buenas condiciones de enviacuteo medios de pago disponibles promociones etc
Fijar las conversiones micro-conversiones y
KPIs por fases
El embudo de conversioacuten describe el proceso de compra del usuario desde que entra en nuestro sitio web hasta que realiza la compra o incluso hasta que se fideliza (antiguo AIDA de St Elmo Lewis)
Si somos capaces de trocear este proceso y establecer objetivos y KPIs a cada fase podremos identificar al detalle los puntos de mejora
Captacioacuten
Navegacioacuten
Reflexioacuten
Compra
Fidelizacioacuten
El embudo de conversioacuten al detallebull Captacioacuten el usuario visita el sitio el objetivo es aumentar el
traacutefico en especial el traacutefico nuevobull Navegacioacuten el usuario interacciona con el sitio el objetivo es
que el usuario logre encontrar lo que necesita Mejorar la UX buenos resultados de buacutesqueda buena navegabilidad etc
bull Reflexioacuten el usuario compara productos entre tiendas el objetivo conseguir que el usuario inicie el proceso de compra Nos centraremos en reforzar la decisioacuten de compra mediante valoraciones de productos opiniones detalles del productohellip
bull Compra el usuario finaliza una compra el objetivo es conseguir que el usuario compre Proceso de compra raacutepido eficaz registro corto no obligatorio recuperacioacuten de carritoshellip
bull Fidelizacioacuten el usuario vuelve al sitio web el objetivo es conseguir traacutefico y compras recurrentes Promociones estrategia newsletter redes socialeshellip
3 Praacutectica analizando un ecommerce real
Elabora un listado de las funcionalidades que mediriacuteas dentro de zalandoes Piensa en queacute puede ayudarte medir cada una y a queacute fase del embudo corresponden
Praacutectica
Praacutectica
4 Recoleccioacuten de los datos
Recoleccioacuten de datos
Analytics es la herramienta de analiacutetica web maacutes extendida en Internet Aunque es una opcioacuten excepcional a la hora de medir un site padece los mismos inconvenientes que la mayoriacutea de la competencia
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
ldquo ldquoiquestAnaliacutetica Web
Anaacutelisis cualitativo y cuantitativo de su sitio web y de la competencia para impulsar una mejora
continua de la experiencia online que tienen tanto sus clientes habituales como los potenciales y que se traduce en los resultados deseados
Avinash Kaushik
Todo deberiacutea responder a un objetivohellip
hellipla analiacutetica web nos ayuda a saber si se estaacuten cumpliendo y sugerir acciones correctivas
Realizar acciones sin planificar objetivos obtener ni evaluar resultados no es analiacutetica webhellip
Analiacutetica Web
Queacute medirMeacutetricas que necesitamos segmentos de cliente doacutende y coacutemo captar esos datos1
2 Recoleccioacuten de datosImplementar estructurar datos almacenar validar y consolidar
3 Aportar valorInterpretacioacuten transformar datos en conocimiento optimizacioacuten de la estrategia predecir y anticiparnos
1 Queacute medirSMART
Specific Measurable Archivable Relevant and Timely
Objetivo Negocio Objetivo Web KPI
Incrementar ventas Incrementar 10 el ratio de conversioacuten en 1 mes Conversioacuten
Incrementar ventas Incrementar el ticket medio un 10 en un mes AOV
Incrementar la notoriedad de marca
Aumentar cada mes un 7 traacutefico maacutes con respecto al mes anterior
Var sesiones branded mes con respecto al mes anterior
1 Queacute medir
1 Queacute medir
Compra
Paso 3 de carrito
Antildeadir carrito
Consulta DisponibilidadComparar Producto
Consultar Enviacuteo y Devolucioneshellip
Visita la ficha
ldquoEl 78 de los usuarios que compraron consultaron la poliacutetica de enviacuteos y devolucionesrdquo
1 Queacute medir
Segmentacioacuten de clienteIdentifica los tipos de usuario en el sitio para extraer conclusiones maacutes precisas y definir acciones eficaces demografiacutea fuentes de traacutefico dispositivos comportamiento sitio cliente no cliente arquetipos etc
1 Queacute medirSi tuacute te comes 2 panes y yo me como solo 1 panhellip
197 (86)
1 Queacute medirDatos segmentados por tipo de cliente
1 Queacute medirDatos segmentados por tipo de cliente
Distributor Otros Partner Premium Partner VIP Partner Usuarios
Totales
Captacioacuten 4604 886 5618 8311 3426 22845
Interactuacutean 6 9 6 6 8 7
Solicitan Maacutes Info 57 90 79 90 93 82
Compra 45 8 23 9 6 16
2 Recoleccioacuten de datos
2 Recoleccioacuten de datos
VOLUMENMuestreo Analytics y significancia
VARIEDAD
CADUCIDAD
VERACIDADErrores tecnologiacutea e
implementacioacuten datos inaccesibles no modificacioacuten
datos distintas meacutetricas
Web SM APPs Fidelizacioacuten compraetc Gestores de Etiquetas
Alta caducidad de los datos
3 Aportar valor Mapa estrateacutegico Breve y conciso Suficientes y relevantes Faacutecil de obtener y a tiempo Adaptado al receptor
3 Aportar valor
3 Aportar valor
3 Aportar valor
Mes Sesiones Transacciones Ingresos
Enero 1500 102 9966
Febrero 1420 133 13260
Marzo 1450 172 15514
Abril 1445 224 17748
Mayo 1460 291 19150
3 Aportar valor
iquestPromociones disentildeo del sitio estacionalhellip
Mes Sesiones Transacciones Ingresos Var Ingresos
Ticket Medio
Enero 1500 102 9966 98
Febrero 1420 133 13260 33 100
Marzo 1450 172 15514 17 90
Abril 1445 224 17748 14 192
Mayo 1460 291 19150 8 6574
3 Aportar valor
bull Puede haber maacutes de uacutenica interpretacioacuten vaacutelida
bull Correlacioacuten VS Causalidad
bull Tiempo competencia y contexto
bull Transformar los datos en conocimiento y acciones
3 Aportar valor
2 Definiendo las necesidades de medicioacuten
iquestDe queacute depende la tasa de conversioacuten
conversiones sesiones
En el negocio online influyen muchos factores tanto la atraccioacuten del cliente como posteriormente en su retencioacuten e ldquoinvitacioacuten a la accioacutenrdquo
Asimismo debemos tener en cuenta que existen factores coyunturales temporales y de cliente que influyen en cada paso
Y finalmente debemos entender el anaacutelisis como una parte vital en la empresa
Captacioacuten de traacuteficoComposicioacuten del traacutefico branded vs not branded geneacuterico vs especiacuteficohellip Modelos de atribucioacuten
Sitio webEstructura y jerarquiacutea facilidad navegacioacuten accesibilidad legibilidad persuabilidad credibilidad confiaza info productos contacto faacutecil etc
ProductoBuen producto buen precio buenas condiciones de enviacuteo medios de pago disponibles promociones etc
Fijar las conversiones micro-conversiones y
KPIs por fases
El embudo de conversioacuten describe el proceso de compra del usuario desde que entra en nuestro sitio web hasta que realiza la compra o incluso hasta que se fideliza (antiguo AIDA de St Elmo Lewis)
Si somos capaces de trocear este proceso y establecer objetivos y KPIs a cada fase podremos identificar al detalle los puntos de mejora
Captacioacuten
Navegacioacuten
Reflexioacuten
Compra
Fidelizacioacuten
El embudo de conversioacuten al detallebull Captacioacuten el usuario visita el sitio el objetivo es aumentar el
traacutefico en especial el traacutefico nuevobull Navegacioacuten el usuario interacciona con el sitio el objetivo es
que el usuario logre encontrar lo que necesita Mejorar la UX buenos resultados de buacutesqueda buena navegabilidad etc
bull Reflexioacuten el usuario compara productos entre tiendas el objetivo conseguir que el usuario inicie el proceso de compra Nos centraremos en reforzar la decisioacuten de compra mediante valoraciones de productos opiniones detalles del productohellip
bull Compra el usuario finaliza una compra el objetivo es conseguir que el usuario compre Proceso de compra raacutepido eficaz registro corto no obligatorio recuperacioacuten de carritoshellip
bull Fidelizacioacuten el usuario vuelve al sitio web el objetivo es conseguir traacutefico y compras recurrentes Promociones estrategia newsletter redes socialeshellip
3 Praacutectica analizando un ecommerce real
Elabora un listado de las funcionalidades que mediriacuteas dentro de zalandoes Piensa en queacute puede ayudarte medir cada una y a queacute fase del embudo corresponden
Praacutectica
Praacutectica
4 Recoleccioacuten de los datos
Recoleccioacuten de datos
Analytics es la herramienta de analiacutetica web maacutes extendida en Internet Aunque es una opcioacuten excepcional a la hora de medir un site padece los mismos inconvenientes que la mayoriacutea de la competencia
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Todo deberiacutea responder a un objetivohellip
hellipla analiacutetica web nos ayuda a saber si se estaacuten cumpliendo y sugerir acciones correctivas
Realizar acciones sin planificar objetivos obtener ni evaluar resultados no es analiacutetica webhellip
Analiacutetica Web
Queacute medirMeacutetricas que necesitamos segmentos de cliente doacutende y coacutemo captar esos datos1
2 Recoleccioacuten de datosImplementar estructurar datos almacenar validar y consolidar
3 Aportar valorInterpretacioacuten transformar datos en conocimiento optimizacioacuten de la estrategia predecir y anticiparnos
1 Queacute medirSMART
Specific Measurable Archivable Relevant and Timely
Objetivo Negocio Objetivo Web KPI
Incrementar ventas Incrementar 10 el ratio de conversioacuten en 1 mes Conversioacuten
Incrementar ventas Incrementar el ticket medio un 10 en un mes AOV
Incrementar la notoriedad de marca
Aumentar cada mes un 7 traacutefico maacutes con respecto al mes anterior
Var sesiones branded mes con respecto al mes anterior
1 Queacute medir
1 Queacute medir
Compra
Paso 3 de carrito
Antildeadir carrito
Consulta DisponibilidadComparar Producto
Consultar Enviacuteo y Devolucioneshellip
Visita la ficha
ldquoEl 78 de los usuarios que compraron consultaron la poliacutetica de enviacuteos y devolucionesrdquo
1 Queacute medir
Segmentacioacuten de clienteIdentifica los tipos de usuario en el sitio para extraer conclusiones maacutes precisas y definir acciones eficaces demografiacutea fuentes de traacutefico dispositivos comportamiento sitio cliente no cliente arquetipos etc
1 Queacute medirSi tuacute te comes 2 panes y yo me como solo 1 panhellip
197 (86)
1 Queacute medirDatos segmentados por tipo de cliente
1 Queacute medirDatos segmentados por tipo de cliente
Distributor Otros Partner Premium Partner VIP Partner Usuarios
Totales
Captacioacuten 4604 886 5618 8311 3426 22845
Interactuacutean 6 9 6 6 8 7
Solicitan Maacutes Info 57 90 79 90 93 82
Compra 45 8 23 9 6 16
2 Recoleccioacuten de datos
2 Recoleccioacuten de datos
VOLUMENMuestreo Analytics y significancia
VARIEDAD
CADUCIDAD
VERACIDADErrores tecnologiacutea e
implementacioacuten datos inaccesibles no modificacioacuten
datos distintas meacutetricas
Web SM APPs Fidelizacioacuten compraetc Gestores de Etiquetas
Alta caducidad de los datos
3 Aportar valor Mapa estrateacutegico Breve y conciso Suficientes y relevantes Faacutecil de obtener y a tiempo Adaptado al receptor
3 Aportar valor
3 Aportar valor
3 Aportar valor
Mes Sesiones Transacciones Ingresos
Enero 1500 102 9966
Febrero 1420 133 13260
Marzo 1450 172 15514
Abril 1445 224 17748
Mayo 1460 291 19150
3 Aportar valor
iquestPromociones disentildeo del sitio estacionalhellip
Mes Sesiones Transacciones Ingresos Var Ingresos
Ticket Medio
Enero 1500 102 9966 98
Febrero 1420 133 13260 33 100
Marzo 1450 172 15514 17 90
Abril 1445 224 17748 14 192
Mayo 1460 291 19150 8 6574
3 Aportar valor
bull Puede haber maacutes de uacutenica interpretacioacuten vaacutelida
bull Correlacioacuten VS Causalidad
bull Tiempo competencia y contexto
bull Transformar los datos en conocimiento y acciones
3 Aportar valor
2 Definiendo las necesidades de medicioacuten
iquestDe queacute depende la tasa de conversioacuten
conversiones sesiones
En el negocio online influyen muchos factores tanto la atraccioacuten del cliente como posteriormente en su retencioacuten e ldquoinvitacioacuten a la accioacutenrdquo
Asimismo debemos tener en cuenta que existen factores coyunturales temporales y de cliente que influyen en cada paso
Y finalmente debemos entender el anaacutelisis como una parte vital en la empresa
Captacioacuten de traacuteficoComposicioacuten del traacutefico branded vs not branded geneacuterico vs especiacuteficohellip Modelos de atribucioacuten
Sitio webEstructura y jerarquiacutea facilidad navegacioacuten accesibilidad legibilidad persuabilidad credibilidad confiaza info productos contacto faacutecil etc
ProductoBuen producto buen precio buenas condiciones de enviacuteo medios de pago disponibles promociones etc
Fijar las conversiones micro-conversiones y
KPIs por fases
El embudo de conversioacuten describe el proceso de compra del usuario desde que entra en nuestro sitio web hasta que realiza la compra o incluso hasta que se fideliza (antiguo AIDA de St Elmo Lewis)
Si somos capaces de trocear este proceso y establecer objetivos y KPIs a cada fase podremos identificar al detalle los puntos de mejora
Captacioacuten
Navegacioacuten
Reflexioacuten
Compra
Fidelizacioacuten
El embudo de conversioacuten al detallebull Captacioacuten el usuario visita el sitio el objetivo es aumentar el
traacutefico en especial el traacutefico nuevobull Navegacioacuten el usuario interacciona con el sitio el objetivo es
que el usuario logre encontrar lo que necesita Mejorar la UX buenos resultados de buacutesqueda buena navegabilidad etc
bull Reflexioacuten el usuario compara productos entre tiendas el objetivo conseguir que el usuario inicie el proceso de compra Nos centraremos en reforzar la decisioacuten de compra mediante valoraciones de productos opiniones detalles del productohellip
bull Compra el usuario finaliza una compra el objetivo es conseguir que el usuario compre Proceso de compra raacutepido eficaz registro corto no obligatorio recuperacioacuten de carritoshellip
bull Fidelizacioacuten el usuario vuelve al sitio web el objetivo es conseguir traacutefico y compras recurrentes Promociones estrategia newsletter redes socialeshellip
3 Praacutectica analizando un ecommerce real
Elabora un listado de las funcionalidades que mediriacuteas dentro de zalandoes Piensa en queacute puede ayudarte medir cada una y a queacute fase del embudo corresponden
Praacutectica
Praacutectica
4 Recoleccioacuten de los datos
Recoleccioacuten de datos
Analytics es la herramienta de analiacutetica web maacutes extendida en Internet Aunque es una opcioacuten excepcional a la hora de medir un site padece los mismos inconvenientes que la mayoriacutea de la competencia
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Realizar acciones sin planificar objetivos obtener ni evaluar resultados no es analiacutetica webhellip
Analiacutetica Web
Queacute medirMeacutetricas que necesitamos segmentos de cliente doacutende y coacutemo captar esos datos1
2 Recoleccioacuten de datosImplementar estructurar datos almacenar validar y consolidar
3 Aportar valorInterpretacioacuten transformar datos en conocimiento optimizacioacuten de la estrategia predecir y anticiparnos
1 Queacute medirSMART
Specific Measurable Archivable Relevant and Timely
Objetivo Negocio Objetivo Web KPI
Incrementar ventas Incrementar 10 el ratio de conversioacuten en 1 mes Conversioacuten
Incrementar ventas Incrementar el ticket medio un 10 en un mes AOV
Incrementar la notoriedad de marca
Aumentar cada mes un 7 traacutefico maacutes con respecto al mes anterior
Var sesiones branded mes con respecto al mes anterior
1 Queacute medir
1 Queacute medir
Compra
Paso 3 de carrito
Antildeadir carrito
Consulta DisponibilidadComparar Producto
Consultar Enviacuteo y Devolucioneshellip
Visita la ficha
ldquoEl 78 de los usuarios que compraron consultaron la poliacutetica de enviacuteos y devolucionesrdquo
1 Queacute medir
Segmentacioacuten de clienteIdentifica los tipos de usuario en el sitio para extraer conclusiones maacutes precisas y definir acciones eficaces demografiacutea fuentes de traacutefico dispositivos comportamiento sitio cliente no cliente arquetipos etc
1 Queacute medirSi tuacute te comes 2 panes y yo me como solo 1 panhellip
197 (86)
1 Queacute medirDatos segmentados por tipo de cliente
1 Queacute medirDatos segmentados por tipo de cliente
Distributor Otros Partner Premium Partner VIP Partner Usuarios
Totales
Captacioacuten 4604 886 5618 8311 3426 22845
Interactuacutean 6 9 6 6 8 7
Solicitan Maacutes Info 57 90 79 90 93 82
Compra 45 8 23 9 6 16
2 Recoleccioacuten de datos
2 Recoleccioacuten de datos
VOLUMENMuestreo Analytics y significancia
VARIEDAD
CADUCIDAD
VERACIDADErrores tecnologiacutea e
implementacioacuten datos inaccesibles no modificacioacuten
datos distintas meacutetricas
Web SM APPs Fidelizacioacuten compraetc Gestores de Etiquetas
Alta caducidad de los datos
3 Aportar valor Mapa estrateacutegico Breve y conciso Suficientes y relevantes Faacutecil de obtener y a tiempo Adaptado al receptor
3 Aportar valor
3 Aportar valor
3 Aportar valor
Mes Sesiones Transacciones Ingresos
Enero 1500 102 9966
Febrero 1420 133 13260
Marzo 1450 172 15514
Abril 1445 224 17748
Mayo 1460 291 19150
3 Aportar valor
iquestPromociones disentildeo del sitio estacionalhellip
Mes Sesiones Transacciones Ingresos Var Ingresos
Ticket Medio
Enero 1500 102 9966 98
Febrero 1420 133 13260 33 100
Marzo 1450 172 15514 17 90
Abril 1445 224 17748 14 192
Mayo 1460 291 19150 8 6574
3 Aportar valor
bull Puede haber maacutes de uacutenica interpretacioacuten vaacutelida
bull Correlacioacuten VS Causalidad
bull Tiempo competencia y contexto
bull Transformar los datos en conocimiento y acciones
3 Aportar valor
2 Definiendo las necesidades de medicioacuten
iquestDe queacute depende la tasa de conversioacuten
conversiones sesiones
En el negocio online influyen muchos factores tanto la atraccioacuten del cliente como posteriormente en su retencioacuten e ldquoinvitacioacuten a la accioacutenrdquo
Asimismo debemos tener en cuenta que existen factores coyunturales temporales y de cliente que influyen en cada paso
Y finalmente debemos entender el anaacutelisis como una parte vital en la empresa
Captacioacuten de traacuteficoComposicioacuten del traacutefico branded vs not branded geneacuterico vs especiacuteficohellip Modelos de atribucioacuten
Sitio webEstructura y jerarquiacutea facilidad navegacioacuten accesibilidad legibilidad persuabilidad credibilidad confiaza info productos contacto faacutecil etc
ProductoBuen producto buen precio buenas condiciones de enviacuteo medios de pago disponibles promociones etc
Fijar las conversiones micro-conversiones y
KPIs por fases
El embudo de conversioacuten describe el proceso de compra del usuario desde que entra en nuestro sitio web hasta que realiza la compra o incluso hasta que se fideliza (antiguo AIDA de St Elmo Lewis)
Si somos capaces de trocear este proceso y establecer objetivos y KPIs a cada fase podremos identificar al detalle los puntos de mejora
Captacioacuten
Navegacioacuten
Reflexioacuten
Compra
Fidelizacioacuten
El embudo de conversioacuten al detallebull Captacioacuten el usuario visita el sitio el objetivo es aumentar el
traacutefico en especial el traacutefico nuevobull Navegacioacuten el usuario interacciona con el sitio el objetivo es
que el usuario logre encontrar lo que necesita Mejorar la UX buenos resultados de buacutesqueda buena navegabilidad etc
bull Reflexioacuten el usuario compara productos entre tiendas el objetivo conseguir que el usuario inicie el proceso de compra Nos centraremos en reforzar la decisioacuten de compra mediante valoraciones de productos opiniones detalles del productohellip
bull Compra el usuario finaliza una compra el objetivo es conseguir que el usuario compre Proceso de compra raacutepido eficaz registro corto no obligatorio recuperacioacuten de carritoshellip
bull Fidelizacioacuten el usuario vuelve al sitio web el objetivo es conseguir traacutefico y compras recurrentes Promociones estrategia newsletter redes socialeshellip
3 Praacutectica analizando un ecommerce real
Elabora un listado de las funcionalidades que mediriacuteas dentro de zalandoes Piensa en queacute puede ayudarte medir cada una y a queacute fase del embudo corresponden
Praacutectica
Praacutectica
4 Recoleccioacuten de los datos
Recoleccioacuten de datos
Analytics es la herramienta de analiacutetica web maacutes extendida en Internet Aunque es una opcioacuten excepcional a la hora de medir un site padece los mismos inconvenientes que la mayoriacutea de la competencia
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Analiacutetica Web
Queacute medirMeacutetricas que necesitamos segmentos de cliente doacutende y coacutemo captar esos datos1
2 Recoleccioacuten de datosImplementar estructurar datos almacenar validar y consolidar
3 Aportar valorInterpretacioacuten transformar datos en conocimiento optimizacioacuten de la estrategia predecir y anticiparnos
1 Queacute medirSMART
Specific Measurable Archivable Relevant and Timely
Objetivo Negocio Objetivo Web KPI
Incrementar ventas Incrementar 10 el ratio de conversioacuten en 1 mes Conversioacuten
Incrementar ventas Incrementar el ticket medio un 10 en un mes AOV
Incrementar la notoriedad de marca
Aumentar cada mes un 7 traacutefico maacutes con respecto al mes anterior
Var sesiones branded mes con respecto al mes anterior
1 Queacute medir
1 Queacute medir
Compra
Paso 3 de carrito
Antildeadir carrito
Consulta DisponibilidadComparar Producto
Consultar Enviacuteo y Devolucioneshellip
Visita la ficha
ldquoEl 78 de los usuarios que compraron consultaron la poliacutetica de enviacuteos y devolucionesrdquo
1 Queacute medir
Segmentacioacuten de clienteIdentifica los tipos de usuario en el sitio para extraer conclusiones maacutes precisas y definir acciones eficaces demografiacutea fuentes de traacutefico dispositivos comportamiento sitio cliente no cliente arquetipos etc
1 Queacute medirSi tuacute te comes 2 panes y yo me como solo 1 panhellip
197 (86)
1 Queacute medirDatos segmentados por tipo de cliente
1 Queacute medirDatos segmentados por tipo de cliente
Distributor Otros Partner Premium Partner VIP Partner Usuarios
Totales
Captacioacuten 4604 886 5618 8311 3426 22845
Interactuacutean 6 9 6 6 8 7
Solicitan Maacutes Info 57 90 79 90 93 82
Compra 45 8 23 9 6 16
2 Recoleccioacuten de datos
2 Recoleccioacuten de datos
VOLUMENMuestreo Analytics y significancia
VARIEDAD
CADUCIDAD
VERACIDADErrores tecnologiacutea e
implementacioacuten datos inaccesibles no modificacioacuten
datos distintas meacutetricas
Web SM APPs Fidelizacioacuten compraetc Gestores de Etiquetas
Alta caducidad de los datos
3 Aportar valor Mapa estrateacutegico Breve y conciso Suficientes y relevantes Faacutecil de obtener y a tiempo Adaptado al receptor
3 Aportar valor
3 Aportar valor
3 Aportar valor
Mes Sesiones Transacciones Ingresos
Enero 1500 102 9966
Febrero 1420 133 13260
Marzo 1450 172 15514
Abril 1445 224 17748
Mayo 1460 291 19150
3 Aportar valor
iquestPromociones disentildeo del sitio estacionalhellip
Mes Sesiones Transacciones Ingresos Var Ingresos
Ticket Medio
Enero 1500 102 9966 98
Febrero 1420 133 13260 33 100
Marzo 1450 172 15514 17 90
Abril 1445 224 17748 14 192
Mayo 1460 291 19150 8 6574
3 Aportar valor
bull Puede haber maacutes de uacutenica interpretacioacuten vaacutelida
bull Correlacioacuten VS Causalidad
bull Tiempo competencia y contexto
bull Transformar los datos en conocimiento y acciones
3 Aportar valor
2 Definiendo las necesidades de medicioacuten
iquestDe queacute depende la tasa de conversioacuten
conversiones sesiones
En el negocio online influyen muchos factores tanto la atraccioacuten del cliente como posteriormente en su retencioacuten e ldquoinvitacioacuten a la accioacutenrdquo
Asimismo debemos tener en cuenta que existen factores coyunturales temporales y de cliente que influyen en cada paso
Y finalmente debemos entender el anaacutelisis como una parte vital en la empresa
Captacioacuten de traacuteficoComposicioacuten del traacutefico branded vs not branded geneacuterico vs especiacuteficohellip Modelos de atribucioacuten
Sitio webEstructura y jerarquiacutea facilidad navegacioacuten accesibilidad legibilidad persuabilidad credibilidad confiaza info productos contacto faacutecil etc
ProductoBuen producto buen precio buenas condiciones de enviacuteo medios de pago disponibles promociones etc
Fijar las conversiones micro-conversiones y
KPIs por fases
El embudo de conversioacuten describe el proceso de compra del usuario desde que entra en nuestro sitio web hasta que realiza la compra o incluso hasta que se fideliza (antiguo AIDA de St Elmo Lewis)
Si somos capaces de trocear este proceso y establecer objetivos y KPIs a cada fase podremos identificar al detalle los puntos de mejora
Captacioacuten
Navegacioacuten
Reflexioacuten
Compra
Fidelizacioacuten
El embudo de conversioacuten al detallebull Captacioacuten el usuario visita el sitio el objetivo es aumentar el
traacutefico en especial el traacutefico nuevobull Navegacioacuten el usuario interacciona con el sitio el objetivo es
que el usuario logre encontrar lo que necesita Mejorar la UX buenos resultados de buacutesqueda buena navegabilidad etc
bull Reflexioacuten el usuario compara productos entre tiendas el objetivo conseguir que el usuario inicie el proceso de compra Nos centraremos en reforzar la decisioacuten de compra mediante valoraciones de productos opiniones detalles del productohellip
bull Compra el usuario finaliza una compra el objetivo es conseguir que el usuario compre Proceso de compra raacutepido eficaz registro corto no obligatorio recuperacioacuten de carritoshellip
bull Fidelizacioacuten el usuario vuelve al sitio web el objetivo es conseguir traacutefico y compras recurrentes Promociones estrategia newsletter redes socialeshellip
3 Praacutectica analizando un ecommerce real
Elabora un listado de las funcionalidades que mediriacuteas dentro de zalandoes Piensa en queacute puede ayudarte medir cada una y a queacute fase del embudo corresponden
Praacutectica
Praacutectica
4 Recoleccioacuten de los datos
Recoleccioacuten de datos
Analytics es la herramienta de analiacutetica web maacutes extendida en Internet Aunque es una opcioacuten excepcional a la hora de medir un site padece los mismos inconvenientes que la mayoriacutea de la competencia
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Queacute medirMeacutetricas que necesitamos segmentos de cliente doacutende y coacutemo captar esos datos1
2 Recoleccioacuten de datosImplementar estructurar datos almacenar validar y consolidar
3 Aportar valorInterpretacioacuten transformar datos en conocimiento optimizacioacuten de la estrategia predecir y anticiparnos
1 Queacute medirSMART
Specific Measurable Archivable Relevant and Timely
Objetivo Negocio Objetivo Web KPI
Incrementar ventas Incrementar 10 el ratio de conversioacuten en 1 mes Conversioacuten
Incrementar ventas Incrementar el ticket medio un 10 en un mes AOV
Incrementar la notoriedad de marca
Aumentar cada mes un 7 traacutefico maacutes con respecto al mes anterior
Var sesiones branded mes con respecto al mes anterior
1 Queacute medir
1 Queacute medir
Compra
Paso 3 de carrito
Antildeadir carrito
Consulta DisponibilidadComparar Producto
Consultar Enviacuteo y Devolucioneshellip
Visita la ficha
ldquoEl 78 de los usuarios que compraron consultaron la poliacutetica de enviacuteos y devolucionesrdquo
1 Queacute medir
Segmentacioacuten de clienteIdentifica los tipos de usuario en el sitio para extraer conclusiones maacutes precisas y definir acciones eficaces demografiacutea fuentes de traacutefico dispositivos comportamiento sitio cliente no cliente arquetipos etc
1 Queacute medirSi tuacute te comes 2 panes y yo me como solo 1 panhellip
197 (86)
1 Queacute medirDatos segmentados por tipo de cliente
1 Queacute medirDatos segmentados por tipo de cliente
Distributor Otros Partner Premium Partner VIP Partner Usuarios
Totales
Captacioacuten 4604 886 5618 8311 3426 22845
Interactuacutean 6 9 6 6 8 7
Solicitan Maacutes Info 57 90 79 90 93 82
Compra 45 8 23 9 6 16
2 Recoleccioacuten de datos
2 Recoleccioacuten de datos
VOLUMENMuestreo Analytics y significancia
VARIEDAD
CADUCIDAD
VERACIDADErrores tecnologiacutea e
implementacioacuten datos inaccesibles no modificacioacuten
datos distintas meacutetricas
Web SM APPs Fidelizacioacuten compraetc Gestores de Etiquetas
Alta caducidad de los datos
3 Aportar valor Mapa estrateacutegico Breve y conciso Suficientes y relevantes Faacutecil de obtener y a tiempo Adaptado al receptor
3 Aportar valor
3 Aportar valor
3 Aportar valor
Mes Sesiones Transacciones Ingresos
Enero 1500 102 9966
Febrero 1420 133 13260
Marzo 1450 172 15514
Abril 1445 224 17748
Mayo 1460 291 19150
3 Aportar valor
iquestPromociones disentildeo del sitio estacionalhellip
Mes Sesiones Transacciones Ingresos Var Ingresos
Ticket Medio
Enero 1500 102 9966 98
Febrero 1420 133 13260 33 100
Marzo 1450 172 15514 17 90
Abril 1445 224 17748 14 192
Mayo 1460 291 19150 8 6574
3 Aportar valor
bull Puede haber maacutes de uacutenica interpretacioacuten vaacutelida
bull Correlacioacuten VS Causalidad
bull Tiempo competencia y contexto
bull Transformar los datos en conocimiento y acciones
3 Aportar valor
2 Definiendo las necesidades de medicioacuten
iquestDe queacute depende la tasa de conversioacuten
conversiones sesiones
En el negocio online influyen muchos factores tanto la atraccioacuten del cliente como posteriormente en su retencioacuten e ldquoinvitacioacuten a la accioacutenrdquo
Asimismo debemos tener en cuenta que existen factores coyunturales temporales y de cliente que influyen en cada paso
Y finalmente debemos entender el anaacutelisis como una parte vital en la empresa
Captacioacuten de traacuteficoComposicioacuten del traacutefico branded vs not branded geneacuterico vs especiacuteficohellip Modelos de atribucioacuten
Sitio webEstructura y jerarquiacutea facilidad navegacioacuten accesibilidad legibilidad persuabilidad credibilidad confiaza info productos contacto faacutecil etc
ProductoBuen producto buen precio buenas condiciones de enviacuteo medios de pago disponibles promociones etc
Fijar las conversiones micro-conversiones y
KPIs por fases
El embudo de conversioacuten describe el proceso de compra del usuario desde que entra en nuestro sitio web hasta que realiza la compra o incluso hasta que se fideliza (antiguo AIDA de St Elmo Lewis)
Si somos capaces de trocear este proceso y establecer objetivos y KPIs a cada fase podremos identificar al detalle los puntos de mejora
Captacioacuten
Navegacioacuten
Reflexioacuten
Compra
Fidelizacioacuten
El embudo de conversioacuten al detallebull Captacioacuten el usuario visita el sitio el objetivo es aumentar el
traacutefico en especial el traacutefico nuevobull Navegacioacuten el usuario interacciona con el sitio el objetivo es
que el usuario logre encontrar lo que necesita Mejorar la UX buenos resultados de buacutesqueda buena navegabilidad etc
bull Reflexioacuten el usuario compara productos entre tiendas el objetivo conseguir que el usuario inicie el proceso de compra Nos centraremos en reforzar la decisioacuten de compra mediante valoraciones de productos opiniones detalles del productohellip
bull Compra el usuario finaliza una compra el objetivo es conseguir que el usuario compre Proceso de compra raacutepido eficaz registro corto no obligatorio recuperacioacuten de carritoshellip
bull Fidelizacioacuten el usuario vuelve al sitio web el objetivo es conseguir traacutefico y compras recurrentes Promociones estrategia newsletter redes socialeshellip
3 Praacutectica analizando un ecommerce real
Elabora un listado de las funcionalidades que mediriacuteas dentro de zalandoes Piensa en queacute puede ayudarte medir cada una y a queacute fase del embudo corresponden
Praacutectica
Praacutectica
4 Recoleccioacuten de los datos
Recoleccioacuten de datos
Analytics es la herramienta de analiacutetica web maacutes extendida en Internet Aunque es una opcioacuten excepcional a la hora de medir un site padece los mismos inconvenientes que la mayoriacutea de la competencia
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
1 Queacute medirSMART
Specific Measurable Archivable Relevant and Timely
Objetivo Negocio Objetivo Web KPI
Incrementar ventas Incrementar 10 el ratio de conversioacuten en 1 mes Conversioacuten
Incrementar ventas Incrementar el ticket medio un 10 en un mes AOV
Incrementar la notoriedad de marca
Aumentar cada mes un 7 traacutefico maacutes con respecto al mes anterior
Var sesiones branded mes con respecto al mes anterior
1 Queacute medir
1 Queacute medir
Compra
Paso 3 de carrito
Antildeadir carrito
Consulta DisponibilidadComparar Producto
Consultar Enviacuteo y Devolucioneshellip
Visita la ficha
ldquoEl 78 de los usuarios que compraron consultaron la poliacutetica de enviacuteos y devolucionesrdquo
1 Queacute medir
Segmentacioacuten de clienteIdentifica los tipos de usuario en el sitio para extraer conclusiones maacutes precisas y definir acciones eficaces demografiacutea fuentes de traacutefico dispositivos comportamiento sitio cliente no cliente arquetipos etc
1 Queacute medirSi tuacute te comes 2 panes y yo me como solo 1 panhellip
197 (86)
1 Queacute medirDatos segmentados por tipo de cliente
1 Queacute medirDatos segmentados por tipo de cliente
Distributor Otros Partner Premium Partner VIP Partner Usuarios
Totales
Captacioacuten 4604 886 5618 8311 3426 22845
Interactuacutean 6 9 6 6 8 7
Solicitan Maacutes Info 57 90 79 90 93 82
Compra 45 8 23 9 6 16
2 Recoleccioacuten de datos
2 Recoleccioacuten de datos
VOLUMENMuestreo Analytics y significancia
VARIEDAD
CADUCIDAD
VERACIDADErrores tecnologiacutea e
implementacioacuten datos inaccesibles no modificacioacuten
datos distintas meacutetricas
Web SM APPs Fidelizacioacuten compraetc Gestores de Etiquetas
Alta caducidad de los datos
3 Aportar valor Mapa estrateacutegico Breve y conciso Suficientes y relevantes Faacutecil de obtener y a tiempo Adaptado al receptor
3 Aportar valor
3 Aportar valor
3 Aportar valor
Mes Sesiones Transacciones Ingresos
Enero 1500 102 9966
Febrero 1420 133 13260
Marzo 1450 172 15514
Abril 1445 224 17748
Mayo 1460 291 19150
3 Aportar valor
iquestPromociones disentildeo del sitio estacionalhellip
Mes Sesiones Transacciones Ingresos Var Ingresos
Ticket Medio
Enero 1500 102 9966 98
Febrero 1420 133 13260 33 100
Marzo 1450 172 15514 17 90
Abril 1445 224 17748 14 192
Mayo 1460 291 19150 8 6574
3 Aportar valor
bull Puede haber maacutes de uacutenica interpretacioacuten vaacutelida
bull Correlacioacuten VS Causalidad
bull Tiempo competencia y contexto
bull Transformar los datos en conocimiento y acciones
3 Aportar valor
2 Definiendo las necesidades de medicioacuten
iquestDe queacute depende la tasa de conversioacuten
conversiones sesiones
En el negocio online influyen muchos factores tanto la atraccioacuten del cliente como posteriormente en su retencioacuten e ldquoinvitacioacuten a la accioacutenrdquo
Asimismo debemos tener en cuenta que existen factores coyunturales temporales y de cliente que influyen en cada paso
Y finalmente debemos entender el anaacutelisis como una parte vital en la empresa
Captacioacuten de traacuteficoComposicioacuten del traacutefico branded vs not branded geneacuterico vs especiacuteficohellip Modelos de atribucioacuten
Sitio webEstructura y jerarquiacutea facilidad navegacioacuten accesibilidad legibilidad persuabilidad credibilidad confiaza info productos contacto faacutecil etc
ProductoBuen producto buen precio buenas condiciones de enviacuteo medios de pago disponibles promociones etc
Fijar las conversiones micro-conversiones y
KPIs por fases
El embudo de conversioacuten describe el proceso de compra del usuario desde que entra en nuestro sitio web hasta que realiza la compra o incluso hasta que se fideliza (antiguo AIDA de St Elmo Lewis)
Si somos capaces de trocear este proceso y establecer objetivos y KPIs a cada fase podremos identificar al detalle los puntos de mejora
Captacioacuten
Navegacioacuten
Reflexioacuten
Compra
Fidelizacioacuten
El embudo de conversioacuten al detallebull Captacioacuten el usuario visita el sitio el objetivo es aumentar el
traacutefico en especial el traacutefico nuevobull Navegacioacuten el usuario interacciona con el sitio el objetivo es
que el usuario logre encontrar lo que necesita Mejorar la UX buenos resultados de buacutesqueda buena navegabilidad etc
bull Reflexioacuten el usuario compara productos entre tiendas el objetivo conseguir que el usuario inicie el proceso de compra Nos centraremos en reforzar la decisioacuten de compra mediante valoraciones de productos opiniones detalles del productohellip
bull Compra el usuario finaliza una compra el objetivo es conseguir que el usuario compre Proceso de compra raacutepido eficaz registro corto no obligatorio recuperacioacuten de carritoshellip
bull Fidelizacioacuten el usuario vuelve al sitio web el objetivo es conseguir traacutefico y compras recurrentes Promociones estrategia newsletter redes socialeshellip
3 Praacutectica analizando un ecommerce real
Elabora un listado de las funcionalidades que mediriacuteas dentro de zalandoes Piensa en queacute puede ayudarte medir cada una y a queacute fase del embudo corresponden
Praacutectica
Praacutectica
4 Recoleccioacuten de los datos
Recoleccioacuten de datos
Analytics es la herramienta de analiacutetica web maacutes extendida en Internet Aunque es una opcioacuten excepcional a la hora de medir un site padece los mismos inconvenientes que la mayoriacutea de la competencia
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
1 Queacute medir
1 Queacute medir
Compra
Paso 3 de carrito
Antildeadir carrito
Consulta DisponibilidadComparar Producto
Consultar Enviacuteo y Devolucioneshellip
Visita la ficha
ldquoEl 78 de los usuarios que compraron consultaron la poliacutetica de enviacuteos y devolucionesrdquo
1 Queacute medir
Segmentacioacuten de clienteIdentifica los tipos de usuario en el sitio para extraer conclusiones maacutes precisas y definir acciones eficaces demografiacutea fuentes de traacutefico dispositivos comportamiento sitio cliente no cliente arquetipos etc
1 Queacute medirSi tuacute te comes 2 panes y yo me como solo 1 panhellip
197 (86)
1 Queacute medirDatos segmentados por tipo de cliente
1 Queacute medirDatos segmentados por tipo de cliente
Distributor Otros Partner Premium Partner VIP Partner Usuarios
Totales
Captacioacuten 4604 886 5618 8311 3426 22845
Interactuacutean 6 9 6 6 8 7
Solicitan Maacutes Info 57 90 79 90 93 82
Compra 45 8 23 9 6 16
2 Recoleccioacuten de datos
2 Recoleccioacuten de datos
VOLUMENMuestreo Analytics y significancia
VARIEDAD
CADUCIDAD
VERACIDADErrores tecnologiacutea e
implementacioacuten datos inaccesibles no modificacioacuten
datos distintas meacutetricas
Web SM APPs Fidelizacioacuten compraetc Gestores de Etiquetas
Alta caducidad de los datos
3 Aportar valor Mapa estrateacutegico Breve y conciso Suficientes y relevantes Faacutecil de obtener y a tiempo Adaptado al receptor
3 Aportar valor
3 Aportar valor
3 Aportar valor
Mes Sesiones Transacciones Ingresos
Enero 1500 102 9966
Febrero 1420 133 13260
Marzo 1450 172 15514
Abril 1445 224 17748
Mayo 1460 291 19150
3 Aportar valor
iquestPromociones disentildeo del sitio estacionalhellip
Mes Sesiones Transacciones Ingresos Var Ingresos
Ticket Medio
Enero 1500 102 9966 98
Febrero 1420 133 13260 33 100
Marzo 1450 172 15514 17 90
Abril 1445 224 17748 14 192
Mayo 1460 291 19150 8 6574
3 Aportar valor
bull Puede haber maacutes de uacutenica interpretacioacuten vaacutelida
bull Correlacioacuten VS Causalidad
bull Tiempo competencia y contexto
bull Transformar los datos en conocimiento y acciones
3 Aportar valor
2 Definiendo las necesidades de medicioacuten
iquestDe queacute depende la tasa de conversioacuten
conversiones sesiones
En el negocio online influyen muchos factores tanto la atraccioacuten del cliente como posteriormente en su retencioacuten e ldquoinvitacioacuten a la accioacutenrdquo
Asimismo debemos tener en cuenta que existen factores coyunturales temporales y de cliente que influyen en cada paso
Y finalmente debemos entender el anaacutelisis como una parte vital en la empresa
Captacioacuten de traacuteficoComposicioacuten del traacutefico branded vs not branded geneacuterico vs especiacuteficohellip Modelos de atribucioacuten
Sitio webEstructura y jerarquiacutea facilidad navegacioacuten accesibilidad legibilidad persuabilidad credibilidad confiaza info productos contacto faacutecil etc
ProductoBuen producto buen precio buenas condiciones de enviacuteo medios de pago disponibles promociones etc
Fijar las conversiones micro-conversiones y
KPIs por fases
El embudo de conversioacuten describe el proceso de compra del usuario desde que entra en nuestro sitio web hasta que realiza la compra o incluso hasta que se fideliza (antiguo AIDA de St Elmo Lewis)
Si somos capaces de trocear este proceso y establecer objetivos y KPIs a cada fase podremos identificar al detalle los puntos de mejora
Captacioacuten
Navegacioacuten
Reflexioacuten
Compra
Fidelizacioacuten
El embudo de conversioacuten al detallebull Captacioacuten el usuario visita el sitio el objetivo es aumentar el
traacutefico en especial el traacutefico nuevobull Navegacioacuten el usuario interacciona con el sitio el objetivo es
que el usuario logre encontrar lo que necesita Mejorar la UX buenos resultados de buacutesqueda buena navegabilidad etc
bull Reflexioacuten el usuario compara productos entre tiendas el objetivo conseguir que el usuario inicie el proceso de compra Nos centraremos en reforzar la decisioacuten de compra mediante valoraciones de productos opiniones detalles del productohellip
bull Compra el usuario finaliza una compra el objetivo es conseguir que el usuario compre Proceso de compra raacutepido eficaz registro corto no obligatorio recuperacioacuten de carritoshellip
bull Fidelizacioacuten el usuario vuelve al sitio web el objetivo es conseguir traacutefico y compras recurrentes Promociones estrategia newsletter redes socialeshellip
3 Praacutectica analizando un ecommerce real
Elabora un listado de las funcionalidades que mediriacuteas dentro de zalandoes Piensa en queacute puede ayudarte medir cada una y a queacute fase del embudo corresponden
Praacutectica
Praacutectica
4 Recoleccioacuten de los datos
Recoleccioacuten de datos
Analytics es la herramienta de analiacutetica web maacutes extendida en Internet Aunque es una opcioacuten excepcional a la hora de medir un site padece los mismos inconvenientes que la mayoriacutea de la competencia
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
1 Queacute medir
Compra
Paso 3 de carrito
Antildeadir carrito
Consulta DisponibilidadComparar Producto
Consultar Enviacuteo y Devolucioneshellip
Visita la ficha
ldquoEl 78 de los usuarios que compraron consultaron la poliacutetica de enviacuteos y devolucionesrdquo
1 Queacute medir
Segmentacioacuten de clienteIdentifica los tipos de usuario en el sitio para extraer conclusiones maacutes precisas y definir acciones eficaces demografiacutea fuentes de traacutefico dispositivos comportamiento sitio cliente no cliente arquetipos etc
1 Queacute medirSi tuacute te comes 2 panes y yo me como solo 1 panhellip
197 (86)
1 Queacute medirDatos segmentados por tipo de cliente
1 Queacute medirDatos segmentados por tipo de cliente
Distributor Otros Partner Premium Partner VIP Partner Usuarios
Totales
Captacioacuten 4604 886 5618 8311 3426 22845
Interactuacutean 6 9 6 6 8 7
Solicitan Maacutes Info 57 90 79 90 93 82
Compra 45 8 23 9 6 16
2 Recoleccioacuten de datos
2 Recoleccioacuten de datos
VOLUMENMuestreo Analytics y significancia
VARIEDAD
CADUCIDAD
VERACIDADErrores tecnologiacutea e
implementacioacuten datos inaccesibles no modificacioacuten
datos distintas meacutetricas
Web SM APPs Fidelizacioacuten compraetc Gestores de Etiquetas
Alta caducidad de los datos
3 Aportar valor Mapa estrateacutegico Breve y conciso Suficientes y relevantes Faacutecil de obtener y a tiempo Adaptado al receptor
3 Aportar valor
3 Aportar valor
3 Aportar valor
Mes Sesiones Transacciones Ingresos
Enero 1500 102 9966
Febrero 1420 133 13260
Marzo 1450 172 15514
Abril 1445 224 17748
Mayo 1460 291 19150
3 Aportar valor
iquestPromociones disentildeo del sitio estacionalhellip
Mes Sesiones Transacciones Ingresos Var Ingresos
Ticket Medio
Enero 1500 102 9966 98
Febrero 1420 133 13260 33 100
Marzo 1450 172 15514 17 90
Abril 1445 224 17748 14 192
Mayo 1460 291 19150 8 6574
3 Aportar valor
bull Puede haber maacutes de uacutenica interpretacioacuten vaacutelida
bull Correlacioacuten VS Causalidad
bull Tiempo competencia y contexto
bull Transformar los datos en conocimiento y acciones
3 Aportar valor
2 Definiendo las necesidades de medicioacuten
iquestDe queacute depende la tasa de conversioacuten
conversiones sesiones
En el negocio online influyen muchos factores tanto la atraccioacuten del cliente como posteriormente en su retencioacuten e ldquoinvitacioacuten a la accioacutenrdquo
Asimismo debemos tener en cuenta que existen factores coyunturales temporales y de cliente que influyen en cada paso
Y finalmente debemos entender el anaacutelisis como una parte vital en la empresa
Captacioacuten de traacuteficoComposicioacuten del traacutefico branded vs not branded geneacuterico vs especiacuteficohellip Modelos de atribucioacuten
Sitio webEstructura y jerarquiacutea facilidad navegacioacuten accesibilidad legibilidad persuabilidad credibilidad confiaza info productos contacto faacutecil etc
ProductoBuen producto buen precio buenas condiciones de enviacuteo medios de pago disponibles promociones etc
Fijar las conversiones micro-conversiones y
KPIs por fases
El embudo de conversioacuten describe el proceso de compra del usuario desde que entra en nuestro sitio web hasta que realiza la compra o incluso hasta que se fideliza (antiguo AIDA de St Elmo Lewis)
Si somos capaces de trocear este proceso y establecer objetivos y KPIs a cada fase podremos identificar al detalle los puntos de mejora
Captacioacuten
Navegacioacuten
Reflexioacuten
Compra
Fidelizacioacuten
El embudo de conversioacuten al detallebull Captacioacuten el usuario visita el sitio el objetivo es aumentar el
traacutefico en especial el traacutefico nuevobull Navegacioacuten el usuario interacciona con el sitio el objetivo es
que el usuario logre encontrar lo que necesita Mejorar la UX buenos resultados de buacutesqueda buena navegabilidad etc
bull Reflexioacuten el usuario compara productos entre tiendas el objetivo conseguir que el usuario inicie el proceso de compra Nos centraremos en reforzar la decisioacuten de compra mediante valoraciones de productos opiniones detalles del productohellip
bull Compra el usuario finaliza una compra el objetivo es conseguir que el usuario compre Proceso de compra raacutepido eficaz registro corto no obligatorio recuperacioacuten de carritoshellip
bull Fidelizacioacuten el usuario vuelve al sitio web el objetivo es conseguir traacutefico y compras recurrentes Promociones estrategia newsletter redes socialeshellip
3 Praacutectica analizando un ecommerce real
Elabora un listado de las funcionalidades que mediriacuteas dentro de zalandoes Piensa en queacute puede ayudarte medir cada una y a queacute fase del embudo corresponden
Praacutectica
Praacutectica
4 Recoleccioacuten de los datos
Recoleccioacuten de datos
Analytics es la herramienta de analiacutetica web maacutes extendida en Internet Aunque es una opcioacuten excepcional a la hora de medir un site padece los mismos inconvenientes que la mayoriacutea de la competencia
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
1 Queacute medir
Segmentacioacuten de clienteIdentifica los tipos de usuario en el sitio para extraer conclusiones maacutes precisas y definir acciones eficaces demografiacutea fuentes de traacutefico dispositivos comportamiento sitio cliente no cliente arquetipos etc
1 Queacute medirSi tuacute te comes 2 panes y yo me como solo 1 panhellip
197 (86)
1 Queacute medirDatos segmentados por tipo de cliente
1 Queacute medirDatos segmentados por tipo de cliente
Distributor Otros Partner Premium Partner VIP Partner Usuarios
Totales
Captacioacuten 4604 886 5618 8311 3426 22845
Interactuacutean 6 9 6 6 8 7
Solicitan Maacutes Info 57 90 79 90 93 82
Compra 45 8 23 9 6 16
2 Recoleccioacuten de datos
2 Recoleccioacuten de datos
VOLUMENMuestreo Analytics y significancia
VARIEDAD
CADUCIDAD
VERACIDADErrores tecnologiacutea e
implementacioacuten datos inaccesibles no modificacioacuten
datos distintas meacutetricas
Web SM APPs Fidelizacioacuten compraetc Gestores de Etiquetas
Alta caducidad de los datos
3 Aportar valor Mapa estrateacutegico Breve y conciso Suficientes y relevantes Faacutecil de obtener y a tiempo Adaptado al receptor
3 Aportar valor
3 Aportar valor
3 Aportar valor
Mes Sesiones Transacciones Ingresos
Enero 1500 102 9966
Febrero 1420 133 13260
Marzo 1450 172 15514
Abril 1445 224 17748
Mayo 1460 291 19150
3 Aportar valor
iquestPromociones disentildeo del sitio estacionalhellip
Mes Sesiones Transacciones Ingresos Var Ingresos
Ticket Medio
Enero 1500 102 9966 98
Febrero 1420 133 13260 33 100
Marzo 1450 172 15514 17 90
Abril 1445 224 17748 14 192
Mayo 1460 291 19150 8 6574
3 Aportar valor
bull Puede haber maacutes de uacutenica interpretacioacuten vaacutelida
bull Correlacioacuten VS Causalidad
bull Tiempo competencia y contexto
bull Transformar los datos en conocimiento y acciones
3 Aportar valor
2 Definiendo las necesidades de medicioacuten
iquestDe queacute depende la tasa de conversioacuten
conversiones sesiones
En el negocio online influyen muchos factores tanto la atraccioacuten del cliente como posteriormente en su retencioacuten e ldquoinvitacioacuten a la accioacutenrdquo
Asimismo debemos tener en cuenta que existen factores coyunturales temporales y de cliente que influyen en cada paso
Y finalmente debemos entender el anaacutelisis como una parte vital en la empresa
Captacioacuten de traacuteficoComposicioacuten del traacutefico branded vs not branded geneacuterico vs especiacuteficohellip Modelos de atribucioacuten
Sitio webEstructura y jerarquiacutea facilidad navegacioacuten accesibilidad legibilidad persuabilidad credibilidad confiaza info productos contacto faacutecil etc
ProductoBuen producto buen precio buenas condiciones de enviacuteo medios de pago disponibles promociones etc
Fijar las conversiones micro-conversiones y
KPIs por fases
El embudo de conversioacuten describe el proceso de compra del usuario desde que entra en nuestro sitio web hasta que realiza la compra o incluso hasta que se fideliza (antiguo AIDA de St Elmo Lewis)
Si somos capaces de trocear este proceso y establecer objetivos y KPIs a cada fase podremos identificar al detalle los puntos de mejora
Captacioacuten
Navegacioacuten
Reflexioacuten
Compra
Fidelizacioacuten
El embudo de conversioacuten al detallebull Captacioacuten el usuario visita el sitio el objetivo es aumentar el
traacutefico en especial el traacutefico nuevobull Navegacioacuten el usuario interacciona con el sitio el objetivo es
que el usuario logre encontrar lo que necesita Mejorar la UX buenos resultados de buacutesqueda buena navegabilidad etc
bull Reflexioacuten el usuario compara productos entre tiendas el objetivo conseguir que el usuario inicie el proceso de compra Nos centraremos en reforzar la decisioacuten de compra mediante valoraciones de productos opiniones detalles del productohellip
bull Compra el usuario finaliza una compra el objetivo es conseguir que el usuario compre Proceso de compra raacutepido eficaz registro corto no obligatorio recuperacioacuten de carritoshellip
bull Fidelizacioacuten el usuario vuelve al sitio web el objetivo es conseguir traacutefico y compras recurrentes Promociones estrategia newsletter redes socialeshellip
3 Praacutectica analizando un ecommerce real
Elabora un listado de las funcionalidades que mediriacuteas dentro de zalandoes Piensa en queacute puede ayudarte medir cada una y a queacute fase del embudo corresponden
Praacutectica
Praacutectica
4 Recoleccioacuten de los datos
Recoleccioacuten de datos
Analytics es la herramienta de analiacutetica web maacutes extendida en Internet Aunque es una opcioacuten excepcional a la hora de medir un site padece los mismos inconvenientes que la mayoriacutea de la competencia
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
1 Queacute medirSi tuacute te comes 2 panes y yo me como solo 1 panhellip
197 (86)
1 Queacute medirDatos segmentados por tipo de cliente
1 Queacute medirDatos segmentados por tipo de cliente
Distributor Otros Partner Premium Partner VIP Partner Usuarios
Totales
Captacioacuten 4604 886 5618 8311 3426 22845
Interactuacutean 6 9 6 6 8 7
Solicitan Maacutes Info 57 90 79 90 93 82
Compra 45 8 23 9 6 16
2 Recoleccioacuten de datos
2 Recoleccioacuten de datos
VOLUMENMuestreo Analytics y significancia
VARIEDAD
CADUCIDAD
VERACIDADErrores tecnologiacutea e
implementacioacuten datos inaccesibles no modificacioacuten
datos distintas meacutetricas
Web SM APPs Fidelizacioacuten compraetc Gestores de Etiquetas
Alta caducidad de los datos
3 Aportar valor Mapa estrateacutegico Breve y conciso Suficientes y relevantes Faacutecil de obtener y a tiempo Adaptado al receptor
3 Aportar valor
3 Aportar valor
3 Aportar valor
Mes Sesiones Transacciones Ingresos
Enero 1500 102 9966
Febrero 1420 133 13260
Marzo 1450 172 15514
Abril 1445 224 17748
Mayo 1460 291 19150
3 Aportar valor
iquestPromociones disentildeo del sitio estacionalhellip
Mes Sesiones Transacciones Ingresos Var Ingresos
Ticket Medio
Enero 1500 102 9966 98
Febrero 1420 133 13260 33 100
Marzo 1450 172 15514 17 90
Abril 1445 224 17748 14 192
Mayo 1460 291 19150 8 6574
3 Aportar valor
bull Puede haber maacutes de uacutenica interpretacioacuten vaacutelida
bull Correlacioacuten VS Causalidad
bull Tiempo competencia y contexto
bull Transformar los datos en conocimiento y acciones
3 Aportar valor
2 Definiendo las necesidades de medicioacuten
iquestDe queacute depende la tasa de conversioacuten
conversiones sesiones
En el negocio online influyen muchos factores tanto la atraccioacuten del cliente como posteriormente en su retencioacuten e ldquoinvitacioacuten a la accioacutenrdquo
Asimismo debemos tener en cuenta que existen factores coyunturales temporales y de cliente que influyen en cada paso
Y finalmente debemos entender el anaacutelisis como una parte vital en la empresa
Captacioacuten de traacuteficoComposicioacuten del traacutefico branded vs not branded geneacuterico vs especiacuteficohellip Modelos de atribucioacuten
Sitio webEstructura y jerarquiacutea facilidad navegacioacuten accesibilidad legibilidad persuabilidad credibilidad confiaza info productos contacto faacutecil etc
ProductoBuen producto buen precio buenas condiciones de enviacuteo medios de pago disponibles promociones etc
Fijar las conversiones micro-conversiones y
KPIs por fases
El embudo de conversioacuten describe el proceso de compra del usuario desde que entra en nuestro sitio web hasta que realiza la compra o incluso hasta que se fideliza (antiguo AIDA de St Elmo Lewis)
Si somos capaces de trocear este proceso y establecer objetivos y KPIs a cada fase podremos identificar al detalle los puntos de mejora
Captacioacuten
Navegacioacuten
Reflexioacuten
Compra
Fidelizacioacuten
El embudo de conversioacuten al detallebull Captacioacuten el usuario visita el sitio el objetivo es aumentar el
traacutefico en especial el traacutefico nuevobull Navegacioacuten el usuario interacciona con el sitio el objetivo es
que el usuario logre encontrar lo que necesita Mejorar la UX buenos resultados de buacutesqueda buena navegabilidad etc
bull Reflexioacuten el usuario compara productos entre tiendas el objetivo conseguir que el usuario inicie el proceso de compra Nos centraremos en reforzar la decisioacuten de compra mediante valoraciones de productos opiniones detalles del productohellip
bull Compra el usuario finaliza una compra el objetivo es conseguir que el usuario compre Proceso de compra raacutepido eficaz registro corto no obligatorio recuperacioacuten de carritoshellip
bull Fidelizacioacuten el usuario vuelve al sitio web el objetivo es conseguir traacutefico y compras recurrentes Promociones estrategia newsletter redes socialeshellip
3 Praacutectica analizando un ecommerce real
Elabora un listado de las funcionalidades que mediriacuteas dentro de zalandoes Piensa en queacute puede ayudarte medir cada una y a queacute fase del embudo corresponden
Praacutectica
Praacutectica
4 Recoleccioacuten de los datos
Recoleccioacuten de datos
Analytics es la herramienta de analiacutetica web maacutes extendida en Internet Aunque es una opcioacuten excepcional a la hora de medir un site padece los mismos inconvenientes que la mayoriacutea de la competencia
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
1 Queacute medirDatos segmentados por tipo de cliente
1 Queacute medirDatos segmentados por tipo de cliente
Distributor Otros Partner Premium Partner VIP Partner Usuarios
Totales
Captacioacuten 4604 886 5618 8311 3426 22845
Interactuacutean 6 9 6 6 8 7
Solicitan Maacutes Info 57 90 79 90 93 82
Compra 45 8 23 9 6 16
2 Recoleccioacuten de datos
2 Recoleccioacuten de datos
VOLUMENMuestreo Analytics y significancia
VARIEDAD
CADUCIDAD
VERACIDADErrores tecnologiacutea e
implementacioacuten datos inaccesibles no modificacioacuten
datos distintas meacutetricas
Web SM APPs Fidelizacioacuten compraetc Gestores de Etiquetas
Alta caducidad de los datos
3 Aportar valor Mapa estrateacutegico Breve y conciso Suficientes y relevantes Faacutecil de obtener y a tiempo Adaptado al receptor
3 Aportar valor
3 Aportar valor
3 Aportar valor
Mes Sesiones Transacciones Ingresos
Enero 1500 102 9966
Febrero 1420 133 13260
Marzo 1450 172 15514
Abril 1445 224 17748
Mayo 1460 291 19150
3 Aportar valor
iquestPromociones disentildeo del sitio estacionalhellip
Mes Sesiones Transacciones Ingresos Var Ingresos
Ticket Medio
Enero 1500 102 9966 98
Febrero 1420 133 13260 33 100
Marzo 1450 172 15514 17 90
Abril 1445 224 17748 14 192
Mayo 1460 291 19150 8 6574
3 Aportar valor
bull Puede haber maacutes de uacutenica interpretacioacuten vaacutelida
bull Correlacioacuten VS Causalidad
bull Tiempo competencia y contexto
bull Transformar los datos en conocimiento y acciones
3 Aportar valor
2 Definiendo las necesidades de medicioacuten
iquestDe queacute depende la tasa de conversioacuten
conversiones sesiones
En el negocio online influyen muchos factores tanto la atraccioacuten del cliente como posteriormente en su retencioacuten e ldquoinvitacioacuten a la accioacutenrdquo
Asimismo debemos tener en cuenta que existen factores coyunturales temporales y de cliente que influyen en cada paso
Y finalmente debemos entender el anaacutelisis como una parte vital en la empresa
Captacioacuten de traacuteficoComposicioacuten del traacutefico branded vs not branded geneacuterico vs especiacuteficohellip Modelos de atribucioacuten
Sitio webEstructura y jerarquiacutea facilidad navegacioacuten accesibilidad legibilidad persuabilidad credibilidad confiaza info productos contacto faacutecil etc
ProductoBuen producto buen precio buenas condiciones de enviacuteo medios de pago disponibles promociones etc
Fijar las conversiones micro-conversiones y
KPIs por fases
El embudo de conversioacuten describe el proceso de compra del usuario desde que entra en nuestro sitio web hasta que realiza la compra o incluso hasta que se fideliza (antiguo AIDA de St Elmo Lewis)
Si somos capaces de trocear este proceso y establecer objetivos y KPIs a cada fase podremos identificar al detalle los puntos de mejora
Captacioacuten
Navegacioacuten
Reflexioacuten
Compra
Fidelizacioacuten
El embudo de conversioacuten al detallebull Captacioacuten el usuario visita el sitio el objetivo es aumentar el
traacutefico en especial el traacutefico nuevobull Navegacioacuten el usuario interacciona con el sitio el objetivo es
que el usuario logre encontrar lo que necesita Mejorar la UX buenos resultados de buacutesqueda buena navegabilidad etc
bull Reflexioacuten el usuario compara productos entre tiendas el objetivo conseguir que el usuario inicie el proceso de compra Nos centraremos en reforzar la decisioacuten de compra mediante valoraciones de productos opiniones detalles del productohellip
bull Compra el usuario finaliza una compra el objetivo es conseguir que el usuario compre Proceso de compra raacutepido eficaz registro corto no obligatorio recuperacioacuten de carritoshellip
bull Fidelizacioacuten el usuario vuelve al sitio web el objetivo es conseguir traacutefico y compras recurrentes Promociones estrategia newsletter redes socialeshellip
3 Praacutectica analizando un ecommerce real
Elabora un listado de las funcionalidades que mediriacuteas dentro de zalandoes Piensa en queacute puede ayudarte medir cada una y a queacute fase del embudo corresponden
Praacutectica
Praacutectica
4 Recoleccioacuten de los datos
Recoleccioacuten de datos
Analytics es la herramienta de analiacutetica web maacutes extendida en Internet Aunque es una opcioacuten excepcional a la hora de medir un site padece los mismos inconvenientes que la mayoriacutea de la competencia
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
1 Queacute medirDatos segmentados por tipo de cliente
Distributor Otros Partner Premium Partner VIP Partner Usuarios
Totales
Captacioacuten 4604 886 5618 8311 3426 22845
Interactuacutean 6 9 6 6 8 7
Solicitan Maacutes Info 57 90 79 90 93 82
Compra 45 8 23 9 6 16
2 Recoleccioacuten de datos
2 Recoleccioacuten de datos
VOLUMENMuestreo Analytics y significancia
VARIEDAD
CADUCIDAD
VERACIDADErrores tecnologiacutea e
implementacioacuten datos inaccesibles no modificacioacuten
datos distintas meacutetricas
Web SM APPs Fidelizacioacuten compraetc Gestores de Etiquetas
Alta caducidad de los datos
3 Aportar valor Mapa estrateacutegico Breve y conciso Suficientes y relevantes Faacutecil de obtener y a tiempo Adaptado al receptor
3 Aportar valor
3 Aportar valor
3 Aportar valor
Mes Sesiones Transacciones Ingresos
Enero 1500 102 9966
Febrero 1420 133 13260
Marzo 1450 172 15514
Abril 1445 224 17748
Mayo 1460 291 19150
3 Aportar valor
iquestPromociones disentildeo del sitio estacionalhellip
Mes Sesiones Transacciones Ingresos Var Ingresos
Ticket Medio
Enero 1500 102 9966 98
Febrero 1420 133 13260 33 100
Marzo 1450 172 15514 17 90
Abril 1445 224 17748 14 192
Mayo 1460 291 19150 8 6574
3 Aportar valor
bull Puede haber maacutes de uacutenica interpretacioacuten vaacutelida
bull Correlacioacuten VS Causalidad
bull Tiempo competencia y contexto
bull Transformar los datos en conocimiento y acciones
3 Aportar valor
2 Definiendo las necesidades de medicioacuten
iquestDe queacute depende la tasa de conversioacuten
conversiones sesiones
En el negocio online influyen muchos factores tanto la atraccioacuten del cliente como posteriormente en su retencioacuten e ldquoinvitacioacuten a la accioacutenrdquo
Asimismo debemos tener en cuenta que existen factores coyunturales temporales y de cliente que influyen en cada paso
Y finalmente debemos entender el anaacutelisis como una parte vital en la empresa
Captacioacuten de traacuteficoComposicioacuten del traacutefico branded vs not branded geneacuterico vs especiacuteficohellip Modelos de atribucioacuten
Sitio webEstructura y jerarquiacutea facilidad navegacioacuten accesibilidad legibilidad persuabilidad credibilidad confiaza info productos contacto faacutecil etc
ProductoBuen producto buen precio buenas condiciones de enviacuteo medios de pago disponibles promociones etc
Fijar las conversiones micro-conversiones y
KPIs por fases
El embudo de conversioacuten describe el proceso de compra del usuario desde que entra en nuestro sitio web hasta que realiza la compra o incluso hasta que se fideliza (antiguo AIDA de St Elmo Lewis)
Si somos capaces de trocear este proceso y establecer objetivos y KPIs a cada fase podremos identificar al detalle los puntos de mejora
Captacioacuten
Navegacioacuten
Reflexioacuten
Compra
Fidelizacioacuten
El embudo de conversioacuten al detallebull Captacioacuten el usuario visita el sitio el objetivo es aumentar el
traacutefico en especial el traacutefico nuevobull Navegacioacuten el usuario interacciona con el sitio el objetivo es
que el usuario logre encontrar lo que necesita Mejorar la UX buenos resultados de buacutesqueda buena navegabilidad etc
bull Reflexioacuten el usuario compara productos entre tiendas el objetivo conseguir que el usuario inicie el proceso de compra Nos centraremos en reforzar la decisioacuten de compra mediante valoraciones de productos opiniones detalles del productohellip
bull Compra el usuario finaliza una compra el objetivo es conseguir que el usuario compre Proceso de compra raacutepido eficaz registro corto no obligatorio recuperacioacuten de carritoshellip
bull Fidelizacioacuten el usuario vuelve al sitio web el objetivo es conseguir traacutefico y compras recurrentes Promociones estrategia newsletter redes socialeshellip
3 Praacutectica analizando un ecommerce real
Elabora un listado de las funcionalidades que mediriacuteas dentro de zalandoes Piensa en queacute puede ayudarte medir cada una y a queacute fase del embudo corresponden
Praacutectica
Praacutectica
4 Recoleccioacuten de los datos
Recoleccioacuten de datos
Analytics es la herramienta de analiacutetica web maacutes extendida en Internet Aunque es una opcioacuten excepcional a la hora de medir un site padece los mismos inconvenientes que la mayoriacutea de la competencia
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
2 Recoleccioacuten de datos
2 Recoleccioacuten de datos
VOLUMENMuestreo Analytics y significancia
VARIEDAD
CADUCIDAD
VERACIDADErrores tecnologiacutea e
implementacioacuten datos inaccesibles no modificacioacuten
datos distintas meacutetricas
Web SM APPs Fidelizacioacuten compraetc Gestores de Etiquetas
Alta caducidad de los datos
3 Aportar valor Mapa estrateacutegico Breve y conciso Suficientes y relevantes Faacutecil de obtener y a tiempo Adaptado al receptor
3 Aportar valor
3 Aportar valor
3 Aportar valor
Mes Sesiones Transacciones Ingresos
Enero 1500 102 9966
Febrero 1420 133 13260
Marzo 1450 172 15514
Abril 1445 224 17748
Mayo 1460 291 19150
3 Aportar valor
iquestPromociones disentildeo del sitio estacionalhellip
Mes Sesiones Transacciones Ingresos Var Ingresos
Ticket Medio
Enero 1500 102 9966 98
Febrero 1420 133 13260 33 100
Marzo 1450 172 15514 17 90
Abril 1445 224 17748 14 192
Mayo 1460 291 19150 8 6574
3 Aportar valor
bull Puede haber maacutes de uacutenica interpretacioacuten vaacutelida
bull Correlacioacuten VS Causalidad
bull Tiempo competencia y contexto
bull Transformar los datos en conocimiento y acciones
3 Aportar valor
2 Definiendo las necesidades de medicioacuten
iquestDe queacute depende la tasa de conversioacuten
conversiones sesiones
En el negocio online influyen muchos factores tanto la atraccioacuten del cliente como posteriormente en su retencioacuten e ldquoinvitacioacuten a la accioacutenrdquo
Asimismo debemos tener en cuenta que existen factores coyunturales temporales y de cliente que influyen en cada paso
Y finalmente debemos entender el anaacutelisis como una parte vital en la empresa
Captacioacuten de traacuteficoComposicioacuten del traacutefico branded vs not branded geneacuterico vs especiacuteficohellip Modelos de atribucioacuten
Sitio webEstructura y jerarquiacutea facilidad navegacioacuten accesibilidad legibilidad persuabilidad credibilidad confiaza info productos contacto faacutecil etc
ProductoBuen producto buen precio buenas condiciones de enviacuteo medios de pago disponibles promociones etc
Fijar las conversiones micro-conversiones y
KPIs por fases
El embudo de conversioacuten describe el proceso de compra del usuario desde que entra en nuestro sitio web hasta que realiza la compra o incluso hasta que se fideliza (antiguo AIDA de St Elmo Lewis)
Si somos capaces de trocear este proceso y establecer objetivos y KPIs a cada fase podremos identificar al detalle los puntos de mejora
Captacioacuten
Navegacioacuten
Reflexioacuten
Compra
Fidelizacioacuten
El embudo de conversioacuten al detallebull Captacioacuten el usuario visita el sitio el objetivo es aumentar el
traacutefico en especial el traacutefico nuevobull Navegacioacuten el usuario interacciona con el sitio el objetivo es
que el usuario logre encontrar lo que necesita Mejorar la UX buenos resultados de buacutesqueda buena navegabilidad etc
bull Reflexioacuten el usuario compara productos entre tiendas el objetivo conseguir que el usuario inicie el proceso de compra Nos centraremos en reforzar la decisioacuten de compra mediante valoraciones de productos opiniones detalles del productohellip
bull Compra el usuario finaliza una compra el objetivo es conseguir que el usuario compre Proceso de compra raacutepido eficaz registro corto no obligatorio recuperacioacuten de carritoshellip
bull Fidelizacioacuten el usuario vuelve al sitio web el objetivo es conseguir traacutefico y compras recurrentes Promociones estrategia newsletter redes socialeshellip
3 Praacutectica analizando un ecommerce real
Elabora un listado de las funcionalidades que mediriacuteas dentro de zalandoes Piensa en queacute puede ayudarte medir cada una y a queacute fase del embudo corresponden
Praacutectica
Praacutectica
4 Recoleccioacuten de los datos
Recoleccioacuten de datos
Analytics es la herramienta de analiacutetica web maacutes extendida en Internet Aunque es una opcioacuten excepcional a la hora de medir un site padece los mismos inconvenientes que la mayoriacutea de la competencia
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
2 Recoleccioacuten de datos
VOLUMENMuestreo Analytics y significancia
VARIEDAD
CADUCIDAD
VERACIDADErrores tecnologiacutea e
implementacioacuten datos inaccesibles no modificacioacuten
datos distintas meacutetricas
Web SM APPs Fidelizacioacuten compraetc Gestores de Etiquetas
Alta caducidad de los datos
3 Aportar valor Mapa estrateacutegico Breve y conciso Suficientes y relevantes Faacutecil de obtener y a tiempo Adaptado al receptor
3 Aportar valor
3 Aportar valor
3 Aportar valor
Mes Sesiones Transacciones Ingresos
Enero 1500 102 9966
Febrero 1420 133 13260
Marzo 1450 172 15514
Abril 1445 224 17748
Mayo 1460 291 19150
3 Aportar valor
iquestPromociones disentildeo del sitio estacionalhellip
Mes Sesiones Transacciones Ingresos Var Ingresos
Ticket Medio
Enero 1500 102 9966 98
Febrero 1420 133 13260 33 100
Marzo 1450 172 15514 17 90
Abril 1445 224 17748 14 192
Mayo 1460 291 19150 8 6574
3 Aportar valor
bull Puede haber maacutes de uacutenica interpretacioacuten vaacutelida
bull Correlacioacuten VS Causalidad
bull Tiempo competencia y contexto
bull Transformar los datos en conocimiento y acciones
3 Aportar valor
2 Definiendo las necesidades de medicioacuten
iquestDe queacute depende la tasa de conversioacuten
conversiones sesiones
En el negocio online influyen muchos factores tanto la atraccioacuten del cliente como posteriormente en su retencioacuten e ldquoinvitacioacuten a la accioacutenrdquo
Asimismo debemos tener en cuenta que existen factores coyunturales temporales y de cliente que influyen en cada paso
Y finalmente debemos entender el anaacutelisis como una parte vital en la empresa
Captacioacuten de traacuteficoComposicioacuten del traacutefico branded vs not branded geneacuterico vs especiacuteficohellip Modelos de atribucioacuten
Sitio webEstructura y jerarquiacutea facilidad navegacioacuten accesibilidad legibilidad persuabilidad credibilidad confiaza info productos contacto faacutecil etc
ProductoBuen producto buen precio buenas condiciones de enviacuteo medios de pago disponibles promociones etc
Fijar las conversiones micro-conversiones y
KPIs por fases
El embudo de conversioacuten describe el proceso de compra del usuario desde que entra en nuestro sitio web hasta que realiza la compra o incluso hasta que se fideliza (antiguo AIDA de St Elmo Lewis)
Si somos capaces de trocear este proceso y establecer objetivos y KPIs a cada fase podremos identificar al detalle los puntos de mejora
Captacioacuten
Navegacioacuten
Reflexioacuten
Compra
Fidelizacioacuten
El embudo de conversioacuten al detallebull Captacioacuten el usuario visita el sitio el objetivo es aumentar el
traacutefico en especial el traacutefico nuevobull Navegacioacuten el usuario interacciona con el sitio el objetivo es
que el usuario logre encontrar lo que necesita Mejorar la UX buenos resultados de buacutesqueda buena navegabilidad etc
bull Reflexioacuten el usuario compara productos entre tiendas el objetivo conseguir que el usuario inicie el proceso de compra Nos centraremos en reforzar la decisioacuten de compra mediante valoraciones de productos opiniones detalles del productohellip
bull Compra el usuario finaliza una compra el objetivo es conseguir que el usuario compre Proceso de compra raacutepido eficaz registro corto no obligatorio recuperacioacuten de carritoshellip
bull Fidelizacioacuten el usuario vuelve al sitio web el objetivo es conseguir traacutefico y compras recurrentes Promociones estrategia newsletter redes socialeshellip
3 Praacutectica analizando un ecommerce real
Elabora un listado de las funcionalidades que mediriacuteas dentro de zalandoes Piensa en queacute puede ayudarte medir cada una y a queacute fase del embudo corresponden
Praacutectica
Praacutectica
4 Recoleccioacuten de los datos
Recoleccioacuten de datos
Analytics es la herramienta de analiacutetica web maacutes extendida en Internet Aunque es una opcioacuten excepcional a la hora de medir un site padece los mismos inconvenientes que la mayoriacutea de la competencia
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
3 Aportar valor Mapa estrateacutegico Breve y conciso Suficientes y relevantes Faacutecil de obtener y a tiempo Adaptado al receptor
3 Aportar valor
3 Aportar valor
3 Aportar valor
Mes Sesiones Transacciones Ingresos
Enero 1500 102 9966
Febrero 1420 133 13260
Marzo 1450 172 15514
Abril 1445 224 17748
Mayo 1460 291 19150
3 Aportar valor
iquestPromociones disentildeo del sitio estacionalhellip
Mes Sesiones Transacciones Ingresos Var Ingresos
Ticket Medio
Enero 1500 102 9966 98
Febrero 1420 133 13260 33 100
Marzo 1450 172 15514 17 90
Abril 1445 224 17748 14 192
Mayo 1460 291 19150 8 6574
3 Aportar valor
bull Puede haber maacutes de uacutenica interpretacioacuten vaacutelida
bull Correlacioacuten VS Causalidad
bull Tiempo competencia y contexto
bull Transformar los datos en conocimiento y acciones
3 Aportar valor
2 Definiendo las necesidades de medicioacuten
iquestDe queacute depende la tasa de conversioacuten
conversiones sesiones
En el negocio online influyen muchos factores tanto la atraccioacuten del cliente como posteriormente en su retencioacuten e ldquoinvitacioacuten a la accioacutenrdquo
Asimismo debemos tener en cuenta que existen factores coyunturales temporales y de cliente que influyen en cada paso
Y finalmente debemos entender el anaacutelisis como una parte vital en la empresa
Captacioacuten de traacuteficoComposicioacuten del traacutefico branded vs not branded geneacuterico vs especiacuteficohellip Modelos de atribucioacuten
Sitio webEstructura y jerarquiacutea facilidad navegacioacuten accesibilidad legibilidad persuabilidad credibilidad confiaza info productos contacto faacutecil etc
ProductoBuen producto buen precio buenas condiciones de enviacuteo medios de pago disponibles promociones etc
Fijar las conversiones micro-conversiones y
KPIs por fases
El embudo de conversioacuten describe el proceso de compra del usuario desde que entra en nuestro sitio web hasta que realiza la compra o incluso hasta que se fideliza (antiguo AIDA de St Elmo Lewis)
Si somos capaces de trocear este proceso y establecer objetivos y KPIs a cada fase podremos identificar al detalle los puntos de mejora
Captacioacuten
Navegacioacuten
Reflexioacuten
Compra
Fidelizacioacuten
El embudo de conversioacuten al detallebull Captacioacuten el usuario visita el sitio el objetivo es aumentar el
traacutefico en especial el traacutefico nuevobull Navegacioacuten el usuario interacciona con el sitio el objetivo es
que el usuario logre encontrar lo que necesita Mejorar la UX buenos resultados de buacutesqueda buena navegabilidad etc
bull Reflexioacuten el usuario compara productos entre tiendas el objetivo conseguir que el usuario inicie el proceso de compra Nos centraremos en reforzar la decisioacuten de compra mediante valoraciones de productos opiniones detalles del productohellip
bull Compra el usuario finaliza una compra el objetivo es conseguir que el usuario compre Proceso de compra raacutepido eficaz registro corto no obligatorio recuperacioacuten de carritoshellip
bull Fidelizacioacuten el usuario vuelve al sitio web el objetivo es conseguir traacutefico y compras recurrentes Promociones estrategia newsletter redes socialeshellip
3 Praacutectica analizando un ecommerce real
Elabora un listado de las funcionalidades que mediriacuteas dentro de zalandoes Piensa en queacute puede ayudarte medir cada una y a queacute fase del embudo corresponden
Praacutectica
Praacutectica
4 Recoleccioacuten de los datos
Recoleccioacuten de datos
Analytics es la herramienta de analiacutetica web maacutes extendida en Internet Aunque es una opcioacuten excepcional a la hora de medir un site padece los mismos inconvenientes que la mayoriacutea de la competencia
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
3 Aportar valor
3 Aportar valor
3 Aportar valor
Mes Sesiones Transacciones Ingresos
Enero 1500 102 9966
Febrero 1420 133 13260
Marzo 1450 172 15514
Abril 1445 224 17748
Mayo 1460 291 19150
3 Aportar valor
iquestPromociones disentildeo del sitio estacionalhellip
Mes Sesiones Transacciones Ingresos Var Ingresos
Ticket Medio
Enero 1500 102 9966 98
Febrero 1420 133 13260 33 100
Marzo 1450 172 15514 17 90
Abril 1445 224 17748 14 192
Mayo 1460 291 19150 8 6574
3 Aportar valor
bull Puede haber maacutes de uacutenica interpretacioacuten vaacutelida
bull Correlacioacuten VS Causalidad
bull Tiempo competencia y contexto
bull Transformar los datos en conocimiento y acciones
3 Aportar valor
2 Definiendo las necesidades de medicioacuten
iquestDe queacute depende la tasa de conversioacuten
conversiones sesiones
En el negocio online influyen muchos factores tanto la atraccioacuten del cliente como posteriormente en su retencioacuten e ldquoinvitacioacuten a la accioacutenrdquo
Asimismo debemos tener en cuenta que existen factores coyunturales temporales y de cliente que influyen en cada paso
Y finalmente debemos entender el anaacutelisis como una parte vital en la empresa
Captacioacuten de traacuteficoComposicioacuten del traacutefico branded vs not branded geneacuterico vs especiacuteficohellip Modelos de atribucioacuten
Sitio webEstructura y jerarquiacutea facilidad navegacioacuten accesibilidad legibilidad persuabilidad credibilidad confiaza info productos contacto faacutecil etc
ProductoBuen producto buen precio buenas condiciones de enviacuteo medios de pago disponibles promociones etc
Fijar las conversiones micro-conversiones y
KPIs por fases
El embudo de conversioacuten describe el proceso de compra del usuario desde que entra en nuestro sitio web hasta que realiza la compra o incluso hasta que se fideliza (antiguo AIDA de St Elmo Lewis)
Si somos capaces de trocear este proceso y establecer objetivos y KPIs a cada fase podremos identificar al detalle los puntos de mejora
Captacioacuten
Navegacioacuten
Reflexioacuten
Compra
Fidelizacioacuten
El embudo de conversioacuten al detallebull Captacioacuten el usuario visita el sitio el objetivo es aumentar el
traacutefico en especial el traacutefico nuevobull Navegacioacuten el usuario interacciona con el sitio el objetivo es
que el usuario logre encontrar lo que necesita Mejorar la UX buenos resultados de buacutesqueda buena navegabilidad etc
bull Reflexioacuten el usuario compara productos entre tiendas el objetivo conseguir que el usuario inicie el proceso de compra Nos centraremos en reforzar la decisioacuten de compra mediante valoraciones de productos opiniones detalles del productohellip
bull Compra el usuario finaliza una compra el objetivo es conseguir que el usuario compre Proceso de compra raacutepido eficaz registro corto no obligatorio recuperacioacuten de carritoshellip
bull Fidelizacioacuten el usuario vuelve al sitio web el objetivo es conseguir traacutefico y compras recurrentes Promociones estrategia newsletter redes socialeshellip
3 Praacutectica analizando un ecommerce real
Elabora un listado de las funcionalidades que mediriacuteas dentro de zalandoes Piensa en queacute puede ayudarte medir cada una y a queacute fase del embudo corresponden
Praacutectica
Praacutectica
4 Recoleccioacuten de los datos
Recoleccioacuten de datos
Analytics es la herramienta de analiacutetica web maacutes extendida en Internet Aunque es una opcioacuten excepcional a la hora de medir un site padece los mismos inconvenientes que la mayoriacutea de la competencia
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
3 Aportar valor
3 Aportar valor
Mes Sesiones Transacciones Ingresos
Enero 1500 102 9966
Febrero 1420 133 13260
Marzo 1450 172 15514
Abril 1445 224 17748
Mayo 1460 291 19150
3 Aportar valor
iquestPromociones disentildeo del sitio estacionalhellip
Mes Sesiones Transacciones Ingresos Var Ingresos
Ticket Medio
Enero 1500 102 9966 98
Febrero 1420 133 13260 33 100
Marzo 1450 172 15514 17 90
Abril 1445 224 17748 14 192
Mayo 1460 291 19150 8 6574
3 Aportar valor
bull Puede haber maacutes de uacutenica interpretacioacuten vaacutelida
bull Correlacioacuten VS Causalidad
bull Tiempo competencia y contexto
bull Transformar los datos en conocimiento y acciones
3 Aportar valor
2 Definiendo las necesidades de medicioacuten
iquestDe queacute depende la tasa de conversioacuten
conversiones sesiones
En el negocio online influyen muchos factores tanto la atraccioacuten del cliente como posteriormente en su retencioacuten e ldquoinvitacioacuten a la accioacutenrdquo
Asimismo debemos tener en cuenta que existen factores coyunturales temporales y de cliente que influyen en cada paso
Y finalmente debemos entender el anaacutelisis como una parte vital en la empresa
Captacioacuten de traacuteficoComposicioacuten del traacutefico branded vs not branded geneacuterico vs especiacuteficohellip Modelos de atribucioacuten
Sitio webEstructura y jerarquiacutea facilidad navegacioacuten accesibilidad legibilidad persuabilidad credibilidad confiaza info productos contacto faacutecil etc
ProductoBuen producto buen precio buenas condiciones de enviacuteo medios de pago disponibles promociones etc
Fijar las conversiones micro-conversiones y
KPIs por fases
El embudo de conversioacuten describe el proceso de compra del usuario desde que entra en nuestro sitio web hasta que realiza la compra o incluso hasta que se fideliza (antiguo AIDA de St Elmo Lewis)
Si somos capaces de trocear este proceso y establecer objetivos y KPIs a cada fase podremos identificar al detalle los puntos de mejora
Captacioacuten
Navegacioacuten
Reflexioacuten
Compra
Fidelizacioacuten
El embudo de conversioacuten al detallebull Captacioacuten el usuario visita el sitio el objetivo es aumentar el
traacutefico en especial el traacutefico nuevobull Navegacioacuten el usuario interacciona con el sitio el objetivo es
que el usuario logre encontrar lo que necesita Mejorar la UX buenos resultados de buacutesqueda buena navegabilidad etc
bull Reflexioacuten el usuario compara productos entre tiendas el objetivo conseguir que el usuario inicie el proceso de compra Nos centraremos en reforzar la decisioacuten de compra mediante valoraciones de productos opiniones detalles del productohellip
bull Compra el usuario finaliza una compra el objetivo es conseguir que el usuario compre Proceso de compra raacutepido eficaz registro corto no obligatorio recuperacioacuten de carritoshellip
bull Fidelizacioacuten el usuario vuelve al sitio web el objetivo es conseguir traacutefico y compras recurrentes Promociones estrategia newsletter redes socialeshellip
3 Praacutectica analizando un ecommerce real
Elabora un listado de las funcionalidades que mediriacuteas dentro de zalandoes Piensa en queacute puede ayudarte medir cada una y a queacute fase del embudo corresponden
Praacutectica
Praacutectica
4 Recoleccioacuten de los datos
Recoleccioacuten de datos
Analytics es la herramienta de analiacutetica web maacutes extendida en Internet Aunque es una opcioacuten excepcional a la hora de medir un site padece los mismos inconvenientes que la mayoriacutea de la competencia
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
3 Aportar valor
Mes Sesiones Transacciones Ingresos
Enero 1500 102 9966
Febrero 1420 133 13260
Marzo 1450 172 15514
Abril 1445 224 17748
Mayo 1460 291 19150
3 Aportar valor
iquestPromociones disentildeo del sitio estacionalhellip
Mes Sesiones Transacciones Ingresos Var Ingresos
Ticket Medio
Enero 1500 102 9966 98
Febrero 1420 133 13260 33 100
Marzo 1450 172 15514 17 90
Abril 1445 224 17748 14 192
Mayo 1460 291 19150 8 6574
3 Aportar valor
bull Puede haber maacutes de uacutenica interpretacioacuten vaacutelida
bull Correlacioacuten VS Causalidad
bull Tiempo competencia y contexto
bull Transformar los datos en conocimiento y acciones
3 Aportar valor
2 Definiendo las necesidades de medicioacuten
iquestDe queacute depende la tasa de conversioacuten
conversiones sesiones
En el negocio online influyen muchos factores tanto la atraccioacuten del cliente como posteriormente en su retencioacuten e ldquoinvitacioacuten a la accioacutenrdquo
Asimismo debemos tener en cuenta que existen factores coyunturales temporales y de cliente que influyen en cada paso
Y finalmente debemos entender el anaacutelisis como una parte vital en la empresa
Captacioacuten de traacuteficoComposicioacuten del traacutefico branded vs not branded geneacuterico vs especiacuteficohellip Modelos de atribucioacuten
Sitio webEstructura y jerarquiacutea facilidad navegacioacuten accesibilidad legibilidad persuabilidad credibilidad confiaza info productos contacto faacutecil etc
ProductoBuen producto buen precio buenas condiciones de enviacuteo medios de pago disponibles promociones etc
Fijar las conversiones micro-conversiones y
KPIs por fases
El embudo de conversioacuten describe el proceso de compra del usuario desde que entra en nuestro sitio web hasta que realiza la compra o incluso hasta que se fideliza (antiguo AIDA de St Elmo Lewis)
Si somos capaces de trocear este proceso y establecer objetivos y KPIs a cada fase podremos identificar al detalle los puntos de mejora
Captacioacuten
Navegacioacuten
Reflexioacuten
Compra
Fidelizacioacuten
El embudo de conversioacuten al detallebull Captacioacuten el usuario visita el sitio el objetivo es aumentar el
traacutefico en especial el traacutefico nuevobull Navegacioacuten el usuario interacciona con el sitio el objetivo es
que el usuario logre encontrar lo que necesita Mejorar la UX buenos resultados de buacutesqueda buena navegabilidad etc
bull Reflexioacuten el usuario compara productos entre tiendas el objetivo conseguir que el usuario inicie el proceso de compra Nos centraremos en reforzar la decisioacuten de compra mediante valoraciones de productos opiniones detalles del productohellip
bull Compra el usuario finaliza una compra el objetivo es conseguir que el usuario compre Proceso de compra raacutepido eficaz registro corto no obligatorio recuperacioacuten de carritoshellip
bull Fidelizacioacuten el usuario vuelve al sitio web el objetivo es conseguir traacutefico y compras recurrentes Promociones estrategia newsletter redes socialeshellip
3 Praacutectica analizando un ecommerce real
Elabora un listado de las funcionalidades que mediriacuteas dentro de zalandoes Piensa en queacute puede ayudarte medir cada una y a queacute fase del embudo corresponden
Praacutectica
Praacutectica
4 Recoleccioacuten de los datos
Recoleccioacuten de datos
Analytics es la herramienta de analiacutetica web maacutes extendida en Internet Aunque es una opcioacuten excepcional a la hora de medir un site padece los mismos inconvenientes que la mayoriacutea de la competencia
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
3 Aportar valor
iquestPromociones disentildeo del sitio estacionalhellip
Mes Sesiones Transacciones Ingresos Var Ingresos
Ticket Medio
Enero 1500 102 9966 98
Febrero 1420 133 13260 33 100
Marzo 1450 172 15514 17 90
Abril 1445 224 17748 14 192
Mayo 1460 291 19150 8 6574
3 Aportar valor
bull Puede haber maacutes de uacutenica interpretacioacuten vaacutelida
bull Correlacioacuten VS Causalidad
bull Tiempo competencia y contexto
bull Transformar los datos en conocimiento y acciones
3 Aportar valor
2 Definiendo las necesidades de medicioacuten
iquestDe queacute depende la tasa de conversioacuten
conversiones sesiones
En el negocio online influyen muchos factores tanto la atraccioacuten del cliente como posteriormente en su retencioacuten e ldquoinvitacioacuten a la accioacutenrdquo
Asimismo debemos tener en cuenta que existen factores coyunturales temporales y de cliente que influyen en cada paso
Y finalmente debemos entender el anaacutelisis como una parte vital en la empresa
Captacioacuten de traacuteficoComposicioacuten del traacutefico branded vs not branded geneacuterico vs especiacuteficohellip Modelos de atribucioacuten
Sitio webEstructura y jerarquiacutea facilidad navegacioacuten accesibilidad legibilidad persuabilidad credibilidad confiaza info productos contacto faacutecil etc
ProductoBuen producto buen precio buenas condiciones de enviacuteo medios de pago disponibles promociones etc
Fijar las conversiones micro-conversiones y
KPIs por fases
El embudo de conversioacuten describe el proceso de compra del usuario desde que entra en nuestro sitio web hasta que realiza la compra o incluso hasta que se fideliza (antiguo AIDA de St Elmo Lewis)
Si somos capaces de trocear este proceso y establecer objetivos y KPIs a cada fase podremos identificar al detalle los puntos de mejora
Captacioacuten
Navegacioacuten
Reflexioacuten
Compra
Fidelizacioacuten
El embudo de conversioacuten al detallebull Captacioacuten el usuario visita el sitio el objetivo es aumentar el
traacutefico en especial el traacutefico nuevobull Navegacioacuten el usuario interacciona con el sitio el objetivo es
que el usuario logre encontrar lo que necesita Mejorar la UX buenos resultados de buacutesqueda buena navegabilidad etc
bull Reflexioacuten el usuario compara productos entre tiendas el objetivo conseguir que el usuario inicie el proceso de compra Nos centraremos en reforzar la decisioacuten de compra mediante valoraciones de productos opiniones detalles del productohellip
bull Compra el usuario finaliza una compra el objetivo es conseguir que el usuario compre Proceso de compra raacutepido eficaz registro corto no obligatorio recuperacioacuten de carritoshellip
bull Fidelizacioacuten el usuario vuelve al sitio web el objetivo es conseguir traacutefico y compras recurrentes Promociones estrategia newsletter redes socialeshellip
3 Praacutectica analizando un ecommerce real
Elabora un listado de las funcionalidades que mediriacuteas dentro de zalandoes Piensa en queacute puede ayudarte medir cada una y a queacute fase del embudo corresponden
Praacutectica
Praacutectica
4 Recoleccioacuten de los datos
Recoleccioacuten de datos
Analytics es la herramienta de analiacutetica web maacutes extendida en Internet Aunque es una opcioacuten excepcional a la hora de medir un site padece los mismos inconvenientes que la mayoriacutea de la competencia
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
3 Aportar valor
bull Puede haber maacutes de uacutenica interpretacioacuten vaacutelida
bull Correlacioacuten VS Causalidad
bull Tiempo competencia y contexto
bull Transformar los datos en conocimiento y acciones
3 Aportar valor
2 Definiendo las necesidades de medicioacuten
iquestDe queacute depende la tasa de conversioacuten
conversiones sesiones
En el negocio online influyen muchos factores tanto la atraccioacuten del cliente como posteriormente en su retencioacuten e ldquoinvitacioacuten a la accioacutenrdquo
Asimismo debemos tener en cuenta que existen factores coyunturales temporales y de cliente que influyen en cada paso
Y finalmente debemos entender el anaacutelisis como una parte vital en la empresa
Captacioacuten de traacuteficoComposicioacuten del traacutefico branded vs not branded geneacuterico vs especiacuteficohellip Modelos de atribucioacuten
Sitio webEstructura y jerarquiacutea facilidad navegacioacuten accesibilidad legibilidad persuabilidad credibilidad confiaza info productos contacto faacutecil etc
ProductoBuen producto buen precio buenas condiciones de enviacuteo medios de pago disponibles promociones etc
Fijar las conversiones micro-conversiones y
KPIs por fases
El embudo de conversioacuten describe el proceso de compra del usuario desde que entra en nuestro sitio web hasta que realiza la compra o incluso hasta que se fideliza (antiguo AIDA de St Elmo Lewis)
Si somos capaces de trocear este proceso y establecer objetivos y KPIs a cada fase podremos identificar al detalle los puntos de mejora
Captacioacuten
Navegacioacuten
Reflexioacuten
Compra
Fidelizacioacuten
El embudo de conversioacuten al detallebull Captacioacuten el usuario visita el sitio el objetivo es aumentar el
traacutefico en especial el traacutefico nuevobull Navegacioacuten el usuario interacciona con el sitio el objetivo es
que el usuario logre encontrar lo que necesita Mejorar la UX buenos resultados de buacutesqueda buena navegabilidad etc
bull Reflexioacuten el usuario compara productos entre tiendas el objetivo conseguir que el usuario inicie el proceso de compra Nos centraremos en reforzar la decisioacuten de compra mediante valoraciones de productos opiniones detalles del productohellip
bull Compra el usuario finaliza una compra el objetivo es conseguir que el usuario compre Proceso de compra raacutepido eficaz registro corto no obligatorio recuperacioacuten de carritoshellip
bull Fidelizacioacuten el usuario vuelve al sitio web el objetivo es conseguir traacutefico y compras recurrentes Promociones estrategia newsletter redes socialeshellip
3 Praacutectica analizando un ecommerce real
Elabora un listado de las funcionalidades que mediriacuteas dentro de zalandoes Piensa en queacute puede ayudarte medir cada una y a queacute fase del embudo corresponden
Praacutectica
Praacutectica
4 Recoleccioacuten de los datos
Recoleccioacuten de datos
Analytics es la herramienta de analiacutetica web maacutes extendida en Internet Aunque es una opcioacuten excepcional a la hora de medir un site padece los mismos inconvenientes que la mayoriacutea de la competencia
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
bull Puede haber maacutes de uacutenica interpretacioacuten vaacutelida
bull Correlacioacuten VS Causalidad
bull Tiempo competencia y contexto
bull Transformar los datos en conocimiento y acciones
3 Aportar valor
2 Definiendo las necesidades de medicioacuten
iquestDe queacute depende la tasa de conversioacuten
conversiones sesiones
En el negocio online influyen muchos factores tanto la atraccioacuten del cliente como posteriormente en su retencioacuten e ldquoinvitacioacuten a la accioacutenrdquo
Asimismo debemos tener en cuenta que existen factores coyunturales temporales y de cliente que influyen en cada paso
Y finalmente debemos entender el anaacutelisis como una parte vital en la empresa
Captacioacuten de traacuteficoComposicioacuten del traacutefico branded vs not branded geneacuterico vs especiacuteficohellip Modelos de atribucioacuten
Sitio webEstructura y jerarquiacutea facilidad navegacioacuten accesibilidad legibilidad persuabilidad credibilidad confiaza info productos contacto faacutecil etc
ProductoBuen producto buen precio buenas condiciones de enviacuteo medios de pago disponibles promociones etc
Fijar las conversiones micro-conversiones y
KPIs por fases
El embudo de conversioacuten describe el proceso de compra del usuario desde que entra en nuestro sitio web hasta que realiza la compra o incluso hasta que se fideliza (antiguo AIDA de St Elmo Lewis)
Si somos capaces de trocear este proceso y establecer objetivos y KPIs a cada fase podremos identificar al detalle los puntos de mejora
Captacioacuten
Navegacioacuten
Reflexioacuten
Compra
Fidelizacioacuten
El embudo de conversioacuten al detallebull Captacioacuten el usuario visita el sitio el objetivo es aumentar el
traacutefico en especial el traacutefico nuevobull Navegacioacuten el usuario interacciona con el sitio el objetivo es
que el usuario logre encontrar lo que necesita Mejorar la UX buenos resultados de buacutesqueda buena navegabilidad etc
bull Reflexioacuten el usuario compara productos entre tiendas el objetivo conseguir que el usuario inicie el proceso de compra Nos centraremos en reforzar la decisioacuten de compra mediante valoraciones de productos opiniones detalles del productohellip
bull Compra el usuario finaliza una compra el objetivo es conseguir que el usuario compre Proceso de compra raacutepido eficaz registro corto no obligatorio recuperacioacuten de carritoshellip
bull Fidelizacioacuten el usuario vuelve al sitio web el objetivo es conseguir traacutefico y compras recurrentes Promociones estrategia newsletter redes socialeshellip
3 Praacutectica analizando un ecommerce real
Elabora un listado de las funcionalidades que mediriacuteas dentro de zalandoes Piensa en queacute puede ayudarte medir cada una y a queacute fase del embudo corresponden
Praacutectica
Praacutectica
4 Recoleccioacuten de los datos
Recoleccioacuten de datos
Analytics es la herramienta de analiacutetica web maacutes extendida en Internet Aunque es una opcioacuten excepcional a la hora de medir un site padece los mismos inconvenientes que la mayoriacutea de la competencia
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
2 Definiendo las necesidades de medicioacuten
iquestDe queacute depende la tasa de conversioacuten
conversiones sesiones
En el negocio online influyen muchos factores tanto la atraccioacuten del cliente como posteriormente en su retencioacuten e ldquoinvitacioacuten a la accioacutenrdquo
Asimismo debemos tener en cuenta que existen factores coyunturales temporales y de cliente que influyen en cada paso
Y finalmente debemos entender el anaacutelisis como una parte vital en la empresa
Captacioacuten de traacuteficoComposicioacuten del traacutefico branded vs not branded geneacuterico vs especiacuteficohellip Modelos de atribucioacuten
Sitio webEstructura y jerarquiacutea facilidad navegacioacuten accesibilidad legibilidad persuabilidad credibilidad confiaza info productos contacto faacutecil etc
ProductoBuen producto buen precio buenas condiciones de enviacuteo medios de pago disponibles promociones etc
Fijar las conversiones micro-conversiones y
KPIs por fases
El embudo de conversioacuten describe el proceso de compra del usuario desde que entra en nuestro sitio web hasta que realiza la compra o incluso hasta que se fideliza (antiguo AIDA de St Elmo Lewis)
Si somos capaces de trocear este proceso y establecer objetivos y KPIs a cada fase podremos identificar al detalle los puntos de mejora
Captacioacuten
Navegacioacuten
Reflexioacuten
Compra
Fidelizacioacuten
El embudo de conversioacuten al detallebull Captacioacuten el usuario visita el sitio el objetivo es aumentar el
traacutefico en especial el traacutefico nuevobull Navegacioacuten el usuario interacciona con el sitio el objetivo es
que el usuario logre encontrar lo que necesita Mejorar la UX buenos resultados de buacutesqueda buena navegabilidad etc
bull Reflexioacuten el usuario compara productos entre tiendas el objetivo conseguir que el usuario inicie el proceso de compra Nos centraremos en reforzar la decisioacuten de compra mediante valoraciones de productos opiniones detalles del productohellip
bull Compra el usuario finaliza una compra el objetivo es conseguir que el usuario compre Proceso de compra raacutepido eficaz registro corto no obligatorio recuperacioacuten de carritoshellip
bull Fidelizacioacuten el usuario vuelve al sitio web el objetivo es conseguir traacutefico y compras recurrentes Promociones estrategia newsletter redes socialeshellip
3 Praacutectica analizando un ecommerce real
Elabora un listado de las funcionalidades que mediriacuteas dentro de zalandoes Piensa en queacute puede ayudarte medir cada una y a queacute fase del embudo corresponden
Praacutectica
Praacutectica
4 Recoleccioacuten de los datos
Recoleccioacuten de datos
Analytics es la herramienta de analiacutetica web maacutes extendida en Internet Aunque es una opcioacuten excepcional a la hora de medir un site padece los mismos inconvenientes que la mayoriacutea de la competencia
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
iquestDe queacute depende la tasa de conversioacuten
conversiones sesiones
En el negocio online influyen muchos factores tanto la atraccioacuten del cliente como posteriormente en su retencioacuten e ldquoinvitacioacuten a la accioacutenrdquo
Asimismo debemos tener en cuenta que existen factores coyunturales temporales y de cliente que influyen en cada paso
Y finalmente debemos entender el anaacutelisis como una parte vital en la empresa
Captacioacuten de traacuteficoComposicioacuten del traacutefico branded vs not branded geneacuterico vs especiacuteficohellip Modelos de atribucioacuten
Sitio webEstructura y jerarquiacutea facilidad navegacioacuten accesibilidad legibilidad persuabilidad credibilidad confiaza info productos contacto faacutecil etc
ProductoBuen producto buen precio buenas condiciones de enviacuteo medios de pago disponibles promociones etc
Fijar las conversiones micro-conversiones y
KPIs por fases
El embudo de conversioacuten describe el proceso de compra del usuario desde que entra en nuestro sitio web hasta que realiza la compra o incluso hasta que se fideliza (antiguo AIDA de St Elmo Lewis)
Si somos capaces de trocear este proceso y establecer objetivos y KPIs a cada fase podremos identificar al detalle los puntos de mejora
Captacioacuten
Navegacioacuten
Reflexioacuten
Compra
Fidelizacioacuten
El embudo de conversioacuten al detallebull Captacioacuten el usuario visita el sitio el objetivo es aumentar el
traacutefico en especial el traacutefico nuevobull Navegacioacuten el usuario interacciona con el sitio el objetivo es
que el usuario logre encontrar lo que necesita Mejorar la UX buenos resultados de buacutesqueda buena navegabilidad etc
bull Reflexioacuten el usuario compara productos entre tiendas el objetivo conseguir que el usuario inicie el proceso de compra Nos centraremos en reforzar la decisioacuten de compra mediante valoraciones de productos opiniones detalles del productohellip
bull Compra el usuario finaliza una compra el objetivo es conseguir que el usuario compre Proceso de compra raacutepido eficaz registro corto no obligatorio recuperacioacuten de carritoshellip
bull Fidelizacioacuten el usuario vuelve al sitio web el objetivo es conseguir traacutefico y compras recurrentes Promociones estrategia newsletter redes socialeshellip
3 Praacutectica analizando un ecommerce real
Elabora un listado de las funcionalidades que mediriacuteas dentro de zalandoes Piensa en queacute puede ayudarte medir cada una y a queacute fase del embudo corresponden
Praacutectica
Praacutectica
4 Recoleccioacuten de los datos
Recoleccioacuten de datos
Analytics es la herramienta de analiacutetica web maacutes extendida en Internet Aunque es una opcioacuten excepcional a la hora de medir un site padece los mismos inconvenientes que la mayoriacutea de la competencia
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
En el negocio online influyen muchos factores tanto la atraccioacuten del cliente como posteriormente en su retencioacuten e ldquoinvitacioacuten a la accioacutenrdquo
Asimismo debemos tener en cuenta que existen factores coyunturales temporales y de cliente que influyen en cada paso
Y finalmente debemos entender el anaacutelisis como una parte vital en la empresa
Captacioacuten de traacuteficoComposicioacuten del traacutefico branded vs not branded geneacuterico vs especiacuteficohellip Modelos de atribucioacuten
Sitio webEstructura y jerarquiacutea facilidad navegacioacuten accesibilidad legibilidad persuabilidad credibilidad confiaza info productos contacto faacutecil etc
ProductoBuen producto buen precio buenas condiciones de enviacuteo medios de pago disponibles promociones etc
Fijar las conversiones micro-conversiones y
KPIs por fases
El embudo de conversioacuten describe el proceso de compra del usuario desde que entra en nuestro sitio web hasta que realiza la compra o incluso hasta que se fideliza (antiguo AIDA de St Elmo Lewis)
Si somos capaces de trocear este proceso y establecer objetivos y KPIs a cada fase podremos identificar al detalle los puntos de mejora
Captacioacuten
Navegacioacuten
Reflexioacuten
Compra
Fidelizacioacuten
El embudo de conversioacuten al detallebull Captacioacuten el usuario visita el sitio el objetivo es aumentar el
traacutefico en especial el traacutefico nuevobull Navegacioacuten el usuario interacciona con el sitio el objetivo es
que el usuario logre encontrar lo que necesita Mejorar la UX buenos resultados de buacutesqueda buena navegabilidad etc
bull Reflexioacuten el usuario compara productos entre tiendas el objetivo conseguir que el usuario inicie el proceso de compra Nos centraremos en reforzar la decisioacuten de compra mediante valoraciones de productos opiniones detalles del productohellip
bull Compra el usuario finaliza una compra el objetivo es conseguir que el usuario compre Proceso de compra raacutepido eficaz registro corto no obligatorio recuperacioacuten de carritoshellip
bull Fidelizacioacuten el usuario vuelve al sitio web el objetivo es conseguir traacutefico y compras recurrentes Promociones estrategia newsletter redes socialeshellip
3 Praacutectica analizando un ecommerce real
Elabora un listado de las funcionalidades que mediriacuteas dentro de zalandoes Piensa en queacute puede ayudarte medir cada una y a queacute fase del embudo corresponden
Praacutectica
Praacutectica
4 Recoleccioacuten de los datos
Recoleccioacuten de datos
Analytics es la herramienta de analiacutetica web maacutes extendida en Internet Aunque es una opcioacuten excepcional a la hora de medir un site padece los mismos inconvenientes que la mayoriacutea de la competencia
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Captacioacuten de traacuteficoComposicioacuten del traacutefico branded vs not branded geneacuterico vs especiacuteficohellip Modelos de atribucioacuten
Sitio webEstructura y jerarquiacutea facilidad navegacioacuten accesibilidad legibilidad persuabilidad credibilidad confiaza info productos contacto faacutecil etc
ProductoBuen producto buen precio buenas condiciones de enviacuteo medios de pago disponibles promociones etc
Fijar las conversiones micro-conversiones y
KPIs por fases
El embudo de conversioacuten describe el proceso de compra del usuario desde que entra en nuestro sitio web hasta que realiza la compra o incluso hasta que se fideliza (antiguo AIDA de St Elmo Lewis)
Si somos capaces de trocear este proceso y establecer objetivos y KPIs a cada fase podremos identificar al detalle los puntos de mejora
Captacioacuten
Navegacioacuten
Reflexioacuten
Compra
Fidelizacioacuten
El embudo de conversioacuten al detallebull Captacioacuten el usuario visita el sitio el objetivo es aumentar el
traacutefico en especial el traacutefico nuevobull Navegacioacuten el usuario interacciona con el sitio el objetivo es
que el usuario logre encontrar lo que necesita Mejorar la UX buenos resultados de buacutesqueda buena navegabilidad etc
bull Reflexioacuten el usuario compara productos entre tiendas el objetivo conseguir que el usuario inicie el proceso de compra Nos centraremos en reforzar la decisioacuten de compra mediante valoraciones de productos opiniones detalles del productohellip
bull Compra el usuario finaliza una compra el objetivo es conseguir que el usuario compre Proceso de compra raacutepido eficaz registro corto no obligatorio recuperacioacuten de carritoshellip
bull Fidelizacioacuten el usuario vuelve al sitio web el objetivo es conseguir traacutefico y compras recurrentes Promociones estrategia newsletter redes socialeshellip
3 Praacutectica analizando un ecommerce real
Elabora un listado de las funcionalidades que mediriacuteas dentro de zalandoes Piensa en queacute puede ayudarte medir cada una y a queacute fase del embudo corresponden
Praacutectica
Praacutectica
4 Recoleccioacuten de los datos
Recoleccioacuten de datos
Analytics es la herramienta de analiacutetica web maacutes extendida en Internet Aunque es una opcioacuten excepcional a la hora de medir un site padece los mismos inconvenientes que la mayoriacutea de la competencia
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Fijar las conversiones micro-conversiones y
KPIs por fases
El embudo de conversioacuten describe el proceso de compra del usuario desde que entra en nuestro sitio web hasta que realiza la compra o incluso hasta que se fideliza (antiguo AIDA de St Elmo Lewis)
Si somos capaces de trocear este proceso y establecer objetivos y KPIs a cada fase podremos identificar al detalle los puntos de mejora
Captacioacuten
Navegacioacuten
Reflexioacuten
Compra
Fidelizacioacuten
El embudo de conversioacuten al detallebull Captacioacuten el usuario visita el sitio el objetivo es aumentar el
traacutefico en especial el traacutefico nuevobull Navegacioacuten el usuario interacciona con el sitio el objetivo es
que el usuario logre encontrar lo que necesita Mejorar la UX buenos resultados de buacutesqueda buena navegabilidad etc
bull Reflexioacuten el usuario compara productos entre tiendas el objetivo conseguir que el usuario inicie el proceso de compra Nos centraremos en reforzar la decisioacuten de compra mediante valoraciones de productos opiniones detalles del productohellip
bull Compra el usuario finaliza una compra el objetivo es conseguir que el usuario compre Proceso de compra raacutepido eficaz registro corto no obligatorio recuperacioacuten de carritoshellip
bull Fidelizacioacuten el usuario vuelve al sitio web el objetivo es conseguir traacutefico y compras recurrentes Promociones estrategia newsletter redes socialeshellip
3 Praacutectica analizando un ecommerce real
Elabora un listado de las funcionalidades que mediriacuteas dentro de zalandoes Piensa en queacute puede ayudarte medir cada una y a queacute fase del embudo corresponden
Praacutectica
Praacutectica
4 Recoleccioacuten de los datos
Recoleccioacuten de datos
Analytics es la herramienta de analiacutetica web maacutes extendida en Internet Aunque es una opcioacuten excepcional a la hora de medir un site padece los mismos inconvenientes que la mayoriacutea de la competencia
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
El embudo de conversioacuten describe el proceso de compra del usuario desde que entra en nuestro sitio web hasta que realiza la compra o incluso hasta que se fideliza (antiguo AIDA de St Elmo Lewis)
Si somos capaces de trocear este proceso y establecer objetivos y KPIs a cada fase podremos identificar al detalle los puntos de mejora
Captacioacuten
Navegacioacuten
Reflexioacuten
Compra
Fidelizacioacuten
El embudo de conversioacuten al detallebull Captacioacuten el usuario visita el sitio el objetivo es aumentar el
traacutefico en especial el traacutefico nuevobull Navegacioacuten el usuario interacciona con el sitio el objetivo es
que el usuario logre encontrar lo que necesita Mejorar la UX buenos resultados de buacutesqueda buena navegabilidad etc
bull Reflexioacuten el usuario compara productos entre tiendas el objetivo conseguir que el usuario inicie el proceso de compra Nos centraremos en reforzar la decisioacuten de compra mediante valoraciones de productos opiniones detalles del productohellip
bull Compra el usuario finaliza una compra el objetivo es conseguir que el usuario compre Proceso de compra raacutepido eficaz registro corto no obligatorio recuperacioacuten de carritoshellip
bull Fidelizacioacuten el usuario vuelve al sitio web el objetivo es conseguir traacutefico y compras recurrentes Promociones estrategia newsletter redes socialeshellip
3 Praacutectica analizando un ecommerce real
Elabora un listado de las funcionalidades que mediriacuteas dentro de zalandoes Piensa en queacute puede ayudarte medir cada una y a queacute fase del embudo corresponden
Praacutectica
Praacutectica
4 Recoleccioacuten de los datos
Recoleccioacuten de datos
Analytics es la herramienta de analiacutetica web maacutes extendida en Internet Aunque es una opcioacuten excepcional a la hora de medir un site padece los mismos inconvenientes que la mayoriacutea de la competencia
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
El embudo de conversioacuten al detallebull Captacioacuten el usuario visita el sitio el objetivo es aumentar el
traacutefico en especial el traacutefico nuevobull Navegacioacuten el usuario interacciona con el sitio el objetivo es
que el usuario logre encontrar lo que necesita Mejorar la UX buenos resultados de buacutesqueda buena navegabilidad etc
bull Reflexioacuten el usuario compara productos entre tiendas el objetivo conseguir que el usuario inicie el proceso de compra Nos centraremos en reforzar la decisioacuten de compra mediante valoraciones de productos opiniones detalles del productohellip
bull Compra el usuario finaliza una compra el objetivo es conseguir que el usuario compre Proceso de compra raacutepido eficaz registro corto no obligatorio recuperacioacuten de carritoshellip
bull Fidelizacioacuten el usuario vuelve al sitio web el objetivo es conseguir traacutefico y compras recurrentes Promociones estrategia newsletter redes socialeshellip
3 Praacutectica analizando un ecommerce real
Elabora un listado de las funcionalidades que mediriacuteas dentro de zalandoes Piensa en queacute puede ayudarte medir cada una y a queacute fase del embudo corresponden
Praacutectica
Praacutectica
4 Recoleccioacuten de los datos
Recoleccioacuten de datos
Analytics es la herramienta de analiacutetica web maacutes extendida en Internet Aunque es una opcioacuten excepcional a la hora de medir un site padece los mismos inconvenientes que la mayoriacutea de la competencia
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
3 Praacutectica analizando un ecommerce real
Elabora un listado de las funcionalidades que mediriacuteas dentro de zalandoes Piensa en queacute puede ayudarte medir cada una y a queacute fase del embudo corresponden
Praacutectica
Praacutectica
4 Recoleccioacuten de los datos
Recoleccioacuten de datos
Analytics es la herramienta de analiacutetica web maacutes extendida en Internet Aunque es una opcioacuten excepcional a la hora de medir un site padece los mismos inconvenientes que la mayoriacutea de la competencia
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Elabora un listado de las funcionalidades que mediriacuteas dentro de zalandoes Piensa en queacute puede ayudarte medir cada una y a queacute fase del embudo corresponden
Praacutectica
Praacutectica
4 Recoleccioacuten de los datos
Recoleccioacuten de datos
Analytics es la herramienta de analiacutetica web maacutes extendida en Internet Aunque es una opcioacuten excepcional a la hora de medir un site padece los mismos inconvenientes que la mayoriacutea de la competencia
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Praacutectica
4 Recoleccioacuten de los datos
Recoleccioacuten de datos
Analytics es la herramienta de analiacutetica web maacutes extendida en Internet Aunque es una opcioacuten excepcional a la hora de medir un site padece los mismos inconvenientes que la mayoriacutea de la competencia
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
4 Recoleccioacuten de los datos
Recoleccioacuten de datos
Analytics es la herramienta de analiacutetica web maacutes extendida en Internet Aunque es una opcioacuten excepcional a la hora de medir un site padece los mismos inconvenientes que la mayoriacutea de la competencia
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Recoleccioacuten de datos
Analytics es la herramienta de analiacutetica web maacutes extendida en Internet Aunque es una opcioacuten excepcional a la hora de medir un site padece los mismos inconvenientes que la mayoriacutea de la competencia
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Para poder recolectar datos todas las herramientas de analiacutetica web introducen un pequentildeo script dentro del coacutedigo fuente de la paacutegina
Ese script hace de base para otros Si no se ejecuta el primero no hay enviacuteo
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Normalmente el script base recoge por defecto datos fundamentales sobre la paacutegina actual el navegador y el usuario
Si queremos ampliar los datos recopilados hay que introducir maacutes scripts
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Estos coacutedigos de seguimiento reciben varios nombres rastreadores trackers snippets pixelshellip
Nosotros los llamaremos etiquetas (tags)
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Las EtiquetasEnsucian el documento web
Deterioran el rendimiento
Requieren de la intervencioacuten de IT
Provocan errores
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Gestores de etiquetasSolucioacuten software para la gestioacuten simplificada del coacutedigo web y de las distintas etiquetas de las herramientas de tracking online
Liberamos la paacutegina de etiquetas
Las administramos externamente
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Gestores de etiquetasUn gestor de etiquetas al final es un script que se inserta en la paacutegina y que toma el control del resto de etiquetas
Una etiqueta para gestionarlas a todas
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Algunas consideraciones previas
1 Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
2
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimiento
2
3
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Algunas consideraciones previas
1
Por siacute solos no miden nada es necesario crear alguna etiqueta para enviar datos
Todos los gestores de etiquetas tienen un script base que hay que insertar en cada paacutegina que deseemos medir
Cambios posteriores que tengan lugar en la paacutegina pueden afectar a la funcionalidad del gestor requiere mantenimientoMediciones maacutes avanzadas requieren ciertos conocimientos teacutecnicos sobre web y programacioacuten Javascript
2
3
4
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
5 Implementacioacuten con Google Tag Manager
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Google Tag ManagerEl gestor de etiquetas de Google
Curva de aprendizaje suave y gran cantidad de documentacioacuten en la red
Completamente gratuito
Potente y versaacutetil Disponible tambieacuten SDKs para Android e iOS
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
iquestCoacutemo se instala
Todas las paacuteginas del portal han de contener el script base de GTM al comienzo del ltbodygt
ltbodygt
ltdivgt lth2gtCSS Selectorslth2gtltpgtIn CSS selectors are patterns used to select the element(s) you want to styleltpgt
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Y a partir de ese momento ya podemos empezar a crear etiquetas a mansalva
Pero anteshellip Un vistazo a los componentes de GTM
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Jerarquiacutea de GTMCU
ENTA
CONTENEDORES
ETIQUETAS
DISPARADORES
VARIABLES
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
El contenedorEl script base de cada contenedor lo podremos encontrar en la configuracioacuten de GTM
GTM-XXXXXX
Cada contenedor lleva asociado un ID que lo identifica de forma uniacutevoca
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Los componentes del contenedor
ETIQUETA(Tag)
VARIABLEDISPARADOR(Trigger)
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
ETIQUETA
El componente principal de GTM Nos permitiraacuten enviar datos de analiacutetica a la herramienta que queramos
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
ETIQUETA
Coleccioacuten de plantillas para una configuracioacuten raacutepida y sencilla de muacuteltiples tipos de etiqueta
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
ETIQUETA
Tambieacuten podremos modificar el DOM de la paacutegina e inyectar nuevo contenido HTML (scripts) mediante un tipo de etiqueta especial
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
DISPARADOR
Diferentes clases de disparadores para definir con precisioacuten cuaacutendo se debe lanzar una etiqueta
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
DISPARADOR
Cuando el usuario visita cierta paacutegina
Al hacer clic sobre un elemento
Al enviar un formulario Cuando un elemento se
hace visible en la paacutegina Pasados x segundos Cuando se produce un
error JS hellip
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
DISPARADOR
Capacidad para crear disparadores en funcioacuten de nuestras necesidades en cada momento
Un disparador tambieacuten podraacute usarse para bloquear etiquetas
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
VARIABLE
Valores auxiliares
definidos a partir de la paacutegina de un elemento del DOM
o de una funcioacuten personalizada
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
VARIABLE
Cualquier elementovariable del
DOM es susceptible de capturarse como
variable
Tambieacuten podremos programar nuestras
propias funciones e invocarlas como
variables en todo momento
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
VARIABLE
Podremos invocar variables
a la hora de configurar
cualquiera de los tres componentes
principales de GTM
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
VARIABLE
Las variables ampliacutean
enormemente las posibilidades de GTM hacieacutendolo una herramienta
maacutes escalable y eficiente
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
ETIQUETA
DISPARADOR
Para poder enviar datos hay que crear etiquetas
Para ejecutar nuestras
etiquetas tendremos que
configurar disparadores
Las variables facilitaraacuten la configuracioacuten de etiquetas y disparadores y los haraacuten maacutes versaacutetiles
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Queacute necesitamos para trabajar
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Un ordenador con conectividad a Internet
1
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Una cuenta de Gmail y una de Analytics
2
Conviene que sea una propiedad nueva ya que vamos a enviar traacutefico basura
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Google Chrome como navegador principal
3
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Extensiones Tag Assistant Tag Manager
Injector Dataslayer Wasp EditThisCookie Ghostery GTM Sonar
4
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
La ntildeapaPara poder trabajar cada uno de nosotros con un contenedor independiente de GTM sobre la misma web haremos uso de la extensioacuten Tag Manager Injector
Este plugin para Chrome emula una instalacioacuten de GTM en la web que queramos Obviamente solo tendraacute efecto en nuestro navegador pero nos permitiraacute hacer todas las pruebas de implementacioacuten que queramos
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Un recorrido por la interfaz de GTM
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Listado de Cuentas y Contenedores
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Overview del contenedor
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Control de versiones
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Administrador
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Etiquetas
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Plantillas de etiquetas
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Disparadores
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Tipos de disparadores
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Variables
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Tipos de variables
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Depurar y publicar
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Traacutefico y navegacioacuten
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Midiendo traacutefico y navegacioacuten En Analytics
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Utilidades en Analytics
Info GeneralPaginacioacuten meacutetricas baacutesicas de la
sesioacuten fuente de traacutefico e informacioacuten del navegador dispositivos y
procedencia
Ecommerce y pixelsTodos los datos de las transacciones id
transaccioacuten importe productos vendidos etc
ObjetivosVisitas a paacuteginas que se consideran clave
en mi sitio y tracking del checkout
EventosAcciones que el usuario realiza dentro
de mi sitio hacer clic en un botoacuten antildeadir producto a carrito usar un filtro enviar un formulario reproducir video
etc
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Seguimiento General
Meacutetricas baacutesicasSesiones usuarios rebote tiempo de permanencia entradas salidas paacuteginassesioacuten usuarios nuevos etc
Dimensiones baacutesicasFuente medio paacutegina informacioacuten geograacutefica idioma dispositivo navegador sistema operativo ID usuario etc
iexclExtra Informacioacuten demograacutefica e intereses desde Doubleclick y dimensiones personalizadas propias
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Seguimiento GeneralAgrupaciones de contenido
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Seguimiento GeneralURLs Virtuales
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
iquestCoacutemo lo hariacuteamos en GTM
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada TRIGGERS
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta VARIABLES
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta TAGS
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
iquestCoacutemo lo hariacuteamos en GTM
En base a estas variables construir el disparador que se active cuando el usuario llega a la paacutegina indicada
Lo primero es pensar queacute informacioacuten necesitamos leer de la paacutegina y enviar a Analytics O queacute valores tendremos que evaluar para decidir si es la paacutegina correcta
Con todos estos los mimbres en la mano nos ponemos a configurar nuestra nueva etiqueta
Una vez esteacute hecha probaremos su correcto funcionamiento en local con la Vista Previa antes de publicar todos los cambios realizados
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
A tener en cuenta
Los disparadores definen cuaacutendo se debe lanzar una etiqueta Si no asociamos uno la etiqueta no se ejecutaraacute
En nuestra primera etiqueta usaremos un disparador que ya viene creado por defecto Todas las paacuteginas
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
La etiqueta de Google Analytics
GTM dispone de muacuteltiples plantillas de etiqueta seguacuten la herramienta a la que vamos a enviar los datos recopilados
En este y los siguientes casos usaremos la etiqueta de Google Analytics
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
La etiqueta de Google Analytics
Esta etiqueta se puede configurar para medir
distintos tipos de acciones de usuario en la
paacuteginaCambiar esta
configuracioacuten es cambiar el tipo de hit que
enviamos a Analytics
EventTransaction
Pageview Social
Decorate Link amp Form
Timing
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Creando nuestra primera etiqueta
Nos dirigimos al apartado de etiquetas (tags) y
seleccionamos Nueva
Se nos presentan muacuteltiples plantillas de etiqueta para configurar Elegimos la de Google Analytics
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Creando nuestra primera etiqueta
Seleccionamos Universal como la versioacuten de Analytics a la que enviaremos los datos
Introducimos el identificador de la propiedad de Analytics (UA) al que queremos enviar
la informacioacuten
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Creando nuestra primera etiqueta
Seleccionamos como disparador Todas las
paacuteginas para esta etiqueta y guardamos los cambios
Antes de publicar nada probamos
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Creando nuestra primera etiqueta En GTM
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Vista PreviaGTM tiene una herramienta que nos permite depurar todas las implementaciones que hagamos antes de publicarlas Se llama Vista PreviaLa podemos activar desde el desplegable de publicacioacuten cuando tengamos cambios pendientes en nuestro contenedor
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Vista PreviaUna vez activada la Vista Previa nos mostraraacute un resumen detallado de todas las etiquetas y variables del contenedor para cada evento del usuario asiacute como un anaacutelisis completo de los contenidos del DataLayer
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Depuracioacuten
Antes de publicar ninguacuten cambio en GTM debemos revisar que todo funciona seguacuten lo previsto con la ayuda de la Vista Previa
Y si hemos introducido alguacuten tipo de script debemos echar un ojo a la consola de desarrollador del navegador para ver si se estaacute disparando alguacuten error
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Depuracioacuten
Gracias al plugin Tag Manager Injector vamos a poder usar la Vista Previa dentro del site que realmente estamos midiendo
En el apartado de Real-Time de nuestra propiedad de Analytics podremos monitorizar toda nuestra navegacioacuten
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Aunque estemos en modo Vista Previa y todaviacutea no hayamos publicado los cambios las etiquetas que se ejecuten siacute que seraacuten reales
Toda nuestra actividad en la Vista Previa quedaraacute registrada en la propiedad de Analytics a la que apuntemos
PROTIP
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Depuracioacuten y Vista PreviaEn GTM
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Medicioacuten avanzada de paacuteginasEn Analytics
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Medicioacuten avanzada de paacuteginas
La etiqueta de Analytics en GTM posee un gran abanico de opciones de configuracioacuten que nos permitiraacuten personalizar aspectos del enviacuteo El tiacutetulo y la URL de la paacutegina Variables personalizadas adjuntas Agrupaciones de contenido Datos de comercio electroacutenico Cross-domain Etc
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Medicioacuten avanzada de paacuteginas
Podemos personalizar el enviacuteo de una paacutegina una vez seleccionemos el tipo de medicioacuten (Pageview)
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Medicioacuten avanzada de paacuteginasEn GTM
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Las Variables
Ampliacutean las posibilidades a la hora de configurar otros elementos de GTM
Facilitan el trabajo Pueden ser todo lo complicadas
que queramos Se pueden invocar en la
configuracioacuten de una etiqueta un disparador u otra variable
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Tipos de Variables
Variables por defectoSon un conjunto preconfigurado que vienen deshabilitadas por defecto en cada nuevo contenedor de GTM
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Tipos de VariablesVariables personalizadasLas iremos creando seguacuten nuestras necesidades a medida que nuestro contenedor crezcaExisten varias clases de variable dentro de las personalizadas
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Variables personalizadas
Cada clase estaacute orientada a un tipo de informacioacuten diferenteEs importante saber para queacute sirve cada una para poder recurrir a ellas cuando las necesitemos
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Jugando con variablesEn GTM
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Eventos personalizados
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Eventos personalizadosEn Analytics
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Eventosbull Enviar cualquier dato incluso caacutelculosbull Alcance de hitbull Estructura faacutecil de entenderbull Escritura consistente
Elemento a etiquetar Descripcioacuten
Categoriacutea Agrupa el evento CV Videos boton productos etcAccioacuten Descargar clic ver etcEtiqueta (opcional) Elemento comodiacuten versiones documento etcValor (opcional) Valor econoacutemico asociado
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Eventos
Sugerencia de estructura para eventos
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
EventosEjemplo de evento para filtro
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Herramienta potente y flexible de Analytics para medir interacciones de usuario maacutes complejas
Vehiacuteculo de informacioacuten complementaria (no siempre tienen que ser interactivos)
Demuestran la verdadera eficacia de GTM Faacutecil configuracioacuten desde GTM
(son una variante de la etiqueta de Google Analytics)
Eventos
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Configurando un evento en GTM
Elegimos como tipo de etiqueta la
de Analytics
Seleccionamos el tipo de medicioacuten Event y
configuramos los tres principales campos de un
evento en Analytics
El uso de Variables seraacute fundamental para lograr una medicioacuten maacutes precisa
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
La verdadera dificultad a la hora
de crear un evento estaacute en saber cuaacutendo debe
dispararse
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Cuaacutendo disparar un evento
TRIGGERS
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Cuaacutendo disparar un evento
Una paacutegina vista (tres tiempos de carga)
Un click sobre un enlace o un elemento cualquiera
Un enviacuteo de un formulario
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Cuaacutendo disparar un evento
Una transicioacuten de paacutegina asiacutencrona
Un error en consola
Un evento personalizado
Un temporizador
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Disparadores
En la mayoriacutea de los casos para configurar un disparador vamos a necesitar hacer uso de selectores CSS y expresiones regulares
Las variables tambieacuten juegan un papel fundamental en estos casos por ejemplo evaluar una condicioacuten o encontrar un elemento del DOM programaacuteticamente
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Creando un disparador de paacutegina
Lo primero es averiguar cuaacutel es el patroacuten de URL de la paacutegina o
conjunto de paacuteginas
En GTM vamos a Triggers y creamos uno nuevo Le damos un nombre coherente elegimos Page View como tipo principal y seleccionamos DOM Ready
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Creando un disparador de paacutegina
Despueacutes de elegir el tipo hay que seleccionar la condicioacuten de disparoEs aquiacute donde podemos hacer uso de expresiones regulares para definir un patroacuten de URL
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Para crear un trigger sobre un botoacuten necesitamos saber queacute botoacuten es para ello intentaremos obtener su selector CSS
Creando un disparador de click
productDetailsMain gt divcartButtonBoxmarginRight gt buttonajaxAddToCartBtn
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Creando un disparador de click
Desde Chrome podemos obtener el selector CSS de cualquier elemento de la paacutegina de forma automaacutetica haciendo uso del panel de herramientas para desarrolladores
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Creando un disparador de click
Sabiendo su selector basta con crear un nuevo trigger de tipo Click y configurarlo para que se dispare cuando
Click Element matches CSS selector [nuestro CSS]
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Creando un disparador de formulario
Los formularios son muy parecidos a los clicks basta con localizar el elemento y mediante su selector construir el disparador
formnewsletterValidateDetail
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Creando un disparador de formulario
Pero son muchas las veces en las que un disparador de formulario falla por unos motivos u otrosEn estos casos la programacioacuten (de Variables) es tu uacutenico aliado
formnewsletterValidateDetail
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Creando un disparador de timerLos triggers basados en un temporizador disparan un evento cada cierto tiempo un nuacutemero limitado de vecesSuelen usarse mucho para sacar a un usuario del rebote en portales de contenidos
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Creando un disparador de timer
Nombre del evento que dispara (Datalayer)
Frecuencia de disparo(en ms)
Nuacutemero maacuteximo de iteraciones
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Creando un disparador de historyGTM puede detectar cambios en el fragmento hash de la URL de la paacutegina actual algo muy tiacutepico de las one-page sites o de algunos elementos web con transiciones asiacutencronas (AJAX)
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Creando un disparador de history
Si sabemos de antemano queacute formato tendraacute el nuevo fragmento hash podremos construir un disparador en base a eacutel Los disparadores de esta clase nos permiten enviar paacuteginas virtuales a Analytics
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Enviando una paacutegina virtual
Para crear una paacutegina virtual en Analytics viacutea GTM hemos de crear una etiqueta de GA de tipo pageviewEn la configuracioacuten modificaremos manualmente el campo page del enviacuteo por el pathname que queramos que tenga la nueva paacutegina Usaremos el disparador de History change que hicimos antes para saber cuando se produce el cambio en la URL
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Disparadores y eventosEn GTM
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Ecommerce
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Comercio electroacutenicoEn Analytics
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Comercio Electroacutenicobull Funciona como un pixel de conversioacuten debe
ejecutarse tras la validacioacuten de la comprabull Orientado a eCommerce
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Comercio Electroacutenicoltscriptgt
ga(require ecommerce) Despueacutes de crear el objeto de seguimiento Incluimos los valores de la transaccioacuten
ga(ecommerceaddTransaction id 1234 affiliation Coacutedigo promocional (vacio) revenue 1199 Ingresos transaccion shipping 5 Gastos de envio tax 129 Impuestos currency EUR Coacutedigo de moneda)Recorremos los distintos productos y aplicamos el siguiente coacutedigo ga(ecommerceaddItem id 1234 ID transaccion name Fluffy Pink Bunnies Nombre producto sku DD23444 SKU producto category Party Toys Categoriacutea Hermes (PMM) price 1199 Precio del producto quantity 1 Cantidad currency EUR Coacutedigo de moneda ) ga(ecommercesend) ltscriptgt
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Comercio electroacutenico en GTM
Al igual que en una implementacioacuten estaacutendar de Analytics con GTM vamos a necesitar coacutedigos de comercio electroacutenico insertados dentro de la paacutegina
ltgt
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Comercio electroacutenico en GTM
La intervencioacuten de los programadores en este
punto es inevitableLos datos de una
transaccioacuten deben ser expuestos dentro del
coacutedigo fuente de la paacutegina de manera
similar a como se veniacutea haciendo hasta ahora
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Comercio electroacutenico en GTM
Pero para que GTM pueda leer esta informacioacuten de la paacutegina el formato seraacute diferente al claacutesico y recibe otro nombre
Datalayer
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
El Datalayer
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
ldquo ldquoArray Javascript que crea GTM para almacenar todos los datos asociados de
los eventos que se disparen en una paacutegina y establecer una pasarela de comunicacioacuten con su capa de datos
DATALAYER
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
ldquo ldquoDATALAYER (en cristiano)
Herramienta que usa GTM para guardar todos los datos de las interacciones del
usuario y cualquier otro tipo de informacioacuten extra que queramos
pasarle sobre esa paacutegina
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Siempre escuchandoCada una de las acciones que llevan a cabo los usuarios en una paacutegina desencadena un evento y una serie de datos asociados
GTM se puede configurar para que monitorice praacutecticamente cualquier accioacuten del usuario que navega por una web
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
iquestEscucharEl conjunto de datos de estas acciones se almacenan en el
Datalayer de cada paacutegina (GTM lo crea por defecto si no existe
previamente)
Posteriormente podremos leer esta informacioacuten y crear
etiquetas variables y disparadores en base a estos
datos
01101010001001001111001010101101001010101011110000111101010
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
iquestY por queacute es tan importante
DATALAYER
Porque es el nexo de comunicacioacuten entre GTM e IT
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
En algunas ocasiones desde GTM necesitaremos que se nos avise cuando se produzca cierto evento en la paacutegina
En otras necesitaremos que nos pasen informacioacuten que no se encuentra
disponible a nivel de paacutegina (transacciones productos usuarios hellip)
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Y toda esa comunicacioacuten tiene lugar dentro del Datalayer
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Volviendo al tema de las transaccioneshellip
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Midiendo una transaccioacuten en GTMPrimero hemos de saber a queacute URL nos redirige la web cuando hacemos una compra ejemplomysitecomonestepcheckoutsuccessEste es un dato clave en cualquier ecomerce Tenemos que crear un disparador de paacutegina en base a esta URL
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Midiendo una transaccioacuten en GTM
Despueacutes basta con que creemos una etiqueta de GA
de tipo Transaction y seleccionemos el disparador
recieacuten hecho
Si el datalayer de la transaccioacuten estaacute correctamente construido en esa paacutegina GTM lo leeraacute y lo enviaraacute a Analytics
junto con los datos de los productos asociados
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Comercio electroacutenicoEn GTM
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Pixels de conversioacuten
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Pixels de conversioacuten en GTM
Existen dos formas de construir pixels en GTM Con una plantilla de una herramienta
especiacutefica Con la etiqueta de HTML personalizado
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Pixels de conversioacuten en GTMGTM tiene una coleccioacuten de plantillas que facilitan enormemente el enviacuteo de informacioacuten a ciertas herramientas ademaacutes de Google AnalyticsEacutestas van desde paacuteginas hasta medicioacuten de leads y conversiones
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Pixels de conversioacuten en GTM
Si el pixel que queremos crear es de una herramienta que no se encuentra entre las plantillas de GTM tendremos que insertar manualmente el coacutedigo
Para ello haremos uso de la etiqueta HTML personalizado
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
HTML PersonalizadoEs un tipo de etiqueta especial que nos permite insertar cualquier tipo de coacutedigo HTML dentro de la paacuteginaPodremos pegar scripts de cualquier tipo desde pixels hasta funciones que alteren el contenido de la paacutegina o que lean cierta informacioacuten
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
HTML Personalizado
Es una de las funcionalidades maacutes potentes y versaacutetiles de GTM pero tambieacuten una de las maacutes peligrosas
Un error de programacioacuten en una de estas etiquetas podriacutea llegar a romper la paacutegina e impedir que cargue correctamente
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Imagen PersonalizadaLa etiqueta de Custom Image nos permite hacer una solicitud a una URL concreta con los paraacutemetros que queramos sin tocar el coacutedigo de la paacuteginaEs muy uacutetil para crear pixels especiales y medir usuarios que tienen Javascript deshabilitado en su navegador
httpwwwlunametricscomblog20150323gtm-iframe-no-javascript
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Pixels de conversioacutenEn GTM
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-
Gracias
- DO IT YOURSELF
- Slide 2
- Contenidos del Taller
- 1 Queacute es la Analiacutetica Web
- Toma de decisiones en la empresa
- iquestAnaliacutetica Web
- iquestAnaliacutetica Web (2)
- Todo deberiacutea responder a un objetivohellip
- Slide 9
- Analiacutetica Web
- Queacute medir Meacutetricas que necesitamos segmentos de cliente doacutende
- 1 Queacute medir
- 1 Queacute medir (2)
- 1 Queacute medir (3)
- 1 Queacute medir (4)
- 1 Queacute medir (5)
- 1 Queacute medir (6)
- 1 Queacute medir (7)
- 2 Recoleccioacuten de datos
- 2 Recoleccioacuten de datos (2)
- 3 Aportar valor
- 3 Aportar valor (2)
- 3 Aportar valor (3)
- 3 Aportar valor (4)
- 3 Aportar valor (5)
- 3 Aportar valor (6)
- 3 Aportar valor (7)
- 2 Definiendo las necesidades de medicioacuten
- iquestDe queacute depende la tasa de conversioacuten conversiones sesiones
- Slide 30
- Captacioacuten de traacutefico Composicioacuten del traacutefico branded vs not br
- Fijar las conversiones micro-conversiones y KPIs por fases
- Slide 33
- El embudo de conversioacuten al detalle
- 3 Praacutectica analizando un ecommerce real
- Slide 36
- Praacutectica
- 4 Recoleccioacuten de los datos
- Recoleccioacuten de datos
- Para poder recolectar datos todas las herramientas de analiacutetica
- Slide 41
- Estos coacutedigos de seguimiento reciben varios nombres rastreador
- Slide 43
- Gestores de etiquetas
- Gestores de etiquetas (2)
- Algunas consideraciones previas
- Algunas consideraciones previas (2)
- Algunas consideraciones previas (3)
- Algunas consideraciones previas (4)
- 5 Implementacioacuten con Google Tag Manager
- Google Tag Manager
- iquestCoacutemo se instala
- Slide 53
- Jerarquiacutea de GTM
- El contenedor
- Los componentes del contenedor
- Slide 57
- Slide 58
- Slide 59
- Slide 60
- Slide 61
- Slide 62
- Slide 63
- Slide 64
- Slide 65
- Slide 66
- Slide 67
- Queacute necesitamos para trabajar
- Un ordenador con conectividad a Internet
- Una cuenta de Gmail y una de Analytics
- Google Chrome como navegador principal
- Slide 72
- La ntildeapa
- Un recorrido por la interfaz de GTM
- Listado de Cuentas y Contenedores
- Overview del contenedor
- Control de versiones
- Administrador
- Etiquetas
- Plantillas de etiquetas
- Disparadores
- Tipos de disparadores
- Variables
- Tipos de variables
- Depurar y publicar
- Traacutefico y navegacioacuten
- Midiendo traacutefico y navegacioacuten
- Utilidades en Analytics
- Seguimiento General
- Seguimiento General (2)
- Seguimiento General (3)
- iquestCoacutemo lo hariacuteamos en GTM
- iquestCoacutemo lo hariacuteamos en GTM (2)
- iquestCoacutemo lo hariacuteamos en GTM (3)
- iquestCoacutemo lo hariacuteamos en GTM (4)
- A tener en cuenta
- La etiqueta de Google Analytics
- La etiqueta de Google Analytics (2)
- Creando nuestra primera etiqueta
- Creando nuestra primera etiqueta (2)
- Creando nuestra primera etiqueta (3)
- Creando nuestra primera etiqueta
- Vista Previa
- Vista Previa (2)
- Depuracioacuten
- Depuracioacuten (2)
- Slide 107
- Depuracioacuten y Vista Previa
- Medicioacuten avanzada de paacuteginas
- Medicioacuten avanzada de paacuteginas (2)
- Medicioacuten avanzada de paacuteginas (3)
- Medicioacuten avanzada de paacuteginas (4)
- Las Variables
- Tipos de Variables
- Tipos de Variables (2)
- Variables personalizadas
- Jugando con variables
- Eventos personalizados
- Eventos personalizados (2)
- Eventos
- Eventos (2)
- Eventos (3)
- Slide 123
- Configurando un evento en GTM
- Slide 125
- Cuaacutendo disparar un evento
- Cuaacutendo disparar un evento (2)
- Cuaacutendo disparar un evento (3)
- Disparadores (2)
- Creando un disparador de paacutegina
- Creando un disparador de paacutegina (2)
- Creando un disparador de click
- Creando un disparador de click (2)
- Creando un disparador de click (3)
- Creando un disparador de formulario
- Creando un disparador de formulario (2)
- Creando un disparador de timer
- Creando un disparador de timer (2)
- Creando un disparador de history
- Creando un disparador de history (2)
- Enviando una paacutegina virtual
- Disparadores y eventos
- Ecommerce
- Comercio electroacutenico
- Comercio Electroacutenico
- Comercio Electroacutenico (2)
- Comercio electroacutenico en GTM
- Comercio electroacutenico en GTM (2)
- Comercio electroacutenico en GTM (3)
- El Datalayer
- Slide 151
- Slide 152
- Slide 153
- Slide 154
- Slide 155
- Slide 156
- Slide 157
- Volviendo al tema de las transaccioneshellip
- Midiendo una transaccioacuten en GTM
- Midiendo una transaccioacuten en GTM (2)
- Comercio electroacutenico (2)
- Pixels de conversioacuten
- Pixels de conversioacuten en GTM
- Pixels de conversioacuten en GTM (2)
- Pixels de conversioacuten en GTM (3)
- HTML Personalizado
- HTML Personalizado (2)
- Imagen Personalizada
- Pixels de conversioacuten (2)
- Gracias
-