1 GOOGLE TAG MANAGER Curso de iniciación a la herramienta - Michele Sforza -

2 Web designer, Google Adwords, Google Analytics, Google Tag Manager [email protected] www.michelesforza.it @michelesforza

3 1 – Conceptos básicos 2 –Herramienta 3 – Al grano PAUSA café 4 - Eventos 5 – Conversiones y Remarketing 6 - MIGRACIÓN ga -> GTM 7 - Regex PAUSA comida

4 1 – Conceptos básicos

5 Introducción GTM - 2012 V.2 Gratis En constante evolución y mejora Documentación e información

6 Un poco de historia (pero poco…) En 2007 aparece (TagMan) 5 años después +15 TMS

7 MEDIR Este mes la web ha subido un 20% del trafico, Incrementando un 7% las transacciones y Un 10% los ingresos. La campaña que más ha vendido ha sido la “XYZ” La tasa de conversión de AdWords es del 1,02% ZzZzZz….. ESTO NO ES ANALÍTICA

8 MEDIR

9 ¿Por qué es importante?

10 MEDIR Si no mides, NO puedes tomar decisiones! 1.Se propone cambiar la llamada a la acción 2.Nuestra hipótesis es que la falta claridad en los contenidos, frena los usuarios a pedir información. 3. En base a los cálculos, elevar la apertura del formulario del 15%, nos permitiría casi duplicar una tasa de conversión hasta el …

