Créer des événements de clic personnalisés dans GA4

Dernière mise à jour le 18 juin 20266 min de lecture

Table des matières

• En bref
• Étape 1 : Envoyer un événement personnalisé à GA4
• Étape 2 : Configurer un événement personnalisé dans GA4

important

Ces instructions ne s'appliquent que si les données ne sont pas envoyées à Google Analytics 4 via un GTM côté serveur ou un GTM intégré via le Custom Pixel Shopify. Cependant, si les données sont envoyées via un GTM côté serveur ou un GTM intégré via le Custom Pixel Shopify, les événements doivent d'abord être poussés vers le DataLayer, puis transmis à GA4 via le GTM.

En bref

Varify.io® ne collecte lui-même aucune donnée. Néanmoins, tu peux suivre les événements de clic sur des éléments spécifiques au sein de tes expériences Varify. Dans cette section, nous expliquons étape par étape comment procéder avec Google Analytics 4.

La configuration se déroule en deux phases : d'abord, tu envoies ton événement à GA4 (étape 1), puis tu le configures dans GA4 (étape 2) — les événements de revenu en tant qu'événements clés, et les valeurs numériques en plus en tant que métriques personnalisées. Pour savoir comment analyser l'événement une fois terminé, consulte l'article « Analyzing Custom Events. ».

Étape 1 : Envoyer un événement personnalisé à GA4

Approche recommandée : Envoyer les événements via la configuration de tracking existante

Nous recommandons généralement d'envoyer des événements personnalisés à GA4 en utilisant la même méthode que celle que tu utilises déjà pour suivre tes événements, c'est-à-dire via ta configuration de tracking 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 le DataLayer et un tag d'événement GA4 correspondant).
• GA4 est-il intégré directement au site web ? (sans GTM), les événements personnalisés sont envoyés de la même manière directe.

Cela garantit que ton tracking reste cohérent et peut être maintenu à un seul endroit central. La solution de suivi des clics décrite ci-dessous, qui utilise la fonctionnalité « Add JS », est conçue comme un complément si tu souhaites mesurer les clics sur des éléments individuels 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 des éléments nouvellement créés dans ta variante, tu dois d'abord définir un sélecteur unique pour chaque élément. Les ID sont particulièrement adaptés pour cela.

Un sélecteur unique est par exemple : #my-btn

Pour adapter le code JavaScript afin de suivre les clics sur ton nouvel élément, tu dois d'abord remplacer le placeholder #my-btn à la ligne 3 du code par le sélecteur réel de ton élément. Tu peux utiliser la fonction « Add JS » pour cela. Suis ces instructions :

1. Ouvrir l'éditeur JavaScript dans Varify : Ouvre la fenêtre dans l'éditeur pour insérer du JavaScript. Tu trouveras le symbole de code en haut à droite.
2. Insérer le code : Colle le code JavaScript fourni dans l'éditeur.
3. Remplacer le sélecteur : Trouve le placeholder à la ligne 3 #my-btn. Remplace #my-btn par le sélecteur réel de ton nouvel élément. Cela peut être un ID (par exemple 1TP6New-button-id) ou une classe (par exemple .new-button-class).
4. 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. Un moyen 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 sur des é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 tracking spéciale. Voici un guide personnalisé :

1. Créer une nouvelle expérience : Créez une expérience destinée exclusivement au suivi d'éléments.
2. Ajouter le code JavaScript : Utilisez la fonction « Add JS » pour ajouter le code JavaScript requis à votre variante. À la ligne 3 du code, remplacez le placeholder .btn-primary par le sélecteur CSS correct de votre élément.
3. Définir le ciblage de page : Définissez le ciblage de page de l'expérience de sorte qu'il soit réglé sur la page d'accueil avec un type de correspondance « Contains ». Cela garantit que toutes les pages de votre site web sont incluses, de sorte que l'expérience soit active sur l'ensemble du site.
4. Ajuster la répartition du trafic : La répartition du trafic doit être réglée à 100 % pour la variante afin de garantir que tous les utilisateurs reçoivent le script de suivi.
5. Suivre les événements de clic : Les clics sur l'élément spécifié sont envoyés en tant qu'événement à Google Analytics 4 (GA4) pour 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 des paramètres d'événement dans GTM

Pour pouvoir analyser ultérieurement l'événement en tant que métrique personnalisée, il doit envoyer un paramètre d'événement à GA4. Dans les snippets d'événement de clic ci-dessus, ce paramètre est déjà inclus (VarifyClickCount).

Si vous suivez un événement personnalisé via GTM et qu'il n'envoie pas encore de paramètres, ajoutez-les directement à l'événement :

1. Ouvrez l'onglet « Event Parameters ».
2. Cliquez sur le bouton bleu « Add Parameter ».
3. Dans le champ « Event Parameters », saisissez le nom du paramètre.
4. Indiquez en dessous, dans Value, le nombre 1 un (ou, dans le cas d'événements de revenu, la valeur de revenu dynamique).
5. Publiez les modifications dans le conteneur GTM.

Étape 2 : Configurer un événement personnalisé dans GA4

Une fois que tes événements sont envoyés correctement à GA4, ils y apparaîtront automatiquement, sans que tu aies besoin de les créer manuellement. (Cela peut prendre jusqu'à 24 heures avant qu'ils apparaissent dans les rapports.)

Cela conclut la partie envoi — continuons maintenant dans GA4. En fonction de ton cas d'usage, configure ton événement comme suit :

• Chiffres de revenus : sélectionne-les comme Key Event pour qu'ils apparaissent sous « Key Events » dans le Varify Result Report.
• Métriques standard (numériques) : crée-les en plus comme Custom Metric afin de pouvoir les analyser dans les rapports exploratoires.

Marquer les événements personnalisés de revenu comme événements clés

Pour qu'un événement personnalisé de revenu apparaisse sous « Key Events » dans le Varify Result Report 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 clic purs), cette étape n'est pas nécessaire : ils sont de toute façon disponibles comme objectifs.

1. Dans GA4, va dans Administration → Events (ou Key Events).
2. Trouve ton Revenue Custom Event et active le bouton « Mark as Key Event ».
3. Si l'événement n'a pas encore été enregistré, clique sur « New Key Event » et saisis 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 tu veux analyser la valeur numérique d'un événement (par exemple, un nombre ou une quantité) dans des rapports exploratoires, crée une métrique personnalisée dans GA4. Cela nécessite que l'événement inclue le paramètre correspondant (voir l'étape 1).

1. Dans GA4, va dans Admin → Custom Definitions → Custom Metrics → Create Custom Metric.
2. Saisis un nom descriptif et, éventuellement, une courte description.
3. Sélectionne le paramètre d'événement dans le menu déroulant ou ajoute-le manuellement. Veille à utiliser l'orthographe correcte.
4. Laisse le champ « Unit of Measurement » généralement réglé sur « Standard » (pour le chiffre d'affaires : l'unité monétaire appropriée) et enregistre la métrique personnalisée.

Il faut compter 24 à 48 heures avant que les données soient disponibles dans les rapports d'exploration. Note également que les données d'événement ne sont pas assignées rétroactivement à une métrique personnalisée. Une métrique personnalisée commence à collecter des données seulement après sa création.

Remarque : Varify décline toute responsabilité quant au fonctionnement du code et des informations.
Il est de la responsabilité de l'utilisateur de tester le code minutieusement et de l'implémenter correctement.