Verfolgen Sie, wie viele Menschen Ihre Artikel lesen, mit Plausible.io, Vue.js und Azure Functions

Im vorherigen Artikel haben Sie gelernt, wie Sie Plausible einrichten, eine datenschutzfreundliche und erschwingliche Analytics-Lösung. In diesem Artikel lernen Sie, wie Sie mit Plausible das Leseverhalten Ihrer Besucher erfassen und am Anfang jedes Ihrer Artikel anzeigen können, wie viele Menschen ihn gelesen haben.

Informationen über Ihre Besucher zu sammeln ist großartig, aber noch mehr Einblick darüber zu haben, wie viele von ihnen Ihre Artikel tatsächlich lesen, ist noch besser. Dazu müssen wir den Fortschritt Ihres Besuchers in einigen Stufen definieren. Diese Stufen werden wir später in Ziele umwandeln, die Ihnen detaillierte Informationen darüber liefern, wie gut Ihre Artikel abschneiden.

Leseverhalten verfolgen

Wir verwenden eine von Medium.com inspirierte "Lesezeit". Medium.com berechnet die Lesezeit basierend auf der durchschnittlichen Lesegeschwindigkeit eines Erwachsenen (die etwa 265 Wörter pro Minute beträgt) und teilt die Gesamtwortzahl durch diese Zahl. Wenn Ihr Artikel also 2650 Wörter enthält, werden Ihre Besucher etwa 10 Minuten zum Lesen benötigen. Bei der Messung des Fortschritts definieren wir einige Schritte, um den Fortschritt anzuzeigen, wobei jeder einen Prozentsatz der gesamten Lesezeit darstellt:

• opened (0%): noch nicht mit dem Lesen begonnen
• peeked (10%): nur schnell durch den Artikel gescrollt
• quarter-read (25%): mit dem Lesen begonnen, aber bei einem Viertel aufgehört
• half-read (50%): die Hälfte gelesen
• three-quarter-read (75%): zwischen der Hälfte oder dem ganzen Artikel für schnelle Leser gelesen
• read (100%): Ihren Artikel mit großer Aufmerksamkeit gelesen

Es ist auch wichtig, einige Szenarien im Hinterkopf zu behalten.

Szenario 1 => der Leser wird abgelenkt und Ihr Artikel befindet sich nun im Hintergrund

Dies ist einfach zu verhindern, wir können einen Event-Listener verwenden, um Änderungen der Dokumentsichtbarkeit zu erkennen und den Timer zu stoppen: document.addEventListener("visibilitychange".

Szenario 2 => der Leser geht vom Computer weg

Dies ist etwas schwieriger zu erkennen, aber eine Option besteht darin, einen weiteren Indikator für das "Lesen" zu verfolgen, nämlich das Scrollen. Zusätzlich zum Zeitfortschritt verfolgen wir also auch den Scroll-Fortschritt, und nur wenn sowohl Zeit als auch Scroll ein bestimmtes Niveau erreichen, aktualisieren wir den Lesefortschritt auf den nächsten Zustand.

Klicken Sie auf den Button, um zu sehen, wie Sie beim Lesen dieser Seite abschneiden

Um den Lesefortschritt Ihrer Besucher zu verfolgen, habe ich ein praktisches Composable geschrieben, das Sie hier ansehen können: useReadProgress.ts

Während das Lesen fortschreitet und sich der Zustand ändert, aktualisieren wir Plausible mit benutzerdefinierten Events. Dazu habe ich ein weiteres Composable geschrieben, das Sie hier ansehen können: useReadProgressTracking.ts. Es konvertiert die Prozentsätze von useReadProgress in die definierten Tracking-Ziele und sendet Tracking-Events an Plausible.

Ziele für jeden Schritt in Plausible erstellen

Wenn Sie die oben genannten Schritte als Ziele in Plausible definieren, können Sie einen schönen Trichter für jeden Ihrer Artikel sehen und wie weit Ihre Besucher mit ihnen kommen.

Um Ziele in Plausible einzurichten, gehen Sie zu Site Settings > Goals und fügen Sie ein Ziel für jeden der Schritte hinzu (opened, peeked, etc).

Lesen Ihrer Seitenstatistiken von Plausible mit einer Azure Function

Plausible bietet eine Stats API, die Sie abfragen können, um beispielsweise die Statistiken Ihrer erstellten Ziele zu erhalten. Siehe das folgende Codebeispiel, das zeigt, wie Sie die API abfragen.

public async Task<PageReads> GetPageReads(string url)
{
    // Erstelle einen Logger-Scope mit der 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" }, // Erhalte die eindeutige Anzahl von Lese-Events
        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("Fehler beim Deserialisieren des Antwortinhalts.");
    }

    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 }
  }
}

Sehen Sie die vollständige Implementierung hier PlausibleService.cs und das gesamte Projekt hier Bach.Software.API

Fazit

Zu verstehen, wie tief sich Ihr Publikum mit Ihren Inhalten beschäftigt, ist weitaus bedeutsamer als einfach nur Seitenaufrufe zu zählen. Mit nur wenigen Zeilen Code und der Leistungsfähigkeit von Plausible können Sie nun genau verfolgen, ob Ihre Leser nur überfliegen oder wirklich eintauchen. Indem Sie Scroll-Verhalten und Lesezeit kombinieren, können Sie Ihre redaktionelle Strategie verfeinern und erkennen, was am meisten ankommt. Und da es cookie-los ist, entspricht es modernen Datenschutzstandards, ohne auf Erkenntnisse zu verzichten.

Egal ob Sie ein Solo-Entwickler, ein Blogger oder der Verwalter einer größeren Content-Plattform sind, dieser Ansatz gibt Ihnen tiefe Einblicke ohne die Last invasiven Trackings. Probieren Sie es bei Ihrem nächsten Beitrag aus, Sie könnten überrascht sein, was Ihre Leser wirklich tun.