Dans ce guide, nous allons montrer comment capturer un événement chaque fois qu'un visiteur clique sur un lien spécifique de votre site web. Ceci est particulièrement utile lorsque vous avez un lien important pour lequel vous souhaitez surveiller les interactions des utilisateurs.
Si vous utilisez Google Tag Manager, suivez leurs instructions pour configurer un déclencheur (et n'hésitez pas à nous contacter si vous avez besoin d'aide).
Nous commencerons par un exemple de site web comportant un seul lien.
Nous souhaitons configurer un événement qui sera enregistré chaque fois qu'un utilisateur clique sur ce lien.
Une connaissance de base du langage HTML est nécessaire pour configurer des événements personnalisés. Préparez une page HTML similaire à celle présentée ci-dessous, qui comprend une série de balises et un script d'intégration. Ensuite, nous ajouterons un petit script supplémentaire à la page, en tenant compte du fait que le processus de mise en œuvre peut varier en fonction de la conception de votre site web.
Si vous êtes un développeur et que vous voulez vous salir les mains, n'hésitez pas à le modifier à votre guise. Si vous êtes un "utilisateur moyen", il vous suffit de le copier/coller dans une balise de script sur la page où se trouve le lien, comme le montre l'image ci-dessous. La balise de script doit contenir un paragraphe qui contient un lien vers le site web de l'exemple.
Il s'agit du script nécessaire pour collecter les clics de liens spécifiques. Vous pouvez simplement copier tout ce qui précède (y compris les parties du texte dans lesquelles nous expliquons ce que chaque bloc fait spécifiquement).
<script> // Nous enfermons notre code dans une fonction anonyme, afin qu'il n'interfère pas avec d'autres codes (function () { // Quel mot-clé les liens doivent-ils contenir pour créer des événements ? // Si l'URL est quelque chose comme https://www.example.com/product/1234 // mot-clé = "/produit/" var mot-clé = "" ; // Nom pour l'événement var événement = "link_click" ; // Cette fonction lie un événement à un lien function bindToLinks(element) { // Nous vérifions si le mot-clé est renseigné if ( !keyword) return console.warn("Simple Analytics : No keyword set") ; // Nous filtrons les liens que nous voulons lier à if (!element.href || element.href.indexOf(keyword) === -1) return ; // Nous utilisons le dataset pour vérifier si nous avons déjà ajouté notre événement à ce lien if (element.dataset.simpleAnalytics) return ; element.dataset.simpleAnalytics = "link-event" ; // Nous écoutons ici les liens qui sont soumis element.addEventListener("click", function (event) { // Nous nous arrêtons lorsque nous avons déjà géré cet événement if (element.dataset.simpleAnalyticsClicked) return ; // Si le script Simple Analytics n'est pas chargé, nous ne faisons rien if (!window.sa_loaded) return ; // Nous empêchons le visiteur de naviguer ailleurs, parce que nous le faisons plus tard après l'événement sa_event.preventDefault() ; // Nous recherchons un bouton dans le lien pour trouver le texte du bouton var text = element.textContent ? element.textContent.trim().toLowerCase() : null ; // Nous ajoutons ce texte aux métadonnées de notre événement var metadata = { text : text, hostname : element.hostname, path : element.pathname, id : element.getAttribute("id"), classes : element.getAttribute("class") } ; // Nous envoyons l'événement à Simple Analytics window.sa_event(event, metadata, function () { // Maintenant, nous cliquons sur le lien pour de vrai element.dataset.simpleAnalyticsClicked = "true" ; element.click() ; }) ; }) ; } // Cette fonction trouve tous les liens et les transmet à la fonction bindToLinks function onDOMContentLoaded() { document.querySelectorAll("a").forEach(bindToLinks) ; } // Ce code exécute la fonction onDOMContentLoaded lorsque le chargement de la page est terminé if (document.readyState === "ready" || document.readyState === "complete") { onDOMContentLoaded() ; } else { document.addEventListener("readystatechange", function (event) { if (event.target.readyState === "complete") onDOMContentLoaded() ; }) ; } // S'il n'y a pas de MutationObserver, nous sautons la logique suivante if ( !window.MutationObserver) return console.warn("Simple Analytics : MutationObserver not found") ; // Nous recherchons de nouveaux éléments de lien lorsque le MutationObserver détecte un changement var callback = function (mutationList) { mutationList.forEach(function (mutation) { mutation.addedNodes.forEach(function (node) { // Nous recherchons des éléments de lien dans la page if (node && node.tagName === "A") bindToLinks(node) ; }) ; } ; } ; // C'est l'observateur qui détecte les changements sur la page // Il peut arriver que de nouveaux liens soient créés après le chargement initial de la page // Par exemple, dans une fenêtre modale qui s'ouvre pour modifier certaines données.
var observer = new MutationObserver(callback) ; // Ici, nous commençons à observer la page pour détecter les changements observer.observe(document.body, { childList : true, subtree : true }) ; })() ; </script>.Le code fourni ressemblera à ce qui suit : Il commence par une fonction, puis spécifie un mot-clé et un nom d'événement.
Le reste des fonctions du script n'est pas crucial ; vous n'avez pas besoin de les modifier, sauf si vous êtes un développeur expérimenté dans ce domaine. Vous ne devez modifier que le "nom du mot-clé" et le "nom de l'événement".
Choisissez un "nom de mot-clé" qui fait partie de l'URL du lien. Par exemple, si le site web dit quelque chose comme "duckduckgo.com/blog/how-to-be-private", vous pouvez modifier le mot-clé en "duckduckgo" ou "blog" pour capturer toutes les URL contenant "blog" dans l'URL.
Pour l'instant, nous allons rester simples et utiliser "exemple" comme mot-clé. Le "nom de l'événement" sera affiché dans votre tableau de bord, dans l'Explorateur d'événements. Dans le cas présent, il s'appelle "Link_Click", mais vous pouvez le remplacer par le nom de votre choix.
En examinant le code, vous remarquerez qu'il envoie des données telles que le texte, le nom d'hôte, le chemin d'accès, l'ID et les classes. Vous pouvez supprimer ou ajouter des informations si vous le souhaitez ; sinon, aucune modification n'est nécessaire.
Une fois le script configuré, enregistrez la page, déployez-la sur votre site web et actualisez-la. L'événement que vous venez de créer devrait maintenant pouvoir faire l'objet d'un suivi.
Si nous cliquons sur le lien "exemple.com" pour le tester et que nous nous rendons sur notre tableau de bord Events Explorer, nous devrions voir un nouvel événement, affiché sous le nom de "Link_Click". Vous pouvez le filtrer en fonction du lien et ajouter des champs de métadonnées, tels que le chemin d'accès, le nom d'hôte et les classes, à l'aide du menu déroulant "Ajouter une colonne".
Pour configurer des événements pour plusieurs liens, il suffit de répéter le processus de copier-coller du script et de mettre à jour le nom de l'événement et les paramètres du mot-clé. Voilà comment vous pouvez configurer avec succès le suivi des événements pour des liens spécifiques sur votre site web.
Si vous souhaitez collecter tous les clics de liens sortants, vous pouvez également configurer notre script d'événements automatisé.