Storyblok
Add Rybbit analytics to your Storyblok site
Storyblok is a headless CMS: it stores content and delivers it through its APIs, while your frontend renders the pages. The tracking snippet therefore goes into the frontend's root layout, not into Storyblok.
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 Storyblok
Storyblok has no template or head setting to paste into. Add the snippet to the <head> of the frontend application that fetches content from Storyblok.
Add the snippet with next/script in your root layout so it loads on every route. Follow the Next.js guide.
Add the snippet under app.head.script in nuxt.config.ts. Follow the Nuxt guide.
The script tracks client-side route changes automatically, so navigation between stories in any of these frameworks is counted without extra code.
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
- Visual Editor previews count as visits: the Visual Editor loads your frontend in an iframe at the Preview URL set under Settings > Visual Editor, appending
_storyblokand_storyblok_tk[...]query parameters. Editors' preview sessions are tracked like real visitors. Point the Preview URL at a separate preview deployment registered as its own site in Rybbit, or leave the tag out of builds that use the preview token. - Preview parameters in tracked URLs: if the same deployment serves both the live site and the Visual Editor, the
_storyblokparameters show up in tracked page URLs. Adddata-track-query="false"to the script tag to drop query strings. - The Storyblok app is not tracked: the snippet only runs in your frontend, so time spent in
app.storyblok.comnever appears in Rybbit.
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.