Invia eventi personalizzati a Google Tag Manager e Analytics

[Discourse]

Continuando la discussione da Integrazione di Google Tag Manager con Google Analytics:

Invio di eventi personalizzati a Google Tag Manager e Analytics

Questa guida spiega come configurare il tuo sito Discourse per inviare eventi personalizzati a Google Tag Manager (GTM) e Google Analytics, consentendoti di monitorare interazioni specifiche dell’utente.

Livello utente richiesto: Amministratore

Prerequisiti

Prima di implementare eventi personalizzati, assicurati di aver:

1. Configurato Google Tag Manager sul tuo sito Discourse seguendo la guida Impostazione di Google Tag Manager per Analytics
2. Aggiunto l’ID contenitore GTM all’impostazione gtm container id del tuo sito
3. Aggiornato l’impostazione content security policy script src del tuo sito per consentire gli script Google

Aggiunta di eventi personalizzati

Creare un componente tema

1. Naviga su Admin > Customize > Components (Amministratore > Personalizza > Componenti)
2. Clicca su “New” (Nuovo) e seleziona “Create new component” (Crea nuovo componente)
3. Assegna un nome al tuo componente
4. Seleziona la scheda JS e aggiungi il tuo codice. Ad esempio, il codice seguente intercetta gli eventi appEvent e invia i seguenti eventi al dataLayer:

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

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

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

  // Traccia i "mi piace" ai post
  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
      });
    }
  });

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

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

5. Salva il componente
6. Aggiungi il componente a tutti i temi attivi sul tuo sito

Eventi disponibili

Tutti gli eventi di trigger disponibili sono elencati qui: Riferimento ai trigger AppEvents

Configurazione di GTM

Creare un trigger

1. Vai su https://tagmanager.google.com/
2. Seleziona “Triggers” (Attivatori) dal menu laterale
3. Clicca su “New” (Nuovo)
4. Nomina il tuo trigger
5. Seleziona “Custom Event” (Evento personalizzato) come tipo di trigger
6. Inserisci il nome dell’evento (es. postCreated)
7. Imposta il trigger per essere attivato su “All Custom Events” (Tutti gli eventi personalizzati)

Creare una variabile Data Layer

1. Seleziona “Variables” (Variabili) dal menu laterale di GTM
2. Clicca su “New” (Nuovo) nella sezione User-Defined Variables (Variabili definite dall’utente)
3. Nomina la tua variabile
4. Seleziona “Data Layer Variable” (Variabile del livello dati) come Tipo di variabile
5. Inserisci il nome della variabile del livello dati (es. postCreated)
6. Imposta Data Layer Version su “Version 2”

Creare un tag Google per il tracciamento eventi

A partire dal 2024, l’approccio consigliato è utilizzare il nuovo modello “Google Tag” anziché il tipo di tag più vecchio “Google Analytics: GA4 Event”. Il Google Tag fornisce una migliore integrazione con GA4 e include il supporto integrato per la Modalità Consenso v2.

1. Seleziona “Tags” (Tag) dal menu laterale di GTM
2. Clicca su “New” (Nuovo)
3. Nomina il tuo tag (es. “GT - Post Created”)
4. In Configurazione Tag:
   • Seleziona “Google Tag”
   • Seleziona la tua Configurazione GA4 (o creane una nuova se questo è il tuo primo tag)
   • Per “Event Name” (Nome evento), inserisci un nome descrittivo seguendo le convenzioni di denominazione GA4 (es. post_created)
   • Sotto “Configuration settings” (Impostazioni di configurazione), clicca su “Add Row” (Aggiungi riga) per includere le tue variabili del livello dati:
     • Configuration Parameter (Parametro di configurazione): (es. postId)
     • Value (Valore): La tua variabile del livello dati (es. {{postCreated}})
5. In “Triggering” (Attivazione):
   • Seleziona il trigger di evento personalizzato creato in precedenza

Se attualmente stai utilizzando tag “Google Analytics: GA4 Event”, continueranno a funzionare, ma le nuove implementazioni dovrebbero utilizzare il modello “Google Tag” per una migliore compatibilità futura e funzionalità.

Requisiti di denominazione eventi

GA ha requisiti specifici per i nomi degli eventi:

• Usa snake_case (lettere minuscole con trattini bassi)
• Lunghezza massima di 40 caratteri
• Può contenere solo caratteri alfanumerici e trattini bassi

Test del tuo Google Tag

1. Clicca sul pulsante “Preview” (Anteprima) in GTM
2. Naviga sul tuo sito Discourse
3. Esegui l’azione che desideri tracciare (es. crea un post)
4. Nella modalità Anteprima di GTM:
   • Verifica che il tuo evento personalizzato appaia nel pannello di sinistra
   • Controlla che il tuo Google Tag sia stato attivato correttamente
   • Conferma che tutti i parametri vengano passati come previsto
5. In Google Analytics:
   • Naviga su Configure > Events (Configura > Eventi)
   • Il tuo evento personalizzato dovrebbe apparire nell’elenco dopo essere stato attivato
   • Nota: potrebbero essere necessarie fino a 24 ore prima che i nuovi eventi compaiano nei report GA4

Puoi utilizzare DebugView di GA4 per visualizzare i dati degli eventi in tempo reale durante il test.

Risoluzione dei problemi

Se non vedi eventi in GTM:

1. Controlla che l’ID del contenitore GTM sia impostato correttamente in Discourse
2. Assicurati che il tuo componente tema sia aggiunto a tutti i temi attivi
3. Aggiungi istruzioni console.log per verificare l’attivazione degli eventi:

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

4. Utilizza l’estensione Chrome Simple Data Layer Viewer per monitorare il livello dati
5. Se vedi errori di Content Security Policy (CSP), fai riferimento ai prerequisiti citati sopra e consulta Mitigate XSS Attacks with Content Security Policy per ulteriori passaggi.

Se hai configurata l’impostazione del sito ga universal tracking code, svuotala poiché GTM gestirà lo script di tracciamento.