Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Google tag manager curso básico. Mondragon Unibertsitatea. Eli Garcia

706 views

Published on

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

Published in: Education
  • Be the first to comment

  • Be the first to like this

Google tag manager curso básico. Mondragon Unibertsitatea. Eli Garcia

  1. 1. Google Tag Manager: Curso de iniciación a la herramienta Eli Garcia Mondragon Unibertsitatea
  2. 2. Objetivos del curso • Aprender: – Las ventajas de usar GTM – Estructura y funcionamiento – Instalar la herramienta – Instalar etiquetas básicas
  3. 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”
  4. 4. introducción
  5. 5. Analítica SEM Usabilidad Persuasión Redes Sociales SEO … Tengo 1 sitio web y lo quiero promocionar
  6. 6. … Con GTM puedo gestionar todos los recursos de forma centralizada
  7. 7. estructura
  8. 8. Estructura cuentas contenedores etiquetas reglas macros
  9. 9. Estructura CUENTA: Mondragon Unibertsitatea CONTENDOR: cliente1.com Repetir estructura por cada cliente
  10. 10. Estructura CUENTA: Mondragon Unibertsitatea CONTENDOR: cliente1.com Repetir estructura por cada cliente CONTENDOR: cliente2.com CONTENDOR: cliente3.com
  11. 11. Estructura CUENTA: Mondragon Unibertsitatea CONTENDOR: mondragon.edu mukom.mondragon.edu Online.mondragon.edu Repetir estructura por cada cliente
  12. 12. alta e instalación
  13. 13. Alta e instalación de GTM http://www.google.com/tagmanager/
  14. 14. Alta e instalación de GTM
  15. 15. Alta e instalación de GTM
  16. 16. Alta e instalación de GTM
  17. 17. Alta e instalación de GTM
  18. 18. Alta e instalación de GTM
  19. 19. Integración del sitio web con GTM
  20. 20. Integración del sitio web con GTM (wordpress)
  21. 21. Integración del sitio web con GTM (wordpress)
  22. 22. 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
  23. 23. Integración del sitio web con GTM (wordpress)
  24. 24. Integración del sitio web con GTM (blogger)
  25. 25. Integración del sitio web con GTM (blogger)
  26. 26. Gestión de recursos a través de GTM
  27. 27. 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
  28. 28. Integración con Google Webmaster Tools https://www.google.com/webmasters/tools/
  29. 29. Integración con Google Webmaster Tools
  30. 30. Integración con Google Webmaster Tools
  31. 31. 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/
  32. 32. Integración con Google Analytics
  33. 33. Integración con Google Analytics
  34. 34. Integración con Google Analytics
  35. 35. 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
  36. 36. Integración con Google Analytics Google Analytics Cuenta Contenedor Etiqueta Regla Macro
  37. 37. 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>
  38. 38. Integración con Google Analytics Regla En todas las páginas
  39. 39. 1) Crearemos la etiqueta específica para Google Analytics 2) Definiremos la regla para que se ejecute la etiqueta Integración con Google Analytics
  40. 40. Integración con Google Analytics
  41. 41. Integración con Google Analytics
  42. 42. Integración con Google Analytics
  43. 43. Integración con Google Analytics
  44. 44. 3) Probar la etiqueta con el depurador 4) Crear versión del contenedor 5) Publicar el contenedor Integración con Google Analytics
  45. 45. Integración con Google Analytics
  46. 46. Integración con Google Analytics
  47. 47. Integración con Google Analytics
  48. 48. Integración con Google Analytics
  49. 49. Integración con Google Analytics
  50. 50. 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 {{ }}
  51. 51. Guía de macrosNombre: Tipo:
  52. 52. 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
  53. 53. Guía de macros
  54. 54. Guía de macros <a href=“http://www.mondragon.edu/”> <img alt_”Mondragon Unibertsitatea” src=“/images/patrocinadores/mondr agon_unibertsitatea.png” </a>
  55. 55. Guía de macros
  56. 56. Guía de macros <input id=“TR_Enviar” class=“boton enviar” type=“submit” value=“Enviar” name”TR_Enviar”> </input>
  57. 57. 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)
  58. 58. Guía de macros • {{event}} • {{history change source}} • {{history new state}} • {{history new url fragmente}} • {{history old sate}} • {{history old url fragmente}}
  59. 59. Eventos
  60. 60. Eventos de Google Analytics
  61. 61. Eventos de Google Analytics
  62. 62. Eventos de Google Analytics
  63. 63. Eventos de Google Analytics - Antes
  64. 64. Eventos de Google Analytics - Ahora Google Analytics Cuenta Contenedor Etiqueta Regla Macro
  65. 65. 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
  66. 66. Evento Enlace Saliente 1. Etiqueta Procesador de eventos 2. Etiqueta Evento GA 3. Reglas necesarias Sustituye a esta etiqueta
  67. 67. Evento Enlace Saliente Procesador de clicks en enlaces: Etiqueta
  68. 68. Evento Enlace Saliente Enlaces salientes: Etiqueta
  69. 69. Evento Enlace Saliente Enlaces salientes: Regla
  70. 70. Evento Enlace Saliente
  71. 71. Evento Enlace Saliente
  72. 72. Evento Descarga de archivo 1. Etiqueta Procesador de eventos 2. Etiqueta Evento GA 3. Reglas necesarias Sustituye a esta etiqueta
  73. 73. Evento Descarga de archivo Procesador de clicks en enlaces: Etiqueta
  74. 74. Evento Descarga de archivos Descarga de archivos: Etiqueta
  75. 75. Evento Descarga de archivos Descarga de archivos: Regla
  76. 76. Evento Descarga de archivos
  77. 77. 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>
  78. 78. Evento Envío de formulario Procesador de envío de formularios: Etiqueta
  79. 79. Evento Envío de formulario Envío de formularios: Etiqueta
  80. 80. Evento Envío de formulario Envío de formularios: Regla
  81. 81. Evento Envío de formulario
  82. 82. Eventos de Google Analytics • Probar la etiqueta con el depurador • Crear versión del contenedor • Publicar el contenedor
  83. 83. 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
  84. 84. Wordpress: Evento Envío de formulario Nos faltaría definir en GTM la Etiqueta+Regla que permitan generar ese evento en GA:
  85. 85. Objetivos con embudo
  86. 86. 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
  87. 87. 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
  88. 88. Objetivos con Embudo en Googe Analytics
  89. 89. Objetivos con Embudo en Googe Analytics
  90. 90. Objetivos con Embudo en Googe Analytics Las páginas virtuales pueden servir de destino de objetivo
  91. 91. Objetivos con Embudo en Googe Analytics Pero también como parte de un embudo
  92. 92. Código de conversiones de Adwords Para hacer seguimiento de las conversiones de Adwords, crearemos la Etiqueta+Regla necesarias:
  93. 93. 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>
  94. 94. Código de conversiones de Adwords Para hacer seguimiento de las conversiones de Adwords, crearemos la Etiqueta+Regla necesarias:
  95. 95. Código de conversiones de Adwords Y no nos olvidemos del procesador de Envíos automático
  96. 96. 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:
  97. 97. 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>
  98. 98. Referencias • https://support.google.com/tagmanager/ans wer/3420054?hl=es • http://www.simoahava.com/ • http://cutroni.com/
  99. 99. Eli Garcia egarcia@mondragon.edu http://www.linkedin.com/in/elixabetegarcia http://mukom.mondragon.edu/socialmedia @elitxuon

×