Bolt
Add Rybbit analytics to your Bolt app
Bolt has no settings field for custom head code (its Analytics project setting only shows traffic for published sites), so the snippet goes into the app's HTML head as a code change: prompt Bolt to add it, or switch to Code view and paste it into the root HTML or layout file. Publish the project again afterwards.
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 Bolt
Paste this into the chat, with your snippet in place of the placeholder:
Add this script tag to the <head> of every page and keep all existing head tags:
<script src="https://app.rybbit.io/api/script.js?siteId=YOUR_SITE_ID" defer></script>Review the change Bolt makes before you move on: the tag should be in the document head, not inside a component.
Click the Code Preview icon (<>) at the top center to switch to Code view, then open the file that owns the <head> for the framework Bolt chose:
- Vite projects (React, Vue, Svelte):
index.htmlat the project root. - Next.js projects:
app/layout.tsx, using thenext/scriptcomponent as in the Next.js guide. - Any other framework: ask Bolt "which file renders the HTML head?" and edit that one.
For a Vite project, paste the snippet before </head>:
<head>
<meta charset="UTF-8" />
<title>My app</title>
<script src="https://app.rybbit.io/api/script.js?siteId=YOUR_SITE_ID" defer></script>
</head>Click Save or press Ctrl+S.
Publish the change: open the Publish menu and click Publish the first time, or Update for a site that is already live. In-app navigation is tracked as pageviews automatically.
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.
Troubleshooting
- Published site unchanged: edits are not applied to the live site until you click Update in the Publish menu.
- Bolt removed the tag: later prompts can regenerate
index.htmlor the layout. Right-click the file in the Files list and choose Lock file so Bolt leaves it alone, or add a line to the project's Knowledge telling it to keep the Rybbit script. - Expo (mobile) projects: a script tag only runs in the web build. For the native app, use the JavaScript SDK instead.
- Numbers differ from Bolt's Analytics: Bolt's built-in counts include crawlers and bots; Rybbit filters them.
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.