Suivez combien de personnes lisent vos articles, en utilisant Plausible.io, Vue.js et Azure Functions

Dans l'article précédent, vous avez appris à configurer Plausible, une solution d'analyse respectueuse de la confidentialité et abordable. Dans cet article, vous apprendrez à utiliser Plausible pour collecter le comportement de lecture de vos visiteurs et afficher en haut de chacun de vos articles combien de personnes l'ont lu.

Collecter des informations sur vos visiteurs est excellent, mais avoir plus d'informations sur combien d'entre eux lisent réellement vos articles est encore mieux. Pour ce faire, nous devons définir la progression que votre visiteur fait en quelques étapes. Nous transformerons plus tard ces étapes en objectifs, ce qui vous fournira des informations détaillées sur la performance de vos articles.

Suivre le comportement de lecture

Nous utiliserons un "temps de lecture" inspiré de Medium.com. Medium.com calcule le temps de lecture en fonction de la vitesse de lecture moyenne d'un adulte (qui est d'environ 265 mots par minute) et divise le nombre total de mots par ce nombre. Donc si votre article contient 2650 mots, il faudra environ 10 minutes à vos visiteurs pour le lire. Lors de la mesure de la progression, nous définirons quelques étapes pour indiquer la progression, chacune représentant un pourcentage du temps de lecture total:

• ouvert (0%): pas encore commencé à lire
• jeté un coup d'œil (10%): juste fait défiler rapidement l'article
• quart lu (25%): commencé à lire, mais arrêté à un quart
• moitié lu (50%): lu à mi-chemin
• trois-quarts lu (75%): lu entre la moitié ou l'article entier pour les lecteurs rapides
• lu (100%): lu votre article avec une grande attention

Il est également important de garder à l'esprit quelques scénarios.

Scénario 1 => le lecteur est distrait et maintenant votre article est en arrière-plan

