Envoyer des événements personnalisés vers Google Tag Manager et Analytics

[Discourse]

Poursuite de la discussion sur Intégration de Google Tag Manager avec Google Analytics :

Envoi d’événements personnalisés vers Google Tag Manager et Analytics

Ce guide explique comment configurer votre site Discourse pour envoyer des événements personnalisés vers Google Tag Manager (GTM) et Google Analytics, vous permettant de suivre des interactions utilisateur spécifiques.

Niveau d’utilisateur requis : Administrateur

Prérequis

Avant d’implémenter des événements personnalisés, assurez-vous d’avoir :

1. Configuré Google Tag Manager sur votre site Discourse en suivant le guide Configurer Google Tag Manager pour Analytics
2. Ajouté votre ID de conteneur GTM au paramètre gtm container id de votre site
3. Mis à jour le paramètre content security policy script src de votre site pour autoriser les scripts Google

Ajout d’événements personnalisés

Créer un composant de thème

1. Naviguez vers Admin > Personnaliser > Composants
2. Cliquez sur « Nouveau » et sélectionnez « Créer un nouveau composant »
3. Donnez un nom à votre composant
4. Sélectionnez l’onglet JS et ajoutez votre code. Par exemple, le code ci-dessous intercepte les déclencheurs appEvent et pousse les événements suivants vers la dataLayer :

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

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

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

  // Suivre les "j'aime" sur les publications
  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
      });
    }
  });

  // Suivre les nouvelles publications
  api.onAppEvent("post:created", post => {
    if (post) {
      window.dataLayer.push({
        'event': 'postCreated',
        'postId': post.id
      });
    }
  });

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

5. Enregistrez le composant
6. Ajoutez le composant à tous les thèmes actifs sur votre site

Événements disponibles

Tous les événements de déclenchement disponibles sont listés ici : Référence des déclencheurs AppEvents

Configuration de GTM

Créer un déclencheur

1. Accédez à https://tagmanager.google.com/
2. Sélectionnez « Déclencheurs » dans le menu latéral
3. Cliquez sur « Nouveau »
4. Nommez votre déclencheur
5. Sélectionnez « Événement personnalisé » comme type de déclencheur
6. Entrez le nom de l’événement (par exemple, postCreated)
7. Configurez le déclencheur pour qu’il se déclenche sur « Tous les événements personnalisés »

Créer une variable de couche de données (Data Layer Variable)

1. Sélectionnez « Variables » dans le menu latéral de GTM
2. Cliquez sur « Nouveau » dans la section Variables définies par l’utilisateur
3. Nommez votre variable
4. Sélectionnez « Variable de couche de données » comme Type de variable
5. Entrez le nom de la variable de couche de données (par exemple, postCreated)
6. Définissez la Version de la couche de données sur « Version 2 »

Créer une balise Google pour le suivi des événements

Depuis 2024, l’approche recommandée consiste à utiliser le nouveau modèle « Balise Google » au lieu de l’ancien type de balise « Google Analytics : Événement GA4 ». La Balise Google offre une meilleure intégration avec GA4 et inclut une prise en charge intégrée du Consent Mode v2.

1. Sélectionnez « Balises » dans le menu latéral de GTM
2. Cliquez sur « Nouvelle »
3. Nommez votre balise (par exemple, « GT - Post Created »)
4. Sous Configuration de la balise :
   • Sélectionnez « Balise Google »
   • Sélectionnez votre Configuration GA4 (ou créez-en une nouvelle s’il s’agit de votre première balise)
   • Pour « Nom de l’événement », entrez un nom descriptif en suivant les conventions de nommage GA4 (par exemple, post_created)
   • Sous « Paramètres de configuration », cliquez sur « Ajouter une ligne » pour inclure vos variables de couche de données :
     • Paramètre de configuration : (par exemple, postId)
     • Valeur : Votre variable de couche de données (par exemple, {{postCreated}})
5. Sous « Déclenchement » :
   • Sélectionnez votre déclencheur d’événement personnalisé créé précédemment

Si vous utilisez actuellement des balises « Google Analytics : Événement GA4 », elles continueront de fonctionner, mais les nouvelles implémentations devraient utiliser le modèle « Balise Google » pour une meilleure compatibilité future et de meilleures fonctionnalités.

Exigences de nommage des événements

GA a des exigences spécifiques pour les noms d’événements :

• Utiliser le snake_case (lettres minuscules avec des tirets bas)
• Longueur maximale de 40 caractères
• Ne peut contenir que des caractères alphanumériques et des tirets bas

Test de votre balise Google

1. Cliquez sur le bouton « Prévisualiser » dans GTM
2. Naviguez vers votre site Discourse
3. Effectuez l’action que vous souhaitez suivre (par exemple, créer une publication)
4. En mode Prévisualisation de GTM :
   • Vérifiez que votre événement personnalisé apparaît dans le panneau de gauche
   • Vérifiez que votre balise Google s’est déclenchée correctement
   • Confirmez que tous les paramètres sont transmis comme prévu
5. Dans Google Analytics :
   • Naviguez vers Configurer > Événements
   • Votre événement personnalisé devrait apparaître dans la liste après avoir été déclenché
   • Remarque : il peut s’écouler jusqu’à 24 heures avant que les nouveaux événements n’apparaissent dans les rapports GA4

Vous pouvez utiliser DebugView de GA4 pour voir les données d’événements en temps réel pendant les tests.

Dépannage

Si vous ne voyez pas d’événements dans GTM :

1. Vérifiez que votre ID de conteneur GTM est correctement défini dans Discourse
2. Assurez-vous que votre composant de thème est ajouté à tous les thèmes actifs
3. Ajoutez des instructions console.log pour vérifier que les événements se déclenchent :

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

4. Utilisez l’extension Chrome Simple Data Layer Viewer pour surveiller la couche de données
5. Si vous voyez des erreurs de politique de sécurité du contenu (CSP), veuillez vous référer aux prérequis mentionnés ci-dessus, et consultez Mitigate XSS Attacks with Content Security Policy pour des étapes supplémentaires.

Si vous avez le paramètre de site ga universal tracking code configuré, videz-le car GTM gérera le script de suivi.