@harshankur/viewcounter 3.2.0 → 3.3.0

package/.env.example

@@ -115,7 +115,9 @@ PORT=3030
 LOG_LEVEL=info
 
 # Rate limiting, applied per client IP across all endpoints. This is the
-# single-abuser backstop.
+# single-abuser backstop. Engagement reports (/engage, two a minute from each
+# page being read) have a separate budget of the same size, here and per app,
+# so they never use up the one page views depend on.
 RATE_LIMIT_WINDOW_MS=60000
 RATE_LIMIT_MAX=100
 

package/README.md

@@ -3,7 +3,7 @@
 [![Documentation](https://img.shields.io/badge/docs-viewcounter.harshankur.com-blueviolet)](https://viewcounter.harshankur.com)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
 [![Test Suite](https://github.com/harshankur/viewcounter/actions/workflows/test.yml/badge.svg)](https://github.com/harshankur/viewcounter/actions/workflows/test.yml)
-[![Tests](https://img.shields.io/badge/tests-1098%20passing-success)](TEST_REPORT.md)
+[![Tests](https://img.shields.io/badge/tests-1109%20passing-success)](TEST_REPORT.md)
 [![npm](https://img.shields.io/npm/v/@harshankur/viewcounter?logo=npm)](https://www.npmjs.com/package/@harshankur/viewcounter)
 [![provenance](https://img.shields.io/badge/provenance-signed-brightgreen?logo=github)](https://www.npmjs.com/package/@harshankur/viewcounter#provenance)
 
@@ -220,8 +220,9 @@ every app together under **All apps**; the choice follows you between them.
     bounce rate, visit duration, pages per visit, time on page, scroll depth),
     each against the period before, with a sparkline; choose one to chart it
     over time, or read every number per period as a table;
-  - **Right now**: visitors in the last few minutes, views per minute over
-    the last half hour, and the pages open, refreshed while you look;
+  - **Right now**: visitors in the last few minutes (by a new view, or by the
+    tracker's report from a page still being read), views per minute over the
+    last half hour, and the pages open, refreshed while you look;
   - where visits come from (channels, referrers, referring pages, and every
     campaign tag), pages (top, entry with bounce rate, exit, titles, sites),
     locations (a world map, countries, regions, cities, languages), devices,
@@ -392,7 +393,10 @@ Content-Type: text/plain   # or application/json
 {"appId": "blog", "id": "<the id /registerView returned>", "ms": 42000, "scroll": 80}
 ```
 How long the page was visible (`ms`, up to 6 hours) and how much of it had been
-on screen (`scroll`, 0 to 100). A later report can only raise either. A report
+on screen (`scroll`, 0 to 100). A later report can only raise either. Each
+report also marks the view as seen just now, which keeps its visitor in the
+admin's **Right now** for the next few minutes; the tracker script sends one
+every half minute while the page is being read. A report
 for a view that is unknown, trashed, or older than a day changes nothing and is
 counted in the tracking log as refused. `text/plain` is accepted so
 `navigator.sendBeacon` can deliver it as the page closes, without a CORS
@@ -631,7 +635,7 @@ returned by any API.
 | **Device Size** | `deviceSize` | small, medium, large | Layout decisions |
 | **Browser, OS, and versions** | User-Agent, parsed in memory | Names and versions, such as Chrome 140 on macOS 15 | Compatibility |
 | **Device Type** | User-Agent | desktop, mobile, tablet, tv, console, wearable | Compatibility |
-| **Time on page, Scroll depth** | The tracker script's `/engage` report | Milliseconds visible (at most 6 hours); percent of the page seen | Whether pages are read |
+| **Time on page, Scroll depth, Last seen** | The tracker script's `/engage` report | Milliseconds visible (at most 6 hours); percent of the page seen; when the page last reported | Whether pages are read |
 | **Event Type, Event Data** | `/event` | Type name; JSON up to 4 kB, as your site sends it | Custom events |
 | **Session ID** | `sessionId` (optional) | As your site sends it | Your own grouping; the tracker never sends one |
 
@@ -821,6 +825,15 @@ Two independent limits apply to writes:
   everyone else on the instance depends on. Keyed on `appId` alone, so it cannot
   be bypassed by rotating addresses. Set `0` to disable for single-tenant use.
 
+Each limit is applied twice, as two separate budgets of that size: one for
+engagement reports (`/engage`) and one for everything else. A page being read
+reports every half minute, so each open, active tab costs two reports a minute;
+on a shared budget, the readers behind one office address could have used it up
+and had their page views refused. Apart, reports can only crowd out other
+reports. With the defaults that is room for about 50 readers at once per
+address and 500 per app; raise the limits if you expect more, or a reader's
+time on page is only updated when their page is hidden or left.
+
 ### What is still yours to build
 
 Tenancy here is data isolation and quota, not a billing system. There is no
@@ -943,7 +956,8 @@ One tag, anywhere in the page:
 It records a view of each page, including page changes in single-page apps
 (`history.pushState`, `replaceState`, and the back button, each referred by
 the page it left); how long each page was visible and how far it was
-scrolled; clicks on links to other sites (the other site's hostname only);
+scrolled, reported when the page is hidden or left and every half minute
+while it is being read; clicks on links to other sites (the other site's hostname only);
 clicks on downloads (the file name only); and the landing URL's campaign tags.
 It stores nothing on the device and sends no identifier, and it skips
 automated browsers.
@@ -953,6 +967,8 @@ automated browsers.
 | `data-app` | required | The app ID the views belong to |
 | `data-hosts` | every host | Only track on these hostnames, comma-separated, so development servers and previews stay out of the data |
 | `data-spa` | `true` | Treat history changes as page views |
+| `data-hash` | none | Fragment prefixes, comma-separated (`#docs/,#spec/`), that count as their own page, for pages that route by fragment. Any other fragment stays part of the same page. A matching fragment is stored whole as part of the page, so list only prefixes whose fragments carry nothing private. As a referrer, such a page is its path alone |
+| `data-heartbeat` | `true` | Report time on page every half minute while the page is visible and in use, not only when it is hidden or left. It keeps the visitor in the admin's **Right now** while they read one page, and saves the time of a tab the browser closes without warning. It stops after half an hour without any input |
 | `data-outbound` | `true` | Record clicks on links to other sites, as `outbound` events |
 | `data-downloads` | `true` | Record clicks on downloads (pdf, zip, dmg, docx, and so on), as `download` events |
 | `data-respect-dnt` | `false` | Send nothing when the browser's Do Not Track is on |
@@ -1030,10 +1046,10 @@ npm run test:watch
 # Run tests and persist database for inspection
 npm run test:persist
 
-# Run tests for CI/CD (no report generation)
+# The fast gate CI runs: lint and Jest with coverage, no browser, no report
 npm run test:ci
 
-# Run only the admin UI tests in a real browser (Playwright)
+# Run only the admin UI and tracker tests in a real browser (Playwright)
 npx playwright install chromium   # once
 npm run test:ui
 ```
@@ -1041,6 +1057,12 @@ npm run test:ui
 `npm test` includes the Playwright suite, so run `npx playwright install
 chromium` once before the first run.
 
+CI runs everything except the browser tests: lint, Jest with its coverage
+floor, the dependency audit, the tarball check, and the end-to-end run against
+a real MySQL. It does not download a browser, to save CI time, so the browser
+tests are a local step: run `npm run test:ui` whenever you change anything
+under `admin/` or `tracker/`, and the full `npm test` before a release.
+
 ### Test Database
 
 **Automatic Management:**

package/constants.js

@@ -97,7 +97,7 @@ const DATABASE = {
     QUERY_TIMEOUT_MS: 5_000,
     CONNECT_TIMEOUT_MS: 10_000,
     DEFAULT_PORT: 3306,
-    SCHEMA_VERSION: 'schema_v5',
+    SCHEMA_VERSION: 'schema_v6',
     /** Rows given a public_id per statement when backfilling an old table. */
     BACKFILL_BATCH_SIZE: 500,
 };

package/db/DatabaseManager.js

@@ -548,9 +548,10 @@ class DatabaseManager {
     /**
      * Record how long a view's page was visible and how far it was scrolled.
      *
-     * A page reports this when it is hidden or left, possibly more than once
-     * (hidden, shown again, then left), each time with its running total, so
-     * the larger value always wins. Only a live view from the last
+     * A page reports this when it is hidden or left, and every half minute
+     * while it is being read, each time with its running total, so the larger
+     * value always wins. Each report also marks the view as seen just now,
+     * which is what keeps its visitor in "right now" between page views. Only a live view from the last
      * TRACKING.ENGAGE_WINDOW_HOURS is updated: an old or trashed view keeps
      * what it had.
      *
@@ -563,7 +564,8 @@ class DatabaseManager {
         const [result] = await this.pool.query(
             `UPDATE \`${appId}\`
              SET engaged_ms = GREATEST(COALESCE(engaged_ms, 0), ?),
-                 scroll_depth = GREATEST(COALESCE(scroll_depth, 0), ?)
+                 scroll_depth = GREATEST(COALESCE(scroll_depth, 0), ?),
+                 last_seen_at = NOW()
              WHERE public_id = ? AND ${LIVE_ROW}
                AND timestamp > DATE_SUB(NOW(), INTERVAL ? HOUR)`,
             [engagedMs, scrollDepth, viewId, TRACKING.ENGAGE_WINDOW_HOURS]

package/db/adminSchema.js

@@ -42,7 +42,9 @@ const ADMIN_COLUMNS = [
  * Columns 3.2 added for richer, still identifier-free analysis: which of the
  * app's sites and which language, the campaign tags of the landing URL, an
  * optional region and city (only with a city database configured), and how
- * long the page was visible and how far it was scrolled.
+ * long the page was visible and how far it was scrolled. 3.3 added
+ * `last_seen_at`: when the page last reported its engagement, which is how
+ * "right now" still counts a visitor who has been reading one page for a while.
  */
 const TRACKING_COLUMNS = [
     { name: 'hostname', ddl: `VARCHAR(${FIELD_MAX_LENGTH.HOSTNAME}) DEFAULT NULL` },
@@ -56,6 +58,7 @@ const TRACKING_COLUMNS = [
     { name: 'city', ddl: `VARCHAR(${FIELD_MAX_LENGTH.CITY}) DEFAULT NULL` },
     { name: 'engaged_ms', ddl: 'INT UNSIGNED DEFAULT NULL' },
     { name: 'scroll_depth', ddl: 'TINYINT UNSIGNED DEFAULT NULL' },
+    { name: 'last_seen_at', ddl: 'DATETIME DEFAULT NULL' },
 ];
 
 /** Indexes the admin columns need, keyed by index name. */
@@ -63,6 +66,7 @@ const ADMIN_INDEXES = {
     uq_public_id: 'UNIQUE INDEX `uq_public_id` (`public_id`)',
     idx_deleted_at: 'INDEX `idx_deleted_at` (`deleted_at`)',
     idx_admin_modified_at: 'INDEX `idx_admin_modified_at` (`admin_modified_at`)',
+    idx_last_seen_at: 'INDEX `idx_last_seen_at` (`last_seen_at`)',
 };
 
 /**

package/db/analysis.js

@@ -436,12 +436,17 @@ function tallyEventProperties(rows) {
  * @param {string[]} appIds
  */
 async function runRealtime(pool, table, appIds) {
-    const branches = appIds.map((appId) => `SELECT ? AS app_id, visitor_hash, page_path, event_type, timestamp
+    const within = (column, minutes) => `${column} >= DATE_SUB(NOW(), INTERVAL ${minutes} MINUTE)`;
+    // A visitor is here now when a view of theirs was recorded, or last
+    // reported its engagement, in the last few minutes: someone reading one
+    // page for a quarter of an hour sends no new view, only those reports.
+    const recent = `(${within('timestamp', ANALYSIS.REALTIME_VISITOR_MINUTES)} OR ${within('last_seen_at', ANALYSIS.REALTIME_VISITOR_MINUTES)})`;
+    const charted = within('timestamp', ANALYSIS.REALTIME_CHART_MINUTES);
+    const branches = appIds.map((appId) => `SELECT ? AS app_id, visitor_hash, page_path, event_type, timestamp, last_seen_at
         FROM ${table(appId)}
-        WHERE deleted_at IS NULL AND timestamp >= DATE_SUB(NOW(), INTERVAL ${ANALYSIS.REALTIME_CHART_MINUTES} MINUTE)`);
+        WHERE deleted_at IS NULL AND (${charted} OR ${within('last_seen_at', ANALYSIS.REALTIME_VISITOR_MINUTES)})`);
     const cte = `WITH v AS (${branches.join(' UNION ALL ')})`;
     const params = [...appIds];
-    const recent = `timestamp >= DATE_SUB(NOW(), INTERVAL ${ANALYSIS.REALTIME_VISITOR_MINUTES} MINUTE)`;
 
     const [[summary = {}]] = await pool.query(`${cte}
         SELECT COUNT(DISTINCT CASE WHEN ${recent} THEN visitor_hash END) AS visitors,
@@ -449,7 +454,7 @@ async function runRealtime(pool, table, appIds) {
         FROM v`, params);
     const [minutes] = await pool.query(`${cte}
         SELECT FLOOR(UNIX_TIMESTAMP(timestamp) / 60) AS minute, COUNT(*) AS views
-        FROM v GROUP BY minute ORDER BY minute`, params);
+        FROM v WHERE ${charted} GROUP BY minute ORDER BY minute`, params);
     const [pages] = await pool.query(`${cte}
         SELECT app_id, page_path AS page, COUNT(DISTINCT visitor_hash) AS visitors
         FROM v WHERE ${recent} AND event_type = ${PAGEVIEW}

package/index.js

@@ -1,14 +1,13 @@
 const express = require('express');
 const cors = require('cors');
 const helmet = require('helmet');
-const rateLimit = require('express-rate-limit');
 
 const { ADMIN, APP_NAME, PAYLOAD_LIMITS, REJECTION_REASON, SERVER } = require('./constants');
 const config = require('./config');
 const DatabaseManager = require('./db/DatabaseManager');
 const logger = require('./utils/logger');
 const { buildCorsOptions, countRefusedPreflights } = require('./middleware/security');
-const { createAnalyticsRouter, trackingSourceFor } = require('./routes/analytics');
+const { createAnalyticsRouter, buildPerIpLimiters, trackingSourceFor } = require('./routes/analytics');
 const { createAdminRouter } = require('./routes/admin');
 const { startRetention } = require('./db/retention');
 const { createDbSessionStore } = require('./db/adminSessionStore');
@@ -79,20 +78,10 @@ function createApp() {
     // endpoint taking a body and its payload is small.
     app.use(express.json({ limit: PAYLOAD_LIMITS.MAX_BODY_BYTES }));
 
-    app.use(rateLimit({
-        windowMs: config.server.rateLimit.windowMs,
-        limit: config.server.rateLimit.max,
-        message: { message: 'Too many requests, please try again later.' },
-        standardHeaders: true,
-        legacyHeaders: false,
-        // A tracking request turned away here is counted in the tracking log
-        // like any other refusal (in memory, written in batches).
-        handler: (req, res, next, options) => {
-            if (trackingSourceFor(req.path)) {
-                router.countRejection(req, REJECTION_REASON.RATE_LIMITED, { detail: 'ip' });
-            }
-            res.status(options.statusCode).json(options.message);
-        },
+    // A tracking request turned away here is counted in the tracking log like
+    // any other refusal (in memory, written in batches).
+    app.use(buildPerIpLimiters(config.server.rateLimit, (req) => {
+        if (trackingSourceFor(req.path)) router.countRejection(req, REJECTION_REASON.RATE_LIMITED, { detail: 'ip' });
     }));
 
     app.use(router);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@harshankur/viewcounter",
   "description": "A middleware backend server that registers views to my db server when requested to register a view from my other projects.",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "main": "index.js",
   "engines": {
     "node": ">=24"

package/routes/analytics.js

@@ -155,6 +155,40 @@ function buildPerAppLimiter(rateLimitConfig, onLimit = () => {}) {
     });
 }
 
+/** Whether a request is an engagement report, the one tracking request a page repeats. */
+const isEngagement = (req) => trackingSourceFor(req.path) === VIEW_LOG_SOURCE.ENGAGE;
+
+/**
+ * The per-IP limiters: one budget for engagement reports, one for everything
+ * else, each of `max` requests per window.
+ *
+ * They are separate because a page being read reports its engagement every
+ * half minute. On one shared budget, a few dozen readers behind one address
+ * (an office, a campus) would use it up with those reports alone, and the page
+ * views of everyone at that address would be refused. Apart, reports can only
+ * ever crowd out other reports.
+ *
+ * @param {{ max: number, windowMs: number }} rateLimitConfig
+ * @param {(req: import('express').Request) => void} [onLimit] called for a refused request
+ * @returns {import('express').RequestHandler[]}
+ */
+function buildPerIpLimiters(rateLimitConfig, onLimit = () => {}) {
+    const { max, windowMs } = rateLimitConfig || {};
+    const limiter = (skip) => rateLimit({
+        windowMs,
+        limit: max,
+        message: { message: 'Too many requests, please try again later.' },
+        standardHeaders: true,
+        legacyHeaders: false,
+        skip,
+        handler: (req, res, next, options) => {
+            onLimit(req);
+            res.status(options.statusCode).json(options.message);
+        },
+    });
+    return [limiter(isEngagement), limiter((req) => !isEngagement(req))];
+}
+
 /**
  * Attach a request id used for correlating a client-visible error with the
  * server-side log line that has the real detail.
@@ -232,6 +266,11 @@ function createAnalyticsRouter({ config, dbManager, isReady = () => true, geo =
     });
     const limitPerApp = buildPerAppLimiter(config.server?.rateLimit,
         (req) => reject(req, REJECTION_REASON.RATE_LIMITED, { detail: 'app' }));
+    // Engagement reports draw on a per-app budget of their own, for the reason
+    // buildPerIpLimiters gives: an app with many readers must not have its
+    // views refused because of the reports those readers' pages send.
+    const limitEngagePerApp = buildPerAppLimiter(config.server?.rateLimit,
+        (req) => reject(req, REJECTION_REASON.RATE_LIMITED, { detail: 'app' }));
     const trackingValidation = handleTrackingValidation(reject);
 
     /** Views from these are counted in the tracking log and never stored. */
@@ -429,7 +468,7 @@ function createAnalyticsRouter({ config, dbManager, isReady = () => true, geo =
     router.post('/engage',
         express.text({ type: () => true, limit: TRACKING.ENGAGE_BODY_BYTES }),
         parseBeaconBody,
-        limitPerApp,
+        limitEngagePerApp,
         requireOrigin,
         validateEngage(config.allowed),
         trackingValidation,
@@ -641,4 +680,4 @@ function createAnalyticsRouter({ config, dbManager, isReady = () => true, geo =
     return router;
 }
 
-module.exports = { createAnalyticsRouter, handleRouteError, logContext, withRequestId, trackingSourceFor };
+module.exports = { createAnalyticsRouter, buildPerIpLimiters, handleRouteError, logContext, withRequestId, trackingSourceFor };

package/tracker/tracker.js

@@ -4,7 +4,8 @@
  *   <script defer src="https://your-server/tracker.js" data-app="blog"></script>
  *
  * Records a view of each page (including page changes in single-page apps),
- * how long it was visible and how far it was scrolled, clicks on links to
+ * how long it was visible and how far it was scrolled (reported when the page
+ * is hidden or left, and every half minute while it is being read), clicks on links to
  * other sites and on downloads, and the campaign tags of the landing URL.
  * The page before is sent as its origin and path only.
  *
@@ -18,6 +19,10 @@
  *                                   only track on these hostnames (keeps dev
  *                                   servers and previews out of the data)
  *   data-spa="false"                do not treat history changes as page views
+ *   data-hash="#docs/,#spec/"       count a URL fragment that starts with one of
+ *                                   these as its own page (hash-routed pages)
+ *   data-heartbeat="false"          report time on page only when the page is
+ *                                   hidden or left, not while it is being read
  *   data-outbound="false"           do not record clicks on links to other sites
  *   data-downloads="false"          do not record clicks on downloads
  *   data-respect-dnt="true"         send nothing when Do Not Track is on
@@ -32,6 +37,7 @@
     const option = (name, fallback) => (script.dataset[name] === undefined ? fallback : script.dataset[name] !== 'false');
     const hosts = (script.dataset.hosts || '').split(',').map((host) => host.trim().toLowerCase()).filter(Boolean);
     if (hosts.length && !hosts.includes(location.hostname.toLowerCase())) return;
+    const hashRoutes = (script.dataset.hash || '').split(',').map((prefix) => prefix.trim()).filter(Boolean);
     if (location.protocol !== 'http:' && location.protocol !== 'https:') return;
     // Automated browsers are not visitors.
     if (navigator.webdriver) return;
@@ -41,6 +47,10 @@
     const UTM = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'];
     const DOWNLOAD = /\.(pdf|zip|gz|tgz|rar|7z|dmg|exe|msi|pkg|deb|rpm|apk|iso|csv|xlsx?|docx?|pptx?|odt|ods|epub|mp3|mp4|mov|avi|wav)$/i;
     const MAX_ENGAGED_MS = 6 * 60 * 60 * 1000;
+    const ENGAGE_WINDOW_MS = 24 * 60 * 60 * 1000;
+    const HEARTBEAT_MS = 30 * 1000;
+    // A tab left open with nobody at it stops reporting after this long without input.
+    const IDLE_MS = 30 * 60 * 1000;
 
     const deviceSize = () => (innerWidth < 768 ? 'small' : innerWidth < 1200 ? 'medium' : 'large');
     /** How much of the page has been on screen, from 0 to 100. */
@@ -59,18 +69,26 @@
         }
     };
 
+    /** The page on screen: its path, and its fragment when that is one of the site's own routes. */
+    const currentPage = () => location.pathname
+        + (hashRoutes.some((prefix) => location.hash.startsWith(prefix)) ? location.hash : '');
+
     let view = null;
     let referrer = document.referrer ? originAndPath(document.referrer) : '';
-    let path = location.pathname;
-
-    /** Tell the server how long the current page was visible and how far it was scrolled. */
-    function reportEngagement() {
-        if (!view || !view.id) return;
-        const ms = Math.min(MAX_ENGAGED_MS, Math.round(view.visibleMs + (view.visibleSince === null ? 0 : performance.now() - view.visibleSince)));
-        if (ms <= view.sentMs && view.scroll <= view.sentScroll) return;
-        view.sentMs = ms;
-        view.sentScroll = view.scroll;
-        const body = JSON.stringify({ appId: app, id: view.id, ms, scroll: view.scroll });
+    let path = currentPage();
+
+    /**
+     * Tell the server how long a page was visible and how far it was scrolled.
+     * `alive` sends it even when neither has grown since the last report: that
+     * is the heartbeat saying the visitor is still there.
+     */
+    function reportEngagement(of = view, alive = false) {
+        if (!of || !of.id) return;
+        const ms = Math.min(MAX_ENGAGED_MS, Math.round(of.visibleMs + (of.visibleSince === null ? 0 : performance.now() - of.visibleSince)));
+        if (!alive && ms <= of.sentMs && of.scroll <= of.sentScroll) return;
+        of.sentMs = ms;
+        of.sentScroll = of.scroll;
+        const body = JSON.stringify({ appId: app, id: of.id, ms, scroll: of.scroll });
         // text/plain needs no CORS preflight, so the beacon survives the page closing.
         if (!(navigator.sendBeacon && navigator.sendBeacon(`${base}engage`, new Blob([body], { type: 'text/plain' })))) {
             fetch(`${base}engage`, { method: 'POST', body, keepalive: true, credentials: 'omit', headers: { 'Content-Type': 'text/plain' } })
@@ -79,11 +97,16 @@
     }
 
     function pageview() {
-        reportEngagement();
+        // The page being left stops counting here, and reports what it has.
+        if (view) {
+            if (view.visibleSince !== null) view.visibleMs += performance.now() - view.visibleSince;
+            view.visibleSince = null;
+            reportEngagement();
+        }
         const params = new URLSearchParams({
             appId: app,
             deviceSize: deviceSize(),
-            page: location.pathname.slice(0, 500),
+            page: currentPage().slice(0, 500),
             title: document.title.slice(0, 200),
             referrer: referrer.slice(0, 500),
         });
@@ -97,6 +120,7 @@
 
         const current = {
             id: null,
+            startedAt: Date.now(),
             visibleMs: 0,
             visibleSince: document.visibilityState === 'visible' ? performance.now() : null,
             scroll: seen(),
@@ -106,7 +130,12 @@
         view = current;
         fetch(`${base}registerView?${params}`, { keepalive: true, credentials: 'omit', referrerPolicy: 'no-referrer' })
             .then((response) => (response.ok ? response.json() : null))
-            .then((result) => { if (result && result.id) current.id = result.id; })
+            .then((result) => {
+                if (!result || !result.id) return;
+                current.id = result.id;
+                // Left before the server answered: its report could not go then, so it goes now.
+                if (view !== current) reportEngagement(current);
+            })
             .catch(() => {});
     }
 
@@ -122,7 +151,7 @@
                 appId: app,
                 eventType: eventType.slice(0, 50),
                 eventData: eventData && typeof eventData === 'object' ? eventData : undefined,
-                page: location.pathname.slice(0, 500),
+                page: currentPage().slice(0, 500),
                 title: document.title.slice(0, 200),
             }),
         }).catch(() => {});
@@ -131,9 +160,10 @@
     // A page change in a single-page app is a new page view, with the page it
     // came from as its referrer (which the server files as internal).
     function navigated() {
-        if (location.pathname === path) return;
-        referrer = `${location.origin}${path}`;
-        path = location.pathname;
+        if (currentPage() === path) return;
+        // Like every referrer, without the fragment: the server keeps an origin and a path.
+        referrer = `${location.origin}${path.split('#')[0]}`;
+        path = currentPage();
         pageview();
     }
     if (option('spa', true)) {
@@ -147,6 +177,8 @@
         }
         addEventListener('popstate', navigated);
     }
+    // Asked for by name, so it does not wait on data-spa.
+    if (hashRoutes.length) addEventListener('hashchange', navigated);
 
     let scrollQueued = false;
     addEventListener('scroll', () => {
@@ -168,7 +200,24 @@
             view.visibleSince = performance.now();
         }
     });
-    addEventListener('pagehide', reportEngagement);
+    addEventListener('pagehide', () => reportEngagement());
+
+    // While the page is being read, report as it goes: the server then knows the
+    // visitor is still there, and a tab the browser kills without warning (common
+    // on phones) loses half a minute of its time at most, not all of it.
+    if (option('heartbeat', true)) {
+        let lastInput = performance.now();
+        const active = () => { lastInput = performance.now(); };
+        for (const type of ['pointerdown', 'pointermove', 'keydown', 'scroll', 'touchstart']) {
+            addEventListener(type, active, { passive: true, capture: true });
+        }
+        setInterval(() => {
+            if (!view || document.visibilityState !== 'visible' || performance.now() - lastInput > IDLE_MS) return;
+            // The server takes reports for a view for a day. A page open longer says no more.
+            if (Date.now() - view.startedAt > ENGAGE_WINDOW_MS) return;
+            reportEngagement(view, true);
+        }, HEARTBEAT_MS);
+    }
 
     // Links out and downloads. Only the other site's hostname, or the file's
     // name, is recorded: never the whole URL, which can carry personal data.