Google Tag Manager: Curso de introducción a la herramienta Google Tag Manager de Google impartido por Mondragon Unibertsitatea en Enpresa Digitala con Eli Garcia
2. Objetivos del curso
• Aprender:
– Las ventajas de usar GTM
– Estructura y funcionamiento
– Instalar la herramienta
– Instalar etiquetas básicas
3. ¿Qué es un administrador de etiquetas?
Herramienta que nos permite gestionar de
forma centralizada, remota y sencilla todas las
etiquetas que añadimos a un sitio web “sin la
necesidad de tocar el código”
23. Integración del sitio web con GTM
(wordpress)
Lo más apropiado es modificar directamente el
archivo header.php
• Por motivos de rendimiento
• Por que no todos los plugins lo insertan en
el comienzo de la cabecera
29. Integración con Google Webmaster Tools
https://www.google.com/webmasters/tools/
1. Añadir el sitio web en Webmaster Tools
2. Verificar la propiedad a través de la etiqueta
de Google Tag Manager
34. Integración con Google Analytics
Crear una cuenta en Google Analytics para el
seguimiento del sitio web. El objetivo es
conseguir el UA único asociado al sitio web
www.google.es/intl/es/analytics/
38. Objetivo:
Añadir el código de seguimiento de Google
Analytics a todas las páginas del sitio web a
través de Tag Manager
Integración con Google Analytics
39. Integración con Google Analytics
Google Analytics
Cuenta
Contenedor
Etiqueta
Regla
Macro
53. Guía de macros
(Macros/Variables)
Son espacios en memoria que contienen un
valor y puedes reutilizarlo cuando necesites
En GTM se les invoca mediante {{ }}
55. Guía de macros
• {{element}}: el elemento de código a considerar (fichero, enlace, botón de
envío, …)
• {{element classes}}: la clase del elemento
• {{element id}}: el atributo "id" del elemento
• {{element target}}: el atributo "target" del elemento
• {{element text}}: el atributo "target" del elemento
• {{element url}}: el atributo "href" o "action" del elemento
60. Guía de macros
• {{referrer}}: la página visitada inmediatamente antes de la actual
• {{url}}: dirección de la página que se está visualizando (la página actual)
• {{url hostname}}: sólo el nombre del host, www.mondragon.edu
• {{url path}}: lo que no es hostname, www.mondragon.edu/grados
• {{event}}: sirve para recoger lo que escuchan los procesadores (etiquetas de
GTM especiales)
61. Guía de macros
• {{event}}
• {{history change source}}
• {{history new state}}
• {{history new url fragmente}}
• {{history old sate}}
• {{history old url fragmente}}
67. Eventos de Google Analytics - Ahora
Google Analytics
Cuenta
Contenedor
Etiqueta
Regla
Macro
68. Procesadores de eventos
Son etiquetas especiales que están a la
escucha de los posibles eventos que
ocurran en la web
Principalmente escuchas “clicks”
Son necesarias para el seguimiento de
los eventos de Google Analytics
69. Evento Enlace Saliente
1. Etiqueta Procesador de eventos
2. Etiqueta Evento GA
3. Reglas necesarias Sustituye a esta
etiqueta
85. Eventos de Google Analytics
• Probar la etiqueta con el depurador
• Crear versión del contenedor
• Publicar el contenedor
86. Wordpress: Evento Envío de formulario
Para que Contact Form 7 funcione del todo bien con GTM, en la
configuración adicional del plugin debemos añadir el método
que permita sólo recoger el evento cuando el formulario se
haya rellenado correctamente:
Nos va a permitir recoger un
evento personalizado en
GTM que se verá en GA
87. Wordpress: Evento Envío de formulario
Nos faltaría definir en GTM la Etiqueta+Regla que permitan
generar ese evento en GA:
89. Objetivos con Embudo en Googe Analytics
Los objetivos se definen en Google Analytics
como hasta ahora.
En el caso de necesitar un embudo y no tener
la página /gracias, crearemos páginas virtuales
con Google Tag Manager
90. Objetivos con Embudo en Googe Analytics
Hasta ahora, modificábamos el código fuente
para asociar una acción con una página Virtual
_gaq.push(['_trackPageview', '/solicitudPresupuesto']);
Se añadía al código del botón enviar
Con GTM no tocaremos el código fuente para
crear páginas virtuales
96. Código de conversiones de Adwords
Para hacer seguimiento de las conversiones de Adwords,
crearemos la Etiqueta+Regla necesarias:
97. Código de conversiones de Adwords
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 987345461;
var google_conversion_language = "es";
var google_conversion_format = "1";
var google_conversion_color = "ffffff";
var google_conversion_label =
"oDU6CLvRtAcQteTm1gM";
var google_conversion_value = 0;
var google_remarketing_only = false;
/* ]]> */
</script>
98. Código de conversiones de Adwords
Para hacer seguimiento de las conversiones de Adwords,
crearemos la Etiqueta+Regla necesarias:
99. Código de conversiones de Adwords
Y no nos olvidemos del procesador de Envíos automático
100. Código de conversiones de Adwords
Si la conversión se produce tras el envío de un formulario de
wordpress, podemos utilizar la Regla creada previamente para
ser más precisos en la recogida de datos:
101. Código de conversiones de Adwords
Si no, al igual que hemos modificado el plugin Contact Form 7,
deberemos “modificar” el formulario que sea necesario para
recoger el envío sólo cuando sea correcto. Hay que editar el
botón de envio.
Para ello, debemos añadir en el código fuente, en la capa de
datos, la siguiente instrucción
<script>
dataLayer.push({‘event’: ‘formSubmitOK’});</script>