Integración de Google Tag Manager con Google Analytics

:bookmark: Esta guía le ayudará a configurar Google Tag Manager y a utilizarlo con Google Analytics en su 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 desea habilitar Google Analytics para su sitio, configure 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 de campo heredado. Las siguientes instrucciones utilizan, y funcionan para, las etiquetas de Google.

:person_raising_hand: Nivel de usuario requerido: Administrador

La integración de Google Tag Manager (GTM) con Google Analytics (GA) le permite administrar y rastrear eventos en su sitio de Discourse de manera efectiva. Esta guía cubre todo el proceso de configuración, desde la creación de una cuenta de GA hasta la configuración de GTM con las etiquetas y activadores necesarios.

Resumen

  1. Cree una cuenta y propiedad de Google Analytics.
  2. Configure Google Tag Manager.
  3. Configure las variables, activadores y etiquetas de GTM.
  4. Integre GTM con su sitio de Discourse.

Crear una cuenta de Google Analytics

  1. Visite Google Analytics e inicie sesión con su cuenta de Google.

  2. Si aún no tiene una cuenta, siga los pasos guiados para crear una.

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

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

  5. Ingrese los detalles de su negocio en la siguiente pantalla.

  6. Seleccione sus objetivos comerciales apropiadamente.

:information_source: Info: Seleccionar las cuatro secciones coincidirá más estrechamente con los informes que Analytics ha proporcionado típicamente:

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

  2. Configure un flujo de datos ingresando la URL de su sitio y un nombre de flujo.

:information_source: Después de crear con éxito su flujo web, anote su ID de Medición. Lo necesitará para la configuración de GTM.

Configurar Google Tag Manager

  1. Visite Google Tag Manager y cree una cuenta.
  2. Configure un contenedor siguiendo los pasos guiados y elija “Web” como plataforma.

Configurar GTM

Variables

  1. Vaya a la pestaña “Variables” en GTM y haga clic en “Nueva” en la sección Variables definidas por el usuario.
  2. Cree dos Variables de Capa de Datos:
  • Título: DL-page-title
    Tipo: Variable de capa de datos
    Nombre de la variable de capa de datos: page.title
    Versión de la capa de datos: 2

  • Título: DL-page-url
    Tipo: Variable de capa de datos
    Nombre de la variable de capa de datos: page.url
    Versión de la capa de datos: 2

Como ejemplo, elija el tipo de variable:

Luego configure las variables, como en este ejemplo:

Activadores (Triggers)

  1. Vaya a la pestaña “Activadores” y haga clic en “Nuevo”.

  2. Elija “Evento personalizado” como tipo.

  3. Nombre el activador virtualPageView y Guárdelo.

    El resultado final debería verse así:

Etiquetas (Tags)

  1. Vaya a la pestaña “Etiquetas” y cree una nueva etiqueta.

  2. Elija Google Analytics: Etiqueta de Google como tipo de etiqueta.

  3. Configure la etiqueta con los siguientes detalles:

  • ID de medición: Ingrese su 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 termine, debería verse así (tenga en cuenta que puede agregar un parámetro userID además de los parámetros anteriores, pero necesitará agregar una variable adicional como DL-page-url.):

  1. Elija el activador virtualPageView para esta etiqueta.
  2. Nombre su etiqueta y Guárdela.

Publicar su espacio de trabajo de GTM

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

:warning: Importante: Si encuentra errores 404 de googletagmanager.com, asegúrese de que los cambios de su contenedor de GTM hayan sido publicados.

Integrar GTM con Discourse

  1. Vaya a la configuración de Administrador de su Discourse y busque gtm container id.
  2. Ingrese su ID de Contenedor de GTM (formato: GTM-XXXXXX) en el campo correspondiente.

:warning: Nota: Elimine cualquier código de seguimiento de Analytics existente de las configuraciones ga universal tracking code y ga tracking code en Discourse.

Recargue su sitio y verifique 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, puede 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?