De la façon de démarrer au suivi professionnel

<script>
document.addEventListener('DOMContentLoaded', function() {
  var menu_anchors = document.querySelectorAll('.menu-items a');
  //Click event listener to each anchor element
   menu_anchors.forEach((anchor) => {
   anchor.addEventListener('click', (event) => {
    gtag('event', 'menu_clicks', {
       'event_category': 'Menu Clicks',
       'event_action': anchor.href,
       'event_label': anchor.textContent
    });
   });
  });
});
</script>

Le nom de l’événement « menu_clicks » peut être tout ce que vous voulez, et il comportera trois paramètres que vous fournirez. C’est une approche si vous n’avez pas Google Tag Manager et préférez l’implémentation de gtag.

Vous pouvez utiliser des paramètres personnalisés pour transmettre des valeurs supplémentaires à des événements prédéfinis, par exemple l’événement sign_up. Selon la documentation de GA, il ne prend en charge qu’un seul paramètre appelé « méthode » (qui peut être n’importe quoi, par exemple, connexion sociale, e-mail, etc.)

gtag("event", "sign_up", {
method: "Google"
});

En ajoutant des dimensions personnalisées, vous pouvez également transmettre des informations supplémentaires telles que le plan d’abonnement (par exemple, « essai gratuit », « de base », « premium »).

Vous pouvez ajouter une dimension personnalisée « sign_up_plan » et transmettre la « méthode ».

gtag("event", "sign_up", {
method: "Google",
sign_up_plan: "basic",
});

Pour mettre en œuvre tout cela, vous avez besoin de compétences de base en programmation JS, que vous pouvez rapidement acquérir en utilisant ChatGPT. Vous pouvez maintenant tester l’invite :

Code JavaScript qui déclenche un événement personnalisé gtag portant le nom « menu_clicks » lorsqu’un utilisateur clique sur un élément de menu avec une balise li parent qui a la classe « .menu-item ». Transmettez les paramètres d’événement personnalisés suivants : « event_category » doit être défini sur « Menu Clicks », « event_action » doit être défini sur le lien de l’élément cliqué et « event_label » doit être défini sur le texte d’ancrage de l’élément cliqué.

Essayez cette invite et vous verrez la magie opérer.

Vous pouvez copier et coller ce code dans votre éditeur de code CMS, et le tour est joué !

Maintenant, configurons le même suivi des événements à l’aide de la balise GTM.

Je suppose que vous avez déjà installé GA4 via Google Tag Manager et que vous suivrez les étapes à partir de là.

Vous devrez ajouter des dimensions personnalisées selon les étapes expliquées dans la section ci-dessus.

Comment configurer le suivi des événements dans Google Tag Manager

Créez une nouvelle variable JavaScript dans GTM qui renvoie le nom de classe de balise parent de l’ancre cliquée – car, dans GTM, il n’existe aucun moyen intégré pour obtenir les attributs des éléments DOM parents.

Aller vers Variables > Variables définies par l’utilisateur et cliquez sur le Nouveau bouton dans le coin supérieur droit. Dans la boîte de dialogue contextuelle, sélectionnez Javascript personnalisé.

Copiez et collez ce code dedans.

function() {
 'use strict';
 try {
       var clickElement = {{Click Element}}; // clickable element DOM object
       var clickParent = clickElement.closest('.menu-item'); //clickable element DOM object parent with class .menu-item
       if (!clickParent) return ''; 
       return clickParent.getAttribute('class'); // if element exist return class attribute
 } catch (err) {
       return '';
 }
}

Ce code renvoie l’attribut de classe parent d’un élément cliqué lorsqu’il existe un parent avec la classe ‘.menu-item’, ou il renvoie une valeur vide s’il n’existe pas d’élément parent de ce type.

Nous pouvons utiliser cela pour garantir que nous détectons uniquement les clics sur les liens d’éléments de menu, et non sur d’autres liens ailleurs sur la page.

Créez un nouveau déclencheur dans GTM qui se déclenche à tous les clics sur les éléments avec un parent

Accédez à Déclencheurs et cliquez sur le bouton Nouveau bouton dans le coin supérieur droit.

Dans la boîte de dialogue contextuelle, sélectionnez Cliquez – Juste des liens.

Choisir Quelques clics sur les liens > Configurer il se déclenche sur les clics où la classe d’élément parent contient la chaîne « élément de menu ».

Accédez à Balises et ajoutez la balise d’événement GA4.

Capture d’écran de GA4, avril 2023

Remplissez comme nom d’événement « main_menu_clicks » ou le nom que vous souhaitez pour l’événement, et ajoutez les paramètres personnalisés event_category, event_action et event_label.

Capture d’écran de GA4, avril 2023

Pour l’action et le libellé de l’événement, choisissez Cliquez sur Texte et Cliquez sur URL variables intégrées.

Capture d’écran de GA4, avril 2023

Choisissez le déclencheur des clics de menu que nous avons créés précédemment et enregistrez la balise.

Publiez les modifications et déboguez pour vous assurer que lorsque vous cliquez sur les éléments de votre menu, l’événement se déclenche avec tous les paramètres correctement définis.

Comment implémenter le suivi des événements personnalisé à l’aide de la méthode dataLayer.push()

Si vous préférez toujours le codage personnalisé et disposez de GTM, vous pouvez utiliser la méthode datalayer.push().

Dans ce cas, vous devrez ajouter les paramètres event_category, event_action et event_label dans GTM en tant que variables dataLayer.

Et dans la section de votre site Web, vous devez utiliser le code ci-dessous.

<script>
//Click event listener to menu items with the '.menu-item' class
document.addEventListener('DOMContentLoaded', function() {
    const menuItems = document.querySelectorAll('.menu-item');
    menuItems.forEach(function(menuItem) {
    menuItem.addEventListener('click', function(event) {
    //Link and anchor text of the clicked link
    let link = menuItem.querySelector('a').href;
    let anchorText = menuItem.querySelector('a').textContent;
    // Trigger the custom event 'menu_clicks' using dataLayer.push()
    dataLayer.push({
      'event': 'menu_clicks',
      'event_category': 'Menu Clicks',
      'event_action': link,
      'event_label': anchorText
    });
  });
 });
});
</script>

Comment savoir si le suivi des événements de Google Analytics fonctionne ?

Il est également important de vérifier si vous voyez un journal des événements avec les mêmes paramètres dans la vue de débogage GA4. Il peut arriver que GTM se déclenche, mais en raison d’une mauvaise configuration, il ne sera pas transmis à GA4.

Si vous avez implémenté gtag, vous devez activer le mode débogage en installant l’extension Chrome ou en ajoutant une ligne de code à votre configuration GA4.

gtag('config', 'G-12345ABCDE', { 'debug_mode':true });

Déboguez toujours et assurez-vous que tous les paramètres personnalisés sont transmis comme prévu.

Conclusion

GA4 est assez difficile et n’est pas un outil d’analyse plug-and-play comme Universal Analytics ; vous devez passer beaucoup de temps à l’apprendre.

D’un autre côté, il est doté de nombreuses nouvelles fonctionnalités que vous pouvez utiliser et améliorer vos analyses à un niveau sans précédent.

En étant capable de personnaliser le suivi des événements, vous obtenez une compétence puissante qui peut même vous aider à contourner certains des modèles d’attribution que Google Analytics est en train de supprimer en suivant la source de la première visite des utilisateurs dans une dimension personnalisée.

Dans cet esprit, je publierai un guide étape par étape sur la façon de restaurer (partiellement) le premier modèle d’attribution à l’aide de paramètres d’événement personnalisés.

Davantage de ressources: