Configuración de Google Tag Manager y Google Analytics

Clase 8 de 42 • Curso de Google Cloud Platform para E-commerce

Clase anteriorSiguiente clase

Resumen

¿Cómo se realiza el setup de Google Tag Manager?

¡Hola y bienvenido a una nueva oportunidad de aprender! Hoy te guiaré a través de un emocionante proceso de configuración inicial en Google Tag Manager y Google Analytics. ¿Sabías que puedes configurar estos poderosos servicios de Google en unos pocos y sencillos pasos? Aquí aprenderás a crear una cuenta, configurar un contenedor para la web y preparar el terreno para el análisis de datos en tu plataforma.

¿Cómo crear una cuenta en Tag Manager?

Para empezar, ve a la consola de Google Tag Manager ingresando a tagmanager.google.com con tu cuenta de Google. Si tienes una cuenta de Gmail, ya tienes acceso. Siga estos pasos:

  1. Crear una nueva cuenta:

    • Introduce un nombre para la cuenta, por ejemplo, "Cloud Online Store".
    • Selecciona tu ubicación. Por ejemplo, México.
    • Acepta compartir los datos de manera anónima si deseas.

  2. Configurar el contenedor:

    • Nombra tu contenedor, por ejemplo, "CloudOnlineShop.com".
    • Escoge "Web" si es tu objetivo.
    • Procede a crear la cuenta y contenedor.

Tras la creación, accederás a tu workspace por defecto donde gestionar el contenido y etiquetado de páginas.

¿Cómo insertar el código de seguimiento de Tag Manager?

Una vez hayas creado tu cuenta y contenedor, recibirás dos fragmentos de código que debes insertar en tu página web. Este es un paso crucial para vincular Google Tag Manager con tu aplicación:

  1. Script en la cabecera (head):

    • Copia el primer trozo de código y pégalo en la sección <head> de tu archivo index.html.

  2. Script en el cuerpo (body):

    • El segundo trozo de código deben introducirlo al comienzo de la sección <body> de tu archivo HTML.

Con esto, el framework de tu aplicación será capaz de utilizar la magia de Tag Manager, permitiéndote inyectar sus funcionalidades sin esfuerzo.

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->

¿Cómo configuramos Google Analytics en Tag Manager?

Con el contenedor de Tag Manager configurado, el siguiente paso es asociar Google Analytics para que comience a capturar datos desde tu sitio.

  1. Crear una cuenta y propiedad en Google Analytics:

    • Accede a analytics.google.com.
    • Crea una nueva cuenta de Analytics y propiedad para el sitio web que desean seguir.

  2. Obtener el Tracking ID:

    • Una vez creado, recibirás un Tracking ID único.

  3. Configurar una etiqueta (tag) en Tag Manager:

    • En Tag Manager, crea una nueva etiqueta para Google Analytics usando la opción Universal Analytics.
    • Usa el tipo de seguimiento "Pageview" e introduce tu Tracking ID.
    • Configura para que la etiqueta se dispare en "All Pages".

De esta manera, Google Analytics comenzará a registrar datos de cada visita.

¿Cómo probar y validar la configuración?

Después de integrar los códigos y configurar Google Analytics, es vital validar que el setup está funcionando correctamente:

  • Usa la función de 'previsualización' (preview) en Tag Manager para abrir tu sitio.
  • Observa el panel de vista previa: debería mostrar que la etiqueta de Google Analytics se disparó.
  • En Google Analytics, verifica que en los informes en tiempo real aparecen las visitas a tu página.

¿Cuál es el reto para aplicaciones de una sola página?

Un desafío particular de las aplicaciones de una sola página (Single Page Applications, SPA) es que no recargan la página al cambiar de sección. Esto significa que los pageviews tradicionales no se capturan de la misma manera. La tarea ahora es asegurarse de que las vistas de páginas se registren correctamente en las SPA, adaptando el evento de pageview según la lógica de navegación interna de la aplicación.

Para esto, necesitas implementar una solución personalizada que escuche los eventos de navegación en tu framework y desencadene los pageviews manualmente en Analytics.

¡Felicidades por haber configurado con éxito Google Tag Manager y Analytics! Mantente motivado y sigue explorando el increíble potencial de estas herramientas en la optimización y análisis de tu sitio web.