Name: Flowsery
Author: Flowsery

Le suivi d'evenements personnalises ouvre des possibilites puissantes au-dela des simples pages vues. Ce guide couvre deux cas d'utilisation pratiques : mesurer combien de temps les visiteurs passent reellement a lire vos articles de blog, et suivre de maniere fiable les inscriptions utilisateur depuis le serveur.

Mesurer le temps de lecture des articles de blog

Les analyses standard de pages vues vous disent qu'une personne a visite un article, mais pas si elle l'a reellement lu. En combinant le suivi du defilement avec le calcul du temps passe sur la page, vous pouvez determiner le veritable lectorat.

Definir "entierement lu"

Un article est considere comme entierement lu lorsque deux conditions sont remplies : le visiteur a passe suffisamment de temps sur la page pour avoir plausiblement lu le contenu, et il a fait defiler jusqu'en bas. Le temps de lecture minimum est derive du nombre de mots de l'article, en utilisant une vitesse de lecture moyenne d'environ 200-220 mots par minute.

Etapes d'implementation

1. Ajouter le script de suivi des evenements

Incluez le snippet de suivi d'evenements de votre plateforme d'analyse dans le <head> de vos pages. Si vous utilisez un generateur de site statique comme Hugo, cela va dans votre template de base.

2. Attacher les metadonnees de l'article

Sur chaque page d'article, incluez un petit element script qui porte le titre de l'article et le nombre de mots comme attributs de donnees :

<script type="text/javascript" src="/js/article.js"
    id="article"
    data-title="Titre de votre article"
    data-words="1200"></script>

3. Ecrire la logique de suivi

Le script doit faire trois choses :

D'abord, calculer la position de defilement pour detecter quand le lecteur atteint le bas de l'article :

function getScrollPercent() {
    const h = document.documentElement,
          b = document.body,
          st = 'scrollTop',
          sh = 'scrollHeight';
    return Math.floor((h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100);
}

Ensuite, au chargement de la page, lire le nombre de mots et le titre depuis les attributs de donnees et calculer le temps de lecture minimum :

window.addEventListener("DOMContentLoaded", () => {
    const script = document.getElementById("article");

    if(script &&
        script.hasAttribute("data-words") &&
        script.hasAttribute("data-title")) {
        const title = script.getAttribute("data-title");
        const minReadingTimeSeconds = Math.floor(
            parseInt(script.getAttribute("data-words")) / 220
        ) * 60;
        const start = new Date().getTime();
        let done = false;

Enfin, ecouter les evenements de defilement. Lorsque le visiteur depasse 85 % de la page et a passe au moins le temps de lecture minimum, declencher un evenement personnalise :

        window.addEventListener("scroll", () => {
            if(!done && getScrollPercent() > 85) {
                let readSeconds = Math.floor(
                    (new Date().getTime() - start) / 1000
                );
                if(readSeconds >= minReadingTimeSeconds) {
                    done = true;
                    // Envoyer l'evenement personnalise avec la duree et le titre
                    trackEvent("Read article", {
                        duration: readSeconds,
                        meta: { title }
                    });
                }
            }
        });
    }
});

4. Consulter les donnees

Une fois les evenements en place, ils apparaissent dans votre tableau de bord analytique. Ouvrez la vue detaillee des evenements pour voir quels articles sont lus et le temps moyen que les visiteurs passent sur chacun.

Suivi des inscriptions utilisateur depuis le backend

Les objectifs de conversion front-end qui se declenchent lorsqu'une personne visite une page de confirmation ne sont pas fiables puisque n'importe qui peut naviguer directement vers cette URL. Une approche plus precise consiste a envoyer un evenement personnalise depuis votre serveur uniquement apres qu'une inscription a ete effectivement confirmee.

Flowsery

—

Des analyses orientées revenus pour votre site web

Tableau de bord en temps réel

Suivi des objectifs

Suivi sans cookies

Voici un exemple en Go :

func SignUp(w http.ResponseWriter, r *http.Request) {
    // Valider le captcha, creer le compte utilisateur, etc.
    if err != nil {
        // Gerer l'erreur
    } else {
        go func() {
            if err := analyticsClient.Event("Registration", 0, nil, r); err != nil {
                // Journaliser l'erreur
            }
        }()
    }
    // Afficher la page de reponse
}

En declenchant l'evenement uniquement apres une confirmation de compte reussie, vous obtenez un decompte fiable des vraies inscriptions plutot que des chiffres gonfles par des visites de page accidentelles.

Point cle

Les evenements personnalises vous permettent de mesurer virtuellement tout ce qui compte pour votre entreprise. Veillez simplement a ne pas attacher d'informations personnellement identifiables aux evenements, car cela compromettrait les avantages en matiere de confidentialite de l'analyse sans cookies.