How to use htmx partial renders with client-side analytics?

[ribtoks]

Has anyone managed to get a working client-side setup? (Plausible or Umami)

How to correctly hook into htmx lifecycle and report "views/screens"?

[jose-dias-fernandes]

The important distinction is whether an htmx swap represents a real navigation or only updates a fragment.

For hx-push-url / hx-replace-url navigation, load the analytics script once in the persistent <head>, not inside content that htmx swaps. Current Plausible and Umami trackers both monitor the browser History API, so they normally detect htmx's pushState/replaceState URL changes automatically. Start with that setup and check the network requests before adding manual listeners; otherwise it is easy to count every navigation twice.

If you use an older/self-hosted tracker build or deliberately disable automatic pageviews, htmx exposes precise history events:

function trackHtmxPageview() {
  // The URL has already been updated when these events fire.
  if (window.plausible) plausible('pageview');
  if (window.umami) umami.track();
}

document.body.addEventListener('htmx:pushedIntoHistory', trackHtmxPageview);
document.body.addEventListener('htmx:replacedInHistory', trackHtmxPageview);

Use this manual version only with automatic pageviews disabled:

• Plausible: initialize with autoCapturePageviews: false.
• Umami: add data-auto-pageview="false" to the tracker script.

I would not attach a pageview handler globally to htmx:afterSwap: that event also fires for validation messages, tables, modals, pagination fragments, etc. It will inflate screen counts. If a particular swap is a meaningful screen without a URL change, scope htmx:afterSettle to that target and record a custom event instead:

document.body.addEventListener('htmx:afterSettle', event => {
  if (event.detail.target.id === 'report-panel') {
    plausible?.('Report Viewed');
    umami?.track('report-viewed');
  }
});

So the practical setup is:

1. tracker script in the persistent layout;
2. URL-changing htmx navigation via hx-push-url or hx-replace-url;
3. rely on automatic History API tracking, or disable it and use the two htmx history events above;
4. use custom events, not pageviews, for ordinary partial swaps.

References: htmx history events, Plausible manual pageviews, and Umami SPA tracking.