Création d'événements de clic personnalisés dans GA4
Table des matières
En bref
Varify.io® ne collecte pas de données. Tu peux néanmoins suivre les événements de clics sur des éléments spécifiques dans le cadre de tes expériences Varify. Dans cette section, nous t'expliquons étape par étape comment le faire avec Google Analytics 4.
La configuration s'effectue en deux étapes : vous envoyez d'abord votre événement à GA4 (étape 1), puis vous le configurez dans GA4 (étape 2) – les événements de chiffre d'affaires en tant qu'événement clé, les valeurs numériques en tant que métrique personnalisée. Pour savoir comment analyser l'événement une fois configuré, consultez l'article „ Analyse des événements personnalisés ”.
Étape 1 : Envoyer un événement personnalisé à GA4
Méthode recommandée : envoyer les événements via la configuration de suivi existante
Nous vous recommandons de toujours envoyer les événements personnalisés à GA4 via le canal par lequel vous enregistrez déjà vos événements, c'est-à-dire via votre configuration de suivi existante :
- Google Tag Manager est-il utilisé ?, les événements personnalisés doivent être créés via GTM et transmis à GA4 (généralement via la couche de données et une balise d'événement GA4 correspondante).
- GA4 est-il intégré directement sur le site web ? (sans GTM), les événements personnalisés sont envoyés de la même manière directe.
Cela permet de garantir la cohérence de votre suivi et de le gérer depuis un emplacement centralisé. La solution de suivi des clics décrite ci-dessous, via la fonction „ Add JS ”, est conçue comme un complément si vous souhaitez mesurer les clics sur des éléments spécifiques au sein d'une expérience Varify.
Suivi des clics sur un élément spécifique
L'élément n'existe que dans ta variante
Pour mesurer les clics sur les éléments nouvellement créés dans ta variante, tu dois d'abord définir un sélecteur unique pour chaque élément. Les identifiants se prêtent particulièrement bien à cette tâche.
Un sélecteur unique est par exemple : #my-btn
Pour adapter le code JavaScript au suivi des clics sur ton nouvel élément, tu dois d'abord utiliser le caractère de remplacement #my-btn à la ligne 3 du code avec le sélecteur réel de ton élément. Pour cela, tu peux utiliser la fonction "Add JS". Suis ces instructions :
Ouvrir l'éditeur JavaScript dans Varify : Dans l'éditeur, ouvre la fenêtre pour insérer du JavaScript. Tu trouveras l'icône de code en haut à droite.
Insérer le code : Colle le code JavaScript fourni dans l'éditeur.
Remplacer le sélecteur : En ligne 3, trouve le caractère de remplacement
#my-btn. Remplacer#my-btnavec le sélecteur réel de ton nouvel élément. Cela pourrait être un identifiant (par exemple#nouveau-bouton-id) ou une classe (par exemple.nouvelle-classe-bouton).Enregistrer les modifications : Enregistre les modifications après avoir remplacé le sélecteur.
window.varify.helpers.onDomLoaded(() => {
// Replace the CSS selector
var cssSelector = "#my-btn";
// Select only the first element with the .btn-primary class
var element = document.querySelector(cssSelector);
if (element) {
element.addEventListener("click", VarifyTrack);
}
});
function VarifyTrack() {
if (typeof gtag === "function") {
gtag('event', 'VarifyClick', {
'VarifyClickCount': '1',
});
console.log("Event sent.");
} else {
console.log("gtag is not defined. Please check the GA integration.");
}
}
L'élément existe déjà (dans l'original et la variante)
Pour mesurer les clics sur des éléments qui existent déjà sur ton site, il est important de définir un sélecteur unique pour chaque élément. Une manière efficace de déterminer un tel sélecteur est d'utiliser l'éditeur visuel de Varify.io.
Voici un exemple de sélecteur unique .btn-primary.
Pour suivre les événements de clic d'éléments déjà existants, qui apparaissent à la fois dans l'original et dans la variante de ton expérience, tu peux mettre en place une expérience de suivi spéciale. Voici des instructions adaptées à cet effet :
Créer une nouvelle expérience : Créez une expérience exclusivement destinée au suivi des éléments.
Ajouter du code JavaScript : Utilise la fonction "Add JS" pour ajouter le code JavaScript nécessaire à ta variante. À la ligne 3 du code, remplace le caractère de remplacement
.btn-primaryavec le sélecteur CSS correct de ton élément.Régler le ciblage des pages : Définis le ciblage de page pour l'expérience de manière à ce qu'il soit défini sur la page d'accueil avec un type de correspondance "Contains". Cela garantit que toutes les pages de ton site web sont incluses, ce qui permet à l'expérience d'être active sur l'ensemble du site.
Adapter la répartition du trafic : La distribution du trafic doit être réglée sur 100% pour la variante afin de garantir que tous les utilisateurs reçoivent le script de suivi.
Suivi des événements de clics : Les clics sur l'élément spécifié sont envoyés sous forme d'événement à Google Analytics 4 (GA4) afin d'y être analysés.
window.varify.helpers.onDomLoaded(() => {
// Define the CSS selector of the element you want to track
var cssSelector = ".btn-primary";
var elements = document.querySelectorAll(cssSelector);
elements.forEach(function(element) {
element.addEventListener("click", VarifyTrack);
});
});
function VarifyTrack() {
if (typeof gtag === "function") {
gtag('event', 'VarifyClick', {
'VarifyClickCount': '1',
});
console.log("Event sent.");
} else {
console.log("gtag is not defined. Please check the GA integration.");
}
}
Envoyer les paramètres d'événement dans GTM
Pour que tu puisses analyser cet événement ultérieurement en tant que métrique personnalisée, il doit envoyer un paramètre d'événement à GA4. Dans les extraits de code d'événement de clic ci-dessus, celui-ci est déjà transmis (VarifyClickCount).
Si tu enregistrais un événement personnalisé via GTM et qu'il n'envoie encore aucun paramètre, ajoute-le directement à l'événement :
- Ouvre l'onglet „ Paramètres de l'événement ”.
- Clique sur le bouton bleu „ Ajouter un paramètre ”.
- Saisis dans le champ „ Paramètres de l'événement ” Saisissez le nom du paramètre.
- À porter sous Valeur le nombre
1un (ou, dans le cas des événements générateurs de chiffre d'affaires, la valeur dynamique du chiffre d'affaires). - Publiez les modifications apportées au conteneur GTM.
Étape 2 : Configurer un événement personnalisé dans GA4
Dès que tes événements sont correctement envoyés à GA4, ils y apparaissent automatiquement, sans que tu aies à les créer manuellement. (Leur apparition dans les rapports peut prendre jusqu'à 24 heures.)
La partie « envoi » est donc terminée ; nous allons maintenant passer à GA4. En fonction de votre cas d'utilisation, vous pouvez y configurer votre événement comme suit :
- Chiffre d'affaires : comme Événement phare les sélectionner afin qu'ils apparaissent dans le rapport de résultats Varify sous la rubrique « Événements clés ».
- Indicateurs (numériques) classiques : en outre, en tant que Indicateur personnalisé les créer afin de pouvoir les analyser dans les rapports exploratoires.
Marquer les événements personnalisés liés au chiffre d'affaires comme événements clés
Pour qu’un événement personnalisé lié au chiffre d’affaires apparaisse dans le rapport de résultats Varify sous la rubrique « Événements clés » et puisse y être sélectionné comme objectif, il doit être marqué comme « événement clé » dans GA4. Pour les autres événements personnalisés (par exemple, les événements de simple clic), cette étape n’est pas nécessaire : ils sont de toute façon disponibles en tant qu’objectifs.
- Dans GA4, accédez à « Administration » → « Événements » (ou « Événements clés »).
- Recherchez votre événement personnalisé « Revenue » et activez le bouton « Marquer comme événement clé ».
- Si l'événement n'est pas encore enregistré, cliquez sur « Nouvel événement clé » et saisissez le nom de l'événement exactement tel que GA4 le reçoit.
Créer des valeurs numériques en tant que métriques personnalisées
Si vous souhaitez analyser la valeur numérique d'un événement (par exemple, un compteur ou une quantité) dans les rapports exploratoires, créez une métrique personnalisée dans GA4. Pour cela, il est indispensable que l'événement transmette le paramètre correspondant (voir étape 1).
- Dans GA4, accédez à Admin → Définitions personnalisées → Indicateurs personnalisés → Créer un indicateur personnalisé.
- Donnez-lui un nom évocateur et, si vous le souhaitez, ajoutez une brève description.
- Sélectionne le paramètre d'événement dans le menu déroulant ou ajoute-le manuellement. Veille à respecter l'orthographe exacte.
- Laisser dans le champ „ Unité de mesure ” généralement la valeur „ Standard ” (pour le chiffre d'affaires : l'unité monétaire correspondante) et enregistrez la métrique personnalisée.
Il faut compter entre 24 et 48 heures avant que les données ne soient disponibles dans les rapports exploratoires. Notez également que les données relatives aux événements sont sans effet rétroactif attribuée à une métrique personnalisée. Une métrique personnalisée ne commence à collecter des données qu'après sa création.