11 ANTES GA tracking code (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', ' UA-000000-1 ', 'auto'); ga('require', 'displayfeatures'); // enable demographics ga('send', 'pageview'); ga('send', 'event', 'button', 'click', 'nav buttons', 4); // custom event tracking // Cross domain tracking var linker; var myLink = document.getElementById('myLink'); addListener(myLink, 'mousedown', decorateMe); addListener(myLink, 'keydown', decorateMe); ……..

12 ¿Y si quisiéramos medir un Evento? Modificar código en cada página-----> IT (desarollo)

13 ¿Y las conversiones? ¿Y las fichas de los productos? ¿Y el remarketing? Etc …

14 Video https://www.youtube.com/watch?v=xEjc0XPK-7o

15 ¿Qué es GTM? Es una herramienta que nos permite gestionar de forma centralizada todas las etiquetas (TAG) que queremos añadir al sitio SIN la necesidad de tocar el código fuente

16 ¿Cómo configurar GTM? 1 solo Script para TODO!

17 VENTAJAS Limpieza del código Rendimiento: no afecta a la velocidad de carga de página Sistema de testeo en vivo (preview) Crear y actualizar etiquetas SIN depender de IT (no son necesarios conocimientos técnicos) Control de versiones

18 ¿Y AHORA?

19 2 -HERRAMIENTA

20 Estructura Sitios web [email protected] ID cuenta (trabajo) tags Triggers y variable ID cuenta 1 (personal)

21 ¿Qué es un TAG? Un fragmento de código que se conecta con un sistema externo para enviar información de tu página en un momento determinado(GA/AdWords etc)

22 ¿Qué es un Trigger (Activador)? Son una/s CONDICIÓN/ES que hacen que se activen las etiquetas en diferentes partes del sitio web

23 ¿Qué es una Variable? Espacios de memoria que almacenan valores (tanto estáticos como dinámicos) que puedes reutilizar cuando necesites

24 Dentro al contenedor… Contenedor (www.miempresa.com) TAG1 TAG2 TRIGGER 1TRIGGER 2 VARIABLE 1VARIABLE 2 TRIGGER 3TRIGGER 1 VARIABLE 2

25 PAUSA - 15 minutos

26 3 – AL GRANO

27 Proceso correcto Crear una/s variable/s Crear el Trigger Crear el Tag Vista previa PUBLISH

28 Panel de control

29 Ejercicio 1 Instalar el código de seguimiento de Google Analytics en TODAS las páginas de mi web (anonymizeIp = true)

30 Acordaros de… Revisar los cambios ANTES de su publicación utilizando VISTA PREVIA y Google Analytics

31 Control de versión, publicación y restauración

32 Nuestra primera variable

33 Ejercicio 2 Cambiar el ID tracking por una constante y Instalar el código de seguimiento de Google Analytics en TODAS las páginas de la web MENOS la página contáctame

34 Best practice 1 ACCOUNT por empresa (nombre de la empresa) 1 CONTAINER por sitio web (www.miempresa.com – LIVE) (www.miempresa-dev.com – DEV)www.miempresa.comwww.miempresa-dev.com Nombre TAG: (nombre producto: GA, AW, DC)+ (track type: Events, Page view, Timing etc) + (páginas o conjunto de páginas) + (descripción del trigger) EJEMPLOS: GA - Events – Homepage – link slideshow GA - Pageview – Technical Support Form AW - Remarketing – Thank You GA - Event – DownloadsPdf

35 4 – MEDIR EVENTOS

36 Triggers Los Activadores (Triggers) de Google Tag Manager son las CONDICIONES que hacen que se activen las etiquetas en diferentes partes del sitio web o eventos clave, en DONDE nosotros decidamos y CUANDO nosotros decidamos. Por lo tanto, las etiquetas (tags) se dispararán (o no) SI se cumplen los activadores de cada una de ellas.

37 Data Layer Google Tag Manager inserta una serie de valores en el “data layer” (capas de datos) por defecto. gtm.js (Page View)– evento que se lanza en cuanto empieza la carga de la página. gtm.dom (DOM ready) – evento que se lanza cuando se ha cargado el HTML de la página (útil cuando queremos forzar que una etiqueta se active al final del ) gtm.load (Window Loaded) – evento que se lanza en el data layer cuando se han cargado todos los archivos externos.

38 Medir eventos viejo estilo

39 Activadores de eventos automáticos La configuración de cada tipo de activador será diferente en función del evento seleccionado página vista (activar por reglas de página, de toda la vida) clic en enlaces (ejemplos: descargas PDF, enlaces externos, etc.) clic en elementos (botones) formularios temporizadores (lanzar una etiqueta al pasar X segundos) errores JS (enviar a Google Analytics los errores de JavaScript) cambios de historial (para detectar la navegación del usuario sin cambios de URL)

40 Ejercicio 3 Activar una etiqueta (tag) evento al pinchar sobre un enlace de descarga de un PDF

41 Nombrar Eventos

42 Triggers Los Activadores (Triggers) y las etiquetas se pueden combinar como queramos, pudiendo reutilizarse. Trigger 1 TAG 1 TAG 2 Trigger 2 Trigger 3 TAG 3

43 Varias Condiciones dentro de un Activador Si tenemos varias condiciones dentro de un mismo Activador (trigger), deben cumplirse simultáneamente para que se dispare la etiqueta Buy now! TRIGGER Condición 2 AND Condición 1

44 Activadores/Bloqueo en un Tag Los triggers pueden ser de ACTIVACIÓN o de BLOQUEO (excepciones). Si una etiqueta tiene activadores y excepciones (triggers de activación y bloqueo) sus condiciones “se suman” entre sí. Ejemplo: incluir en URI “/gracias/” (inclusión), excepto si nombre de host es “aaa.com” (bloqueo). Resultado: – En bbb.com/gracias/ se activará la etiqueta – Pero no se activará en aaa.com/gracias/ tag TRIGGER de bloqueo TRIGGER 1 AND

45 Más Activadores en un Tag En caso de tener más de un trigger de activación/bloqueo para la misma etiqueta, entre sí son opcionales/alternativos. Es decir, si se cumple uno o se cumple el otro, se activa/bloquea la etiqueta en consecuencia. tag TRIGGER 1 OR TRIGGER 2 TRIGGER 3 OR

46 Por lo tanto…OJO a NO confundir… Condiciones del trigger con los triggers del tag

47 Ejercicio 4 Modificar la anterior etiqueta (tag) de descarga de un PDF añadiendo al TRIGGER una segunda condición (por ejemplo: que la página sea solo “download” page)

48 Variables Predefinidas (Built-In Variables)

49 Variables URL

50 Ejercicio 5 Crear un activador (trigger) de click genérico para cualquier página de la web y entrar en VISTA PREVIA para ver las variables del evento gtm.linkClick que se van creando: {{click ID}} {{click classes}} {{click text}} (hacer lo mismo con las etiquetas)

51 PAUSA comida – 1H

52 Ejercicio 6 – tasa de rebote real Crear un trigger evento temporizador que se disparara automáticamente cada 45 segundos. Luego creamos un tag evento que se active con este Trigger y genere una interacción que cancela el rebote.

53 Ejercicio 7 Crear un activador de click para calcular cual de las dos imágenes ha sido más cliqueada a través de la variable CSS selector

54 Un poco más de CSS selector Nos permite identificar cualquier enlace de forma MUY precisa.miaclase.miaclase1.miaclase2 #mioid #mioid,.miclase Div#mioid.miclase

55 5 – CONVERSIONES Y REMARKETING

56 Proceso de conversión ProductoCarritoPago Página de gracias.php

57 ANTES

58 AHORA – AdWords Conversion google_conversion_id (podría ser una constante) google_conversion_label EUR En un trigger donde la variable Page URL contiene o acaba con /gracias.php

59 AdWords Conversion – NoThankYouPage window.dataLayer = window.dataLayer || []; dataLayer.push({ 'event': 'formSubmitOK' }); Creamos un Trigger como CUSTOM EVENT

60 AdWords Conversion – NoThankYouPage (Virtual Page) Crear un TRIGGER sobre el botón de “Añadir al carrito” de compra TAG que crea una página virtual

61 AdWords Remarketing (estándar)

62 AdWords Remarketing Dinámico GTM for Wordpress by Thomas Geiger

63 AdWords Remarketing Dinámico (manual) var dataLayer = window.dataLayer || []; dataLayer.push({ 'ecomm_prodid':'12345', 'ecomm_pagetype' : 'cart', 'ecomm_totalvalue' : 39.99 }); Antes del GTM script

64 AdWords Remarketing - Dinámico Google tag manager for WP (Thomas Geiger)plug-in https://www.youtube.com/watch?v=29pSgWO3mlk&index=27&list=PLgr_8Hk8l4ZH4vpV9OR9zQqDMiMVNEDhj

65 Contador de Floodlight DoubleClick Estándar: se cuenta cada conversión. Único: se cuenta la primera conversión por cada usuario único durante cada 24 horas Por sesión: se cuenta una conversión por usuario y sesión src= ID de anunciante type= cadena de etiqueta de grupo cat=cadena de etiqueta de actividad

66 Tag de venta DoubleClick Estándar: se cuenta cada conversión. Único: se cuenta la primera conversión por cada usuario único durante cada 24 horas Por sesión: se cuenta una conversión por usuario y sesión src= ID de anunciante type= cadena de etiqueta de grupo cat=cadena de etiqueta de actividad

67 Ejercicio 8 Crear un tag evento que mida todos los click que llevan a sitios externos al nuestro (Outbound Link Click).

68 Ejercicio 9 Crear el tag de conversión de Facebook

69 Crear un HTML tag SOLO si nuestros usuarios han visitado previamente nuestras páginas de redes sociales (Facebook, Twitter etc) Ejercicio 10

70 Crear un Tag Evento que mida los “404 Errors” page, identificando en que página se ha creado el error. Ejercicio 11

71 6 – MIGRACIÓN

72 Proceso de migración PLAN DE MIGRACIÓN: todo en una hoja excel PREPARACIÓN A LA MIGRACIÓN – Instalar GTM code, crear los tags (eventos, pageview, adwords etc) CAMBIO Y CONTROL DE CALIDAD – Crear nueva versión, Vista previa, Publish, quitar el viejo GA tracking http://www.simoahava.com/analytics/check-if-google-analytics-is-in-page-template/#gref https://www.youtube.com/watch?v=7Dxi_-eZenAhttps://www.youtube.com/watch?v=7Dxi_-eZenA – Julian [ENG] OTRO MÉTODO

73 Exportar Tag, variables, activadores

74 Ideas más avanzadas 1.Cambiar el CSS de la página con HTML personalizada 2.Referrer Hostname – personalizar según el domino de procedencia (concurso, usuario de redes sociales etc) 3.SEO mejorado con tag HTML personalizado: document.getElementsByTagName('title')[0].innerHTML = 'Mi título de página nuevo';

75 7 - REGEX

76 Expresiones regulares (RegEx)

77

78

79

80

81

82

83

84 \.(pdf|xlsx|png|docx)$ matches RegEx Click URL Page URLmatches RegEx/products/(shoes|hats|shirts)/ /products/.*/cycles/Page URLmatches RegEx 7\.172\.171\.105IPmatches RegEx Nike Air Max 201(2|3|4|5) Nombre matches RegEx

85 Recursos https://www.youtube.com/channel/UClgihdkPzNDtuoQy4xDw5mAhttps://www.youtube.com/channel/UClgihdkPzNDtuoQy4xDw5mA - Julian [ENG] http://aukera.es/blog/google-tag-manager-tutorial-curso/http://aukera.es/blog/google-tag-manager-tutorial-curso/[ESP] https://support.google.com/tagmanagerhttps://support.google.com/tagmanager[ESP] http://www.lunametrics.com/blog/category/google-tag-manager/http://www.lunametrics.com/blog/category/google-tag-manager/[ENG] http://www.simoahava.com/analytics/variable-guide-google-tag-manager/http://www.simoahava.com/analytics/variable-guide-google-tag-manager/[ENG] Todos los archivos se pueden descargar en www.michelesforza.it/download

86 Si tenemos tiempo… Folder best practice

87 subdomain tracking dominio1.michelesforza.com www.michelesforza.com dominio2. michelesforza.com

88 Cómo habilitar los informes demográficos y de intereses (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXXX-XX', 'example.com'); ga('require', 'displayfeatures'); ga('send', 'pageview');