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

1. Google Tag Manager:
Curso de iniciación a la
herramienta
Eli Garcia
Mondragon Unibertsitatea

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”

5. introducción

6. Analítica
SEM
Usabilidad
Persuasión
Redes
Sociales
SEO
…
Tengo 1 sitio web y lo quiero promocionar

7. …
Con GTM puedo gestionar todos los
recursos de forma centralizada

8. estructura

9. Estructura
cuentas
contenedores
etiquetas
reglas
macros

10. Estructura
CUENTA: Mondragon
Unibertsitatea
CONTENDOR:
cliente1.com
Repetir
estructura por
cada cliente

11. Estructura
CUENTA: Mondragon Unibertsitatea
CONTENDOR:
cliente1.com
Repetir
estructura por
cada cliente
CONTENDOR:
cliente2.com
CONTENDOR:
cliente3.com

12. Estructura
CUENTA: Mondragon Unibertsitatea
CONTENDOR:
mondragon.edu
mukom.mondragon.edu
Online.mondragon.edu
Repetir
estructura por
cada cliente

13. alta e instalación

14. Alta e instalación de GTM
http://www.google.com/tagmanager/

15. Alta e instalación de GTM

16. Alta e instalación de GTM

17. Alta e instalación de GTM

18. Alta e instalación de GTM

19. Alta e instalación de GTM

20. Integración del sitio web con GTM

21. Integración del sitio web con GTM
(wordpress)

22. Integración del sitio web con GTM
(wordpress)

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

24. Integración del sitio web con GTM
(wordpress)

25. Integración del sitio web con GTM (blogger)

26. Integración del sitio web con GTM (blogger)

27. Gestión de recursos a través
de GTM

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

30. Integración con Google Webmaster Tools
https://www.google.com/webmasters/tools/

31. Integración con Google Webmaster Tools

32. Integración con Google Webmaster Tools

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/

35. Integración con Google Analytics

36. Integración con Google Analytics

37. Integración con Google 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

40. Integración con Google Analytics
Etiqueta
<script>
(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.i
nsertBefore(a,m)
})(window,document,'script','//www.google-
analytics.com/analytics.js','ga');
ga('create', 'UA-58615286-2', 'auto');
ga('send', 'pageview');
</script>

41. Integración con Google Analytics
Regla
En todas las páginas

42. 1) Crearemos la etiqueta específica para
Google Analytics
2) Definiremos la regla para que se ejecute la
etiqueta
Integración con Google Analytics

43. Integración con Google Analytics

44. Integración con Google Analytics

45. Integración con Google Analytics

46. Integración con Google Analytics

47. 3) Probar la etiqueta con el depurador
4) Crear versión del contenedor
5) Publicar el contenedor
Integración con Google Analytics

48. Integración con Google Analytics

49. Integración con Google Analytics

50. Integración con Google Analytics

51. Integración con Google Analytics

52. Integración con Google Analytics

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 {{ }}

54. Guía de macrosNombre:
Tipo:

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

56. Guía de macros

57. Guía de macros
<a
href=“http://www.mondragon.edu/”>
<img alt_”Mondragon
Unibertsitatea”
src=“/images/patrocinadores/mondr
agon_unibertsitatea.png”
</a>

58. Guía de macros

59. Guía de macros
<input
id=“TR_Enviar”
class=“boton enviar”
type=“submit”
value=“Enviar” name”TR_Enviar”>
</input>

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}}

62. Eventos

63. Eventos de Google Analytics

64. Eventos de Google Analytics

65. Eventos de Google Analytics

66. Eventos de Google Analytics - Antes

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

70. Evento Enlace Saliente
Procesador de clicks en enlaces: Etiqueta

71. Evento Enlace Saliente
Enlaces salientes: Etiqueta

72. Evento Enlace Saliente
Enlaces salientes: Regla

73. Evento Enlace Saliente

74. Evento Enlace Saliente

75. Evento Descarga de archivo
1. Etiqueta Procesador de eventos
2. Etiqueta Evento GA
3. Reglas necesarias Sustituye a esta
etiqueta

76. Evento Descarga de archivo
Procesador de clicks en enlaces: Etiqueta

77. Evento Descarga de archivos
Descarga de archivos: Etiqueta

78. Evento Descarga de archivos
Descarga de archivos: Regla

79. Evento Descarga de archivos

80. Evento Envío de formulario
1. Etiqueta Procesador de eventos
2. Etiqueta Evento GA
3. Reglas necesarias Sustituye a esta
etiqueta
<a class="sidebar-button" id="sidebarButton" href="#sidebar"
onclick="ga(‘send’, ‘event’, ’Envío de formulario’, ’Contacto’);">
<img id="menu-icon" src="/img/icon-menu.svg" alt="Menu">
<h4>Menu</h4>
</a>

81. Evento Envío de formulario
Procesador de envío de formularios: Etiqueta

82. Evento Envío de formulario
Envío de formularios: Etiqueta

83. Evento Envío de formulario
Envío de formularios: Regla

84. Evento Envío de formulario

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:

88. Objetivos con embudo

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

91. Objetivos con Embudo en Googe Analytics

92. Objetivos con Embudo en Googe Analytics

93. Objetivos con Embudo en Googe Analytics
Las páginas virtuales
pueden servir de
destino de objetivo

94. Objetivos con Embudo en Googe Analytics
Pero también como
parte de un embudo

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>

102. Referencias
• https://support.google.com/tagmanager/ans
wer/3420054?hl=es
• http://www.simoahava.com/
• http://cutroni.com/

103. Eli Garcia
egarcia@mondragon.edu
http://www.linkedin.com/in/elixabetegarcia
http://mukom.mondragon.edu/socialmedia
@elitxuon