C'est facile à atténuer, nous pouvons utiliser un écouteur d'événements pour détecter les changements de visibilité du document et arrêter le chronomètre: document.addEventListener("visibilitychange".

Scénario 2 => le lecteur s'éloigne de l'ordinateur

C'est un peu plus difficile à détecter, mais une option est de suivre un autre indicateur de 'lecture', qui est le défilement. Donc en plus de la progression du temps, nous suivons également la progression du défilement, et seulement lorsque le temps et le défilement atteignent un certain niveau, nous mettons à jour la progression de lecture à l'état suivant.

Cliquez sur le bouton pour voir comment vous vous en sortez en lisant cette page

Pour suivre la progression de lecture de vos visiteurs, j'ai écrit un composable pratique que vous pouvez consulter ici: useReadProgress.ts

Au fur et à mesure que la lecture progresse et que l'état change, nous mettons à jour Plausible avec des événements personnalisés. Pour ce faire, j'ai écrit un autre composable, que vous pouvez consulter ici: useReadProgressTracking.ts. Il convertit les pourcentages de useReadProgress en objectifs de suivi définis et envoie des événements de suivi à Plausible.

Créer des objectifs pour chaque étape dans Plausible

Lorsque vous définissez les étapes ci-dessus comme objectifs dans Plausible, vous pouvez voir un bel entonnoir pour chacun de vos articles et jusqu'où vos visiteurs vont avec eux.

Pour configurer des objectifs dans Plausible, allez dans Paramètres du site > Objectifs et ajoutez un objectif pour chacune des étapes (ouvert, jeté un coup d'œil, etc).

Lire les statistiques de votre page depuis Plausible, en utilisant une fonction Azure

Plausible fournit une API Stats que vous pouvez interroger pour obtenir par exemple les statistiques de vos objectifs créés. Voir l'exemple de code suivant, qui montre comment interroger l'API.

public async Task<PageReads> GetPageReads(string url)
{
    using var scope = _logger.BeginScope(new Dictionary<string, object> { { "url", url } });

    var uri = new Uri(url);
    var domain = uri.Host;
    var relativeUrl = uri.PathAndQuery;

    var payload = new
    {
        site_id = domain,
        metrics = new[] { "visitors" }, // Obtenez le nombre unique d'événements de lecture
        date_range = "all",
        filters = new[]{
            new List<object> { "contains", "event:page", new[] { relativeUrl } },
            new List<object> { "is", "event:goal", new[] {"read", "three-quarter-read", "half-read", "quarter-read", "peeked", "opened"} },
        },
        dimensions = new[] { "event:goal" },
    };

    var jsonPayload = JsonSerializer.Serialize(payload);
    _logger.LogInformation("Payload: {jsonPayload}", jsonPayload);

    var response = await SendRequest(jsonPayload);
    var responseContent = await response.Content.ReadAsStringAsync();
    _logger.LogInformation("Response: {responseContent}", responseContent);

    var queryResult = JsonSerializer.Deserialize<QueryResult>(responseContent);
    if (queryResult == null)
    {
        throw new InvalidOperationException("Failed to deserialize the response content.");
    }

    var resultsDict = queryResult.Results.ToDictionary(x => x.Dimensions.First(), x => x.Metrics.First());

    return new PageReads
    {
        Read = resultsDict.GetValueOrDefault("read"),
        ThreeQuarterRead = resultsDict.GetValueOrDefault("three-quarter-read"),
        HalfRead = resultsDict.GetValueOrDefault("half-read"),
        QuarterRead = resultsDict.GetValueOrDefault("quarter-read"),
        Peeked = resultsDict.GetValueOrDefault("peeked"),
        Opened = resultsDict.GetValueOrDefault("opened"),
    };
}

{
  "site_id": "{{site_id}}",
  "metrics": ["visitors"],
  "date_range": "all",
  "filters": [
    ["contains", "event:page", ["{{relative_url}}"]],
    [
      "is",
      "event:goal",
      [
        "read",
        "three-quarter-read",
        "half-read",
        "quarter-read",
        "peeked",
        "opened"
      ]
    ]
  ],
  "dimensions": ["event:goal"]
}

{
  "results": [
    { "metrics": [68], "dimensions": ["opened"] },
    { "metrics": [45], "dimensions": ["peeked"] },
    { "metrics": [40], "dimensions": ["quarter-read"] },
    { "metrics": [31], "dimensions": ["half-read"] },
    { "metrics": [21], "dimensions": ["three-quarter-read"] },
    { "metrics": [14], "dimensions": ["read"] }
  ],
  "meta": {},
  "query": {
    "site_id": "{{site_id}}",
    "metrics": ["visitors"],
    "date_range": ["2025-01-20T00:00:00+01:00", "2025-08-02T23:59:59+02:00"],
    "filters": [
      ["contains", "event:page", ["{{relative_url}}"]],
      [
        "is",
        "event:goal",
        [
          "read",
          "three-quarter-read",
          "half-read",
          "quarter-read",
          "peeked",
          "opened"
        ]
      ]
    ],
    "dimensions": ["event:goal"],
    "order_by": [["visitors", "desc"]],
    "include": {},
    "pagination": { "offset": 0, "limit": 10000 }
  }
}

Voir l'implémentation complète ici PlausibleService.cs et le projet complet ici Bach.Software.API

Conclusion

Comprendre à quel point votre public s'engage avec votre contenu est beaucoup plus significatif que simplement compter les pages vues. Avec juste quelques lignes de code et la puissance de Plausible, vous pouvez maintenant suivre avec précision si vos lecteurs parcourent rapidement ou plongent vraiment. En combinant le comportement de défilement et le temps de lecture, vous pouvez affiner votre stratégie éditoriale et identifier ce qui résonne le plus. Et parce que c'est sans cookie, il s'aligne avec les normes de confidentialité modernes sans sacrifier les informations.

Que vous soyez un développeur solo, un blogueur ou que vous gériez une plus grande plateforme de contenu, cette approche vous donne des informations approfondies sans le poids d'un suivi invasif. Essayez-le sur votre prochain article, vous pourriez être surpris par ce que vos lecteurs font réellement.