Benutzerdefinierte Ereignisse an Google Tag Manager und Analytics senden

[Discourse]

Die Diskussion wird fortgesetzt unter Integration von Google Tag Manager mit Google Analytics:

Senden benutzerdefinierter Ereignisse an Google Tag Manager und Analytics

Diese Anleitung erklärt, wie Sie Ihre Discourse-Site konfigurieren, um benutzerdefinierte Ereignisse an Google Tag Manager (GTM) und Google Analytics zu senden, sodass Sie spezifische Benutzerinteraktionen verfolgen können.

Erforderlicher Benutzerlevel: Administrator

Voraussetzungen

Stellen Sie vor der Implementierung benutzerdefinierter Ereignisse sicher, dass Sie Folgendes haben:

1. Konfiguration von Google Tag Manager auf Ihrer Discourse-Site gemäß der Anleitung Google Tag Manager für Analytics einrichten
2. Hinzufügen Ihrer GTM-Container-ID zur Einstellung Ihrer Site gtm container id
3. Aktualisierung der Einstellung Ihrer Site content security policy script src, um Google-Skripte zuzulassen

Hinzufügen benutzerdefinierter Ereignisse

Eine Theme-Komponente erstellen

1. Navigieren Sie zu Admin > Anpassen > Komponenten
2. Klicken Sie auf „Neu“ und wählen Sie „Neue Komponente erstellen“
3. Geben Sie Ihrer Komponente einen Namen
4. Wählen Sie die Registerkarte JS und fügen Sie Ihren Code hinzu. Der folgende Code übernimmt beispielsweise appEvent-Trigger und sendet die folgenden Ereignisse an die dataLayer:

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

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

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

  // Beitrag-Likes verfolgen
  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
      });
    }
  });

  // Neue Beiträge verfolgen
  api.onAppEvent("post:created", post => {
    if (post) {
      window.dataLayer.push({
        'event': 'postCreated',
        'postId': post.id
      });
    }
  });

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

5. Speichern Sie die Komponente
6. Fügen Sie die Komponente allen aktiven Themes auf Ihrer Site hinzu

Verfügbare Ereignisse

Alle verfügbaren Trigger-Ereignisse sind hier aufgelistet: AppEvents-Trigger-Referenz

Konfiguration von GTM

Einen Trigger erstellen

1. Gehen Sie zu https://tagmanager.google.com/
2. Wählen Sie im Seitenmenü „Trigger“
3. Klicken Sie auf „Neu“
4. Benennen Sie Ihren Trigger
5. Wählen Sie als Triggertyp „Benutzerdefiniertes Ereignis“
6. Geben Sie den Ereignisnamen ein (z. B. postCreated)
7. Stellen Sie den Trigger so ein, dass er bei „Allen benutzerdefinierten Ereignissen“ ausgelöst wird

Eine Data Layer-Variable erstellen

1. Wählen Sie im GTM-Seitenmenü „Variablen“
2. Klicken Sie im Abschnitt „Nutzerdefinierte Variablen“ auf „Neu“
3. Benennen Sie Ihre Variable
4. Wählen Sie als Variablentyp „Data Layer-Variable“
5. Geben Sie den Namen der Data Layer-Variable ein (z. B. postCreated)
6. Stellen Sie die Data Layer-Version auf „Version 2“ ein

Ein Google Tag für die Ereignisverfolgung erstellen

Ab 2024 ist der empfohlene Ansatz die Verwendung der neuen Vorlage „Google Tag“ anstelle des älteren Tag-Typs „Google Analytics: GA4-Ereignis“. Der Google Tag bietet eine bessere Integration mit GA4 und beinhaltet eine integrierte Unterstützung für den Consent Mode v2.

1. Wählen Sie im GTM-Seitenmenü „Tags“
2. Klicken Sie auf „Neu“
3. Benennen Sie Ihr Tag (z. B. „GT – Post Created“)
4. Unter Tag-Konfiguration:
   • Wählen Sie „Google Tag“
   • Wählen Sie Ihre GA4-Konfiguration (oder erstellen Sie eine neue, falls dies Ihr erstes Tag ist)
   • Geben Sie für „Ereignisname“ einen beschreibenden Namen gemäß den GA4-Namenskonventionen ein (z. B. post_created)
   • Klicken Sie unter „Konfigurationseinstellungen“ auf „Zeile hinzufügen“, um Ihre Data Layer-Variablen einzufügen:
     • Konfigurationsparameter: (z. B. postId)
     • Wert: Ihre Data Layer-Variable (z. B. {{postCreated}})
5. Unter „Auslösen“:
   • Wählen Sie Ihren zuvor erstellten Trigger für benutzerdefinierte Ereignisse

Wenn Sie derzeit Tags vom Typ „Google Analytics: GA4-Ereignis“ verwenden, funktionieren diese weiterhin, aber neue Implementierungen sollten die Vorlage „Google Tag“ für eine bessere zukünftige Kompatibilität und Funktionen verwenden.

Anforderungen an die Ereignisbenennung

GA hat spezifische Anforderungen an Ereignisnamen:

• Verwenden Sie snake_case (Kleinbuchstaben mit Unterstrichen)
• Maximale Länge von 40 Zeichen
• Darf nur alphanumerische Zeichen und Unterstriche enthalten

Testen Ihres Google Tags

1. Klicken Sie in GTM auf die Schaltfläche „Vorschau“
2. Navigieren Sie zu Ihrer Discourse-Site
3. Führen Sie die Aktion aus, die Sie verfolgen möchten (z. B. einen Beitrag erstellen)
4. Im GTM-Vorschau-Modus:
   • Überprüfen Sie, ob Ihr benutzerdefiniertes Ereignis im linken Bereich angezeigt wird
   • Überprüfen Sie, ob Ihr Google Tag korrekt ausgelöst wurde
   • Bestätigen Sie, dass alle Parameter wie erwartet übergeben werden
5. In Google Analytics:
   • Navigieren Sie zu Konfigurieren > Ereignisse
   • Ihr benutzerdefiniertes Ereignis sollte in der Liste erscheinen, nachdem es ausgelöst wurde
   • Hinweis: Es kann bis zu 24 Stunden dauern, bis neue Ereignisse in den GA4-Berichten angezeigt werden

Sie können die GA4 DebugView verwenden, um Echtzeit-Ereignisdaten während des Tests anzuzeigen.

Fehlerbehebung

Wenn Sie Ereignisse in GTM nicht sehen:

1. Überprüfen Sie, ob Ihre GTM-Container-ID in Discourse korrekt eingestellt ist
2. Stellen Sie sicher, dass Ihre Theme-Komponente allen aktiven Themes hinzugefügt wurde
3. Fügen Sie console.log-Anweisungen hinzu, um zu überprüfen, ob die Ereignisse ausgelöst werden:

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

4. Verwenden Sie die Chrome-Erweiterung Simple Data Layer Viewer, um die Data Layer zu überwachen
5. Wenn Sie Fehler bei der Content Security Policy (CSP) sehen, beziehen Sie sich auf die oben genannten Voraussetzungen und überprüfen Sie Mitigate XSS Attacks with Content Security Policy für weitere Schritte.

Wenn die Einstellung für den Website-Parameter ga universal tracking code konfiguriert ist, leeren Sie diese, da GTM das Tracking-Skript übernimmt.

[MarkDoerr]

Wir haben dieses Thema aktualisiert, um die Änderungen widerzuspiegeln, die GTM und GA seit der ursprünglichen Veröffentlichung erfahren haben. Wir haben auch die Kommentare bereinigt, da sich viele von ihnen auf veraltete Informationen bezogen.