Utilisez jQuery pour écouter et transmettre le suivi des événements Google Analytics pour tout clic

jQuery écoute les clics pour passer le suivi des événements Google Analytics

Je suis surpris que davantage d'intégrations et de systèmes n'incluent pas automatiquement Suivi des événements Google Analytics dans leurs plateformes. Une grande partie de mon temps de travail sur les sites des clients consiste à développer le suivi des événements afin de fournir au client les informations dont il a besoin sur les comportements des utilisateurs qui fonctionnent ou ne fonctionnent pas sur le site.

Plus récemment, j'ai écrit sur la façon de suivre clics mailto, clics téléphoniqueset Soumissions de formulaire Elementor. Je vais continuer à partager les solutions que j'écris dans l'espoir que cela vous aide à mieux analyser les performances de votre site ou de votre application Web.

Cet exemple fournit un moyen très simple d'intégrer le suivi des événements Google Analytics dans n'importe quelle balise d'ancrage en ajoutant un élément de données qui inclut la catégorie d'événement Google Analytics, l'action d'événement Google Analytics et le libellé d'événement Google Analytics. Voici un exemple de lien qui intègre l'élément de données, appelé événement:

<a href="#" data-gaevent="Category,Action,Label">Click Here</a>

Une condition préalable pour votre site est d'y inclure jQuery… avec lequel ce script est alimenté. Une fois votre page chargée, ce script ajoute un écouteur à votre page pour toute personne cliquant sur un élément avec événement data… puis il capture et analyse la catégorie, l'action et l'étiquette que vous spécifiez dans le champ.

<script>
  $(document).ready(function() {      
    $(document).on('click', '[data-gaevent]', function(e) {
      var $link = $(this);
      var csvEventData = $link.data('gaevent');
      var eventParams = csvEventData.split(',');
      if (!eventParams) { return; }
        eventCategory = eventParams[0]
        eventAction = eventParams[1]
        eventLabel = eventParams[2]
        gtag('event',eventAction,{'event_category': eventCategory,'event_label': eventLabel})
        //alert("The Google Analytics Event passed is Action: " + eventAction + ", Category: " + eventCategory + ", Label: " + eventLabel);
    });
  });
</script>

Remarque : j'ai inclus une alerte (commentée) afin que vous puissiez tester ce qui est réellement passé.

Si vous utilisez jQuery sur WordPress, vous voudrez modifier un peu le code car WordPress n'apprécie pas le raccourci $ :

<script>
  jQuery(document).ready(function() {      
    jQuery(document).on('click', '[data-gaevent]', function(e) {
      var $link = jQuery(this);
      var csvEventData = $link.data('gaevent');
      var eventParams = csvEventData.split(',');
      if (!eventParams) { return; }
        eventCategory = eventParams[0]
        eventAction = eventParams[1]
        eventLabel = eventParams[2]
        gtag('event',eventAction,{'event_category': eventCategory,'event_label': eventLabel})
        //alert("The Google Analytics Event passed is Action: " + eventAction + ", Category: " + eventCategory + ", Label: " + eventLabel);
    });
  });
</script>

Ce n'est pas le script le plus robuste et vous devrez peut-être faire un peu de nettoyage supplémentaire, mais cela devrait vous aider à démarrer !