Enviar eventos personalizados a Google Tag Manager y Analytics

[Discourse]

Continuando la discusión de Integración de Google Tag Manager con Google Analytics:

Envío de eventos personalizados a Google Tag Manager y Analytics

Esta guía explica cómo configurar su sitio de Discourse para enviar eventos personalizados a Google Tag Manager (GTM) y Google Analytics, lo que le permite rastrear interacciones específicas del usuario.

Nivel de usuario requerido: Administrador

Prerrequisitos

Antes de implementar eventos personalizados, asegúrese de tener:

1. Configurado Google Tag Manager en su sitio de Discourse siguiendo la guía Configurar Google Tag Manager para Analytics
2. Agregado su ID de contenedor GTM a la configuración gtm container id de su sitio
3. Actualizado la configuración content security policy script src de su sitio para permitir los scripts de Google

Adición de eventos personalizados

Crear un componente de tema

1. Navegue a Admin > Personalizar > Componentes
2. Haga clic en “Nuevo” y seleccione “Crear nuevo componente”
3. Asígnele un nombre a su componente
4. Seleccione la pestaña JS y agregue su código. Por ejemplo, el código a continuación toma los activadores de appEvent y envía los siguientes eventos a dataLayer:

• post:liked
• post:created
• topic:created

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  window.dataLayer = window.dataLayer || [];

  // Rastrear "me gusta" en publicaciones
  api.onAppEvent("page:like-toggled", (post, likeAction) => {
    let topic = post.topic;
    if (post && topic && likeAction && likeAction.acted) {
      window.dataLayer.push({
        'event': 'postLiked',
        'postId': post.id
      });
    }
  });

  // Rastrear publicaciones nuevas
  api.onAppEvent("post:created", post => {
    if (post) {
      window.dataLayer.push({
        'event': 'postCreated',
        'postId': post.id
      });
    }
  });

  // Rastrear temas nuevos
  api.onAppEvent("topic:created", (post, composerModel) => {
    if (post) {
      window.dataLayer.push({
        'event': 'topicCreated',
        'topicCategory': composerModel.get("category.name"),
        'topicId': post.topic_id
      });
    }
  });
});

5. Guarde el componente
6. Agregue el componente a todos los temas activos en su sitio

Eventos disponibles

Todos los eventos de activación disponibles se enumeran aquí: Referencia de activadores de AppEvents

Configuración de GTM

Crear un activador

1. Vaya a https://tagmanager.google.com/
2. Seleccione “Activadores” en el menú lateral
3. Haga clic en “Nuevo”
4. Asigne un nombre a su activador
5. Seleccione “Evento personalizado” como tipo de Activador
6. Ingrese el nombre del evento (por ejemplo, postCreated)
7. Configure el activador para que se dispare en “Todos los eventos personalizados”

Crear una variable de capa de datos

1. Seleccione “Variables” en el menú lateral de GTM
2. Haga clic en “Nuevo” en la sección Variables definidas por el usuario
3. Asigne un nombre a su variable
4. Seleccione “Variable de capa de datos” como Tipo de variable
5. Ingrese el nombre de la variable de capa de datos (por ejemplo, postCreated)
6. Establezca la Versión de la capa de datos en “Versión 2”

Crear una etiqueta de Google para el seguimiento de eventos

A partir de 2024, el enfoque recomendado es utilizar la nueva plantilla “Etiqueta de Google” en lugar del tipo de etiqueta anterior “Google Analytics: Etiqueta de evento GA4”. La Etiqueta de Google proporciona una mejor integración con GA4 e incluye soporte incorporado para el Modo de consentimiento v2.

1. Seleccione “Etiquetas” en el menú lateral de GTM
2. Haga clic en “Nueva”
3. Asigne un nombre a su etiqueta (por ejemplo, “GT - Post Creado”)
4. En Configuración de la etiqueta:
   • Seleccione “Etiqueta de Google”
   • Seleccione su Configuración de GA4 (o cree una nueva si esta es su primera etiqueta)
   • Para “Nombre del evento”, ingrese un nombre descriptivo siguiendo las convenciones de nomenclatura de GA4 (por ejemplo, post_created)
   • En “Configuración de configuración”, haga clic en “Agregar fila” para incluir sus variables de capa de datos:
     • Parámetro de configuración: (por ejemplo, postId)
     • Valor: Su variable de capa de datos (por ejemplo, {{postCreated}})
5. En “Activación”:
   • Seleccione el activador de evento personalizado creado anteriormente

Si actualmente está utilizando etiquetas de “Google Analytics: Evento GA4”, seguirán funcionando, pero las nuevas implementaciones deben usar la plantilla “Etiqueta de Google” para una mejor compatibilidad futura y características.

Requisitos de nomenclatura de eventos

GA tiene requisitos específicos para los nombres de eventos:

• Usar snake_case (letras minúsculas con guiones bajos)
• Longitud máxima de 40 caracteres
• Solo puede contener caracteres alfanuméricos y guiones bajos

Probar su etiqueta de Google

1. Haga clic en el botón “Vista previa” en GTM
2. Navegue a su sitio de Discourse
3. Realice la acción que desea rastrear (por ejemplo, crear una publicación)
4. En el modo de vista previa de GTM:
   • Verifique que su evento personalizado aparezca en el panel izquierdo
   • Compruebe que su etiqueta de Google se haya activado correctamente
   • Confirme que todos los parámetros se estén pasando como se espera
5. En Google Analytics:
   • Navegue a Configurar > Eventos
   • Su evento personalizado debería aparecer en la lista después de haber sido activado
   • Nota: pueden pasar hasta 24 horas para que los nuevos eventos aparezcan en los informes de GA4

Puede utilizar Vista de depuración de GA4 para ver datos de eventos en tiempo real durante las pruebas.

Solución de problemas

Si no ve eventos en GTM:

1. Verifique que su ID de contenedor GTM esté configurado correctamente en Discourse
2. Asegúrese de que su componente de tema esté agregado a todos los temas activos
3. Agregue sentencias console.log para verificar que los eventos se están activando:

api.onAppEvent("post:created", post => {
  console.log("post:created event triggered");
  if (post) {
    window.dataLayer.push({
      'event': 'postCreated',
      'postId': post.id
    });
  }
});

4. Utilice la extensión de Chrome Simple Data Layer Viewer para monitorear la capa de datos
5. Si ve errores de Política de Seguridad de Contenido (CSP), consulte los prerrequisitos referenciados anteriormente y revise Mitigate XSS Attacks with Content Security Policy para obtener pasos adicionales.

Si tiene configurada la configuración del sitio ga universal tracking code, vacíela ya que GTM se encargará del script de seguimiento.