Tauri

Tauri v2 bundles your frontend into the app and serves it to the system webview. Install the @rybbit/js SDK in the frontend (or put the snippet in its index.html), then allow https://app.rybbit.io in the app.security.csp block of src-tauri/tauri.conf.json.

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 Tauri

Tauri's security guide advises against loading remote scripts such as CDN-hosted files. The SDK keeps all executable code inside the bundle, so it is the recommended method.

Install the package in your frontend project:

npm install @rybbit/js

Initialise it once in the frontend entry file (src/main.ts or equivalent):

src/main.ts

import rybbit from "@rybbit/js";

await rybbit.init({
  analyticsHost: "https://app.rybbit.io/api",
  siteId: "YOUR_SITE_ID",
});

Allow the analytics host in connect-src. Keep ipc: and http://ipc.localhost, which Tauri needs for frontend-to-Rust calls:

src-tauri/tauri.conf.json

{
  "app": {
    "security": {
      "csp": {
        "default-src": "'self'",
        "connect-src": ["ipc:", "http://ipc.localhost", "https://app.rybbit.io"]
      }
    }
  }
}

Paste the snippet into the <head> of your frontend's index.html:

index.html

<script src="https://app.rybbit.io/api/script.js?siteId=YOUR_SITE_ID" defer></script>

Allow the host in both script-src and connect-src:

src-tauri/tauri.conf.json

{
  "app": {
    "security": {
      "csp": {
        "default-src": "'self'",
        "script-src": ["'self'", "https://app.rybbit.io"],
        "connect-src": ["ipc:", "http://ipc.localhost", "https://app.rybbit.io"]
      }
    }
  }
}

If app.security.csp is unset, Tauri applies no CSP and neither change is needed. Route changes inside the app are tracked automatically: the tracker wraps history.pushState and history.replaceState and listens for popstate and hashchange.

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.js returns 200 and that POST requests 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.

Troubleshooting

Works in tauri dev but not in the built app on macOS, Linux or iOS: in development the frontend is served from your dev server (http://localhost:1420 by default), which is a normal http origin. Production builds serve it from http://tauri.localhost on Windows and Android but from the custom scheme tauri://localhost on macOS, Linux and iOS. Rybbit's tracking endpoints answer CORS preflights for http:// and https:// origins only, so requests from tauri://localhost are blocked by the webview. On Windows and Android, app.windows[].useHttpsScheme: true switches the origin to https://tauri.localhost; both forms work.
CSP violation in the webview console: the message names the blocked directive. Add https://app.rybbit.io there; the SDK only needs connect-src, the script tag also needs script-src.
Object vs string CSP: app.security.csp accepts either a single policy string or the object form shown above. Do not mix the two.

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.

Get your tracking snippet

Add the snippet to Tauri

Verify installation

Troubleshooting

Next steps

On this page