Jekyll

Integrating Rybbit Analytics with your Jekyll static site involves adding the tracking script to your site’s main layout file or by creating an include file.

1. Get Your Tracking Script

First, you’ll need your Rybbit tracking script. You can find this in your Rybbit dashboard under Site Settings > Tracking Code. It will look something like this:

<script async defer src="https://app.rybbit.io/api/script.js" data-site-id="YOUR_SITE_ID"></script>

Replace YOUR_SITE_ID with your actual Site ID from your Rybbit dashboard.

2. Option A: Add to Default Layout

The simplest way is to add the script directly to your default layout file.

• In your Jekyll project, find your main layout file. This is often _layouts/default.html.
• Open this file and paste the Rybbit tracking script just before the closing </body> tag.

{{ site.title }}
{{ content }}
<!-- Other footer content -->
 
<!-- Rybbit Analytics Script -->
{{% raw %}}
{% if jekyll.environment == "production" %}
  <script async defer src="https://app.rybbit.io/api/script.js" data-site-id="YOUR_SITE_ID"></script>
{% endif %}
{{% endraw %}}
 
</body>
</html>

Explanation:

• {{% raw %}}{% if jekyll.environment == "production" %}}{{% endraw %}}: This Liquid tag condition ensures the script is only included when your site is built for production (e.g., when JEKYLL_ENV=production jekyll build). This prevents tracking your local development views.
• Replace YOUR_SITE_ID with your actual Site ID. The script source https://app.rybbit.io/api/script.js is for the standard cloud-hosted Rybbit instance.

3. Option B: Create an Include File (Recommended)

A cleaner approach is to create an include file for the script.

a. Create the Include File:

• In your Jekyll project, navigate to the _includes/ directory. If it doesn’t exist, create it.
• Create a new file named rybbit-analytics.html (or similar) inside _includes/.
• Paste the following into _includes/rybbit-analytics.html:

{{% raw %}}
{% comment %} _includes/rybbit-analytics.html {% endcomment %}
{% if jekyll.environment == "production" and site.rybbit_site_id %}
  <script async defer src="{{ site.rybbit_instance_url | default: 'https://app.rybbit.io' }}/api/script.js" data-site-id="{{ site.rybbit_site_id }}"></script>
{% endif %}
{{% endraw %}}

b. Include in Layout:

• Open your main layout file (e.g., _layouts/default.html).
• Just before the closing </body> tag, add:

{{ site.title }}
{{ content }}
<!-- Other footer content -->
 
{{% raw %}}{% include rybbit-analytics.html %}{{% endraw %}}
 
</body>
</html>

c. Configure _config.yml:

• Open your _config.yml file and add your Rybbit details:

# Rybbit Analytics Configuration
rybbit_instance_url: "https://app.rybbit.io" # Optional, defaults in include
rybbit_site_id: "YOUR_SITE_ID"

This method keeps your credentials in the configuration file and makes the script inclusion conditional on rybbit_site_id being set.

4. Build and Deploy

Build your Jekyll site. For production, set the JEKYLL_ENV environment variable:

JEKYLL_ENV=production jekyll build

Or, if you use GitHub Pages, it typically sets jekyll.environment to production automatically during its build process.

Deploy the generated _site/ directory to your web server.

5. Verify Integration

• Open your live Jekyll website in a browser.
• Navigate through a few pages.
• Check your Rybbit dashboard for incoming data. It might take a few minutes for the first events to appear.

That’s it! Rybbit Analytics is now integrated with your Jekyll site and will only track visits on your production deployment.