Eleventy

Eleventy renders every page through a layout in _includes/, so the snippet goes in your base layout's <head>. Keep the site ID in a global data file under _data/ so the layout stays free of hard-coded values.

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 Eleventy

Create _data/rybbit.json (create the _data/ directory if it does not exist). Every template can then read it as rybbit. Change instanceUrl only if you self-host:
_data/rybbit.json
```
{
  "siteId": "YOUR_SITE_ID",
  "instanceUrl": "https://app.rybbit.io"
}
```
Open your base layout and add the tag inside <head>. The eleventy.env.runMode check keeps the script out of --serve and --watch runs, so local development is not tracked; the rybbit.siteId check keeps it out of builds with no ID configured.

_includes/base.njk

<head>
  ...
  {% if eleventy.env.runMode == "build" and rybbit.siteId %}
    <script src="{{ rybbit.instanceUrl }}/api/script.js?siteId={{ rybbit.siteId }}" defer></script>
  {% endif %}
</head>

_includes/base.liquid

<head>
  ...
  {% if eleventy.env.runMode == "build" and rybbit.siteId %}
    <script src="{{ rybbit.instanceUrl }}/api/script.js?siteId={{ rybbit.siteId }}" defer></script>
  {% endif %}
</head>

Build and deploy the generated _site/ directory:
```
npx @11ty/eleventy
```

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

Snippet missing from the page source: npx @11ty/eleventy --serve sets runMode to serve, so the guard removes the tag. Check the output of a plain build instead.
Eleventy 1.x: eleventy.env.runMode was added in Eleventy 2.0. On older versions drop the runMode condition and keep only the rybbit.siteId check.
Custom data directory: if your config sets dir.data, put rybbit.json in that directory instead of _data/.
Several layouts: a page only gets the tag if its layout chain ends in the layout you edited. Pages with layout: none or a different base layout need the tag added there too.

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 Eleventy

Verify installation

Troubleshooting

Next steps

On this page