Integración de Google Tag Manager con Google Analytics

:bookmark: Esta guía te ayudará a configurar Google Tag Manager y a usarlo con Google Analytics en tu sitio de Discourse. Además, cubre la configuración de variables, activadores y etiquetas en Google Tag Manager para rastrear las vistas de página.

:information_source: Esta guía cubre la configuración de Google Tag Manager. Si solo deseas habilitar Google Analytics para tu sitio, configura la etiqueta G en la configuración del sitio ga universal tracking code. Nuestra configuración aún puede referirse a todas las analíticas como universal, pero esto es un artefacto del nombre del campo heredado. Las siguientes instrucciones utilizan, y funcionan para, las etiquetas de Google.

:person_raising_hand: Nivel de usuario requerido: Administrador

Integrar Google Tag Manager (GTM) con Google Analytics (GA) te permite gestionar y rastrear eventos en tu sitio de Discourse de manera efectiva. Esta guía cubre el proceso de configuración completo, desde la creación de una cuenta de GA hasta la configuración de GTM con las etiquetas y activadores necesarios.

Resumen

  1. Crea una cuenta y una propiedad de Google Analytics.
  2. Configura Google Tag Manager.
  3. Configura las variables, activadores y etiquetas de GTM.
  4. Integra GTM con tu sitio de Discourse.

Crea una cuenta de Google Analytics

  1. Visita Google Analytics e inicia sesión con tu cuenta de Google.

  2. Si aún no tienes una cuenta, sigue los pasos guiados para crear una.

  3. Crea una propiedad haciendo clic en “Administrar” y luego en “Crear propiedad”.

  4. Rellena los detalles requeridos en la pantalla de “Creación de propiedad”.

  5. Ingresa los detalles de tu negocio en la siguiente pantalla.

  6. Selecciona tus objetivos de negocio apropiadamente.

:information_source: Información: Seleccionar las cuatro secciones coincidirá más estrechamente con los informes que Analytics ha proporcionado normalmente:

  1. Elige “Web” como plataforma para la recopilación de datos.

  2. Configura una secuencia de datos ingresando la URL de tu sitio y un nombre de secuencia.

:information_source: Después de crear exitosamente tu secuencia web, toma nota de tu ID de Medición. Lo necesitarás para la configuración de GTM.

Configurar Google Tag Manager

  1. Visita Google Tag Manager y crea una cuenta.
  2. Configura un contenedor siguiendo los pasos guiados y elige “Web” como plataforma.

Configurar GTM

Variables

  1. Ve a la pestaña “Variables” en GTM y haz clic en “Nueva” en la sección de Variables definidas por el usuario.
  2. Crea dos Variables de Capa de Datos (Data Layer Variables):
  • Título: DL-page-title
    Tipo: Data Layer Variable
    Nombre de la Variable de Capa de Datos: page.title
    Versión de la Capa de Datos: 2

  • Título: DL-page-url
    Tipo: Data Layer Variable
    Nombre de la Variable de Capa de Datos: page.url
    Versión de la Capa de Datos: 2

Como ejemplo, elige el tipo de variable:

Luego configura las variables, como en este ejemplo:

Activadores (Triggers)

  1. Ve a la pestaña “Activadores” y haz clic en “Nuevo”.

  2. Elige “Evento personalizado” como tipo.

  3. Nombra el activador virtualPageView y guárdalo.

    El resultado final debería verse así:

Etiquetas (Tags)

  1. Ve a la pestaña “Etiquetas” y crea una nueva etiqueta.

  2. Elige Google Analytics: Google Tag como tipo de etiqueta.

  3. Configura la etiqueta con los siguientes detalles:

  • ID de Medición: Introduce tu ID de Medición de GA.
  • Campos Requeridos a Establecer:
    • title: {{DL-page-title}}
    • page: {{DL-page-url}}
    • send_page_view: true
    • page_path: {{Page Path}}

Cuando termines, debería verse así (ten en cuenta que puedes agregar un parámetro userID además de los parámetros anteriores, pero necesitarás agregar una variable adicional como DL-page-url):

  1. Elige el activador virtualPageView para esta etiqueta.
  2. Nombra tu etiqueta y guárdala.

Publicar tu espacio de trabajo de GTM

Publica tu contenedor en GTM haciendo clic en el botón azul “Enviar” en la esquina superior derecha de la página.

:warning: Importante: Si encuentras errores 404 de googletagmanager.com, asegúrate de que los cambios de tu contenedor de GTM hayan sido publicados.

Integrar GTM con Discourse

  1. Ve a la configuración de Administrador de tu Discourse y busca gtm container id.
  2. Introduce tu ID de Contenedor de GTM (formato: GTM-XXXXXX) en el campo correspondiente.

:warning: Nota: Elimina cualquier código de seguimiento de Analytics existente de la configuración ga universal tracking code en Discourse para evitar el seguimiento duplicado.

Recarga tu sitio y verifica la vista de contenido en Tiempo Real en GA para confirmar que los datos están fluyendo a través de GTM.

Usos Adicionales

Con GTM, puedes agregar más etiquetas para rastrear eventos adicionales como:

Enlaces Relacionados

47 Me gusta

Como se señaló, se ha eliminado la etiqueta de configuración de GA4 y ahora elegirá la etiqueta de Google. Los pasos de configuración siguen siendo los mismos, pero he actualizado la documentación.

Para cualquiera que haya configurado previamente la etiqueta de GA4, debería haberse actualizado automáticamente y no requerir ningún cambio de su parte.

Vale la pena mencionar que esta no es una configuración óptima en términos de las mejores prácticas actuales de GA4/GTM y el paso n.º 2 en la sección Disparadores parece ser incorrecto.

En lugar de un disparador de Vista de Página, debería ser un disparador de Evento Personalizado con el nombre virtualPageView.

cookieDomain = auto parece ser una remanencia de Universal Analytics y no es necesario. GA4 se encarga automáticamente de la navegación entre subdominios.

Otra buena práctica es que la etiqueta de Google se active al inicializar, que send_page_view se establezca en false y, en su lugar, tener una etiqueta de Evento de GA4 separada para page_view.

Cuando lo implementamos, también agregamos una anulación para page_location con la URL completa del sitio + la ruta de la página virtual. Esto poblará correctamente los informes estándar de GA4.

1 me gusta

Hola Stefan,

Gracias por estas notas.

He actualizado el paso n.º 2 de la sección Disparadores, ya que ya tenía capturas de pantalla que coincidían, y actualizaremos el resto lo antes posible.

2 Me gusta

Descripción:

Tengo un problema con Google Tag Manager (GTM) en mi foro de Discourse. Permítanme explicar mi configuración y el problema en detalle:

  1. Configuración de GTM:

    • He configurado un contenedor de Google Tag Manager (ID: GTM-…MZV).
    • Para fines de prueba, he agregado una etiqueta de Google Analytics 4 en GTM, configurada para activarse en todas las páginas durante la inicialización.
    • No he agregado activadores complejos, capa de usuario ni capa de datos. Es solo una configuración básica para verificar que GTM esté funcionando.
  2. Integración de GTM con Discourse:

    • En mi foro de Discourse, he configurado GTM ingresando el ID del contenedor (GTM-W…MZV) en la Configuración de administrador.
    • Cuando inspecciono mi sitio web, puedo ver que:
  3. El Problema:

    • Después de publicar mi contenedor de GTM, fui al Modo de vista previa en Google Tag Manager e ingresé la URL de mi sitio web (https://forum.hobiguru.com).
    • Sin embargo, el depurador de vista previa de GTM dice que no se encontró ninguna etiqueta de GTM en mi sitio.
    • A pesar de que gtm.js se carga y no hay errores visibles, el depurador no reconoce la configuración de GTM.

Capturas de pantalla:

  • Captura de pantalla 1: Configuración del contenedor de GTM en Google Tag Manager (mostrando la etiqueta GA4 y los activadores).
  • Captura de pantalla 2: Configuración de administrador de Discourse que muestra el ID del contenedor de GTM (GTM-W…MZV) configurado.
  • Captura de pantalla 3: Herramientas de desarrollador del navegador que muestran que la biblioteca gtm.js se carga correctamente en mi sitio web.
  • Captura de pantalla 4: Modo de vista previa de GTM que muestra el mensaje de error: No se encontró ninguna etiqueta de GTM en su sitio web.



Lo que he intentado hasta ahora:

  • Confirmé que gtm.js se carga en la pestaña Network.
  • Verifiqué la consola del navegador en busca de errores de Content Security Policy (CSP) u otros errores de JavaScript.
  • Borré la caché de mi sitio y navegador para asegurarme de que no haya problemas de caché.
  • Volví a publicar el contenedor de GTM para asegurarme de que esté actualizado.

Solicitud:

¿Alguien puede ayudarme a entender por qué el Modo de vista previa de GTM no detecta mi configuración de GTM, a pesar de que el script gtm.js se carga correctamente? ¿Hay algo que me esté perdiendo en el proceso de configuración o integración?