Post on 12-Jan-2017
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Pixels de conversioacutenEn GTM
Gracias
Gracias