htmx
Add Rybbit analytics to your htmx app
htmx pages are plain server-rendered HTML, so the snippet goes in the <head> of your base layout next to the htmx script tag, in whichever template your server uses for the full-page response.
Get your tracking snippet
In your Rybbit dashboard, open Site Settings → Tracking Script and copy your snippet. It looks like this:
<script src="https://app.rybbit.io/api/script.js?siteId=YOUR_SITE_ID" defer></script>YOUR_SITE_ID is the numeric ID of your site. If you self-host Rybbit, app.rybbit.io is the domain of your own instance.
Add the snippet to htmx
Open the template that renders the full HTML document (the one that already loads htmx) and paste the snippet inside <head>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My htmx App</title>
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.10/dist/htmx.min.js"></script>
<script src="https://app.rybbit.io/api/script.js?siteId=YOUR_SITE_ID" defer></script>
</head>
<body>
<main id="content" hx-boost="true">...</main>
</body>
</html>Only full-page responses need the tag. Partial responses that htmx swaps into the page must not include it, or the script is re-evaluated on every swap.
Navigations that htmx records in browser history are tracked automatically as pageviews: hx-push-url and hx-boost call history.pushState(), hx-replace-url calls history.replaceState(), and the back and forward buttons fire popstate. All three are hooked by the tracker. A swap without hx-push-url leaves the URL unchanged and is not counted as a pageview; send a custom event for those interactions instead.
Verify installation
Open your live site in a new tab and click through a few pages. Within a few seconds the pageviews appear in the Rybbit dashboard.
If nothing shows up:
- View the page source and search for
script.js?siteId=to confirm the snippet is on the page. - Open the browser Network tab and check that
script.jsreturns200and thatPOSTrequests go to/api/track. - Disable ad blockers, or set up a proxy so the script loads from your own domain.
- See the script troubleshooting guide for other common causes.
Track custom events
Use the data-rybbit-event attribute on the element that triggers the request. The tracker listens for clicks on document, so it also works on content that htmx swapped in after the page loaded:
<button
hx-post="/subscribe"
hx-target="#form"
data-rybbit-event="newsletter_subscribe"
data-rybbit-prop-plan="free"
>
Subscribe
</button>To record an event when the server has actually processed the request, listen for htmx's htmx:afterRequest event and call window.rybbit.event() from there.
Next steps
- Track custom events such as signups, purchases and button clicks.
- Identify users to connect sessions to accounts.
- Proxy the script through your own domain to bypass ad blockers.
- Script attributes let you skip or mask URLs and tag events.