Hugo

Integrating Rybbit Analytics with your Hugo static site involves adding the tracking script to your site’s templates. The best way to do this is by creating a partial template for the script and including it in your site’s footer.

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. Create a Partial Template

In your Hugo project, navigate to the layouts/partials/ directory. If it doesn’t exist, create it.

Inside layouts/partials/, create a new file named rybbit-analytics.html (or a similar name).

Paste your Rybbit tracking script into this new file:

{{/* layouts/partials/rybbit-analytics.html */}}
{{ if not .Site.IsServer }} {{/* Only include in production builds */}}
  <script async defer src="https://your-rybbit-instance.com/api/script.js" data-site-id="YOUR_SITE_ID"></script>
{{ end }}

Explanation:

• {{ if not .Site.IsServer }}: This Hugo condition ensures that the tracking script is only included when you build your site for production (hugo) and not during local development (hugo server). This prevents tracking your own local page views.
• Replace https://your-rybbit-instance.com and YOUR_SITE_ID with your actual details.

3. Include the Partial in Your Footer

Now, you need to include this partial in your site’s main footer template. This is typically located in layouts/_default/baseof.html or a theme-specific footer partial (e.g., layouts/partials/footer.html or themes/your-theme/layouts/partials/footer.html).

Open your main base template or footer partial file. Just before the closing </body> tag, add the following line to include your Rybbit Analytics partial:

{{/* ... other footer content ... */}}
 
{{ partial "rybbit-analytics.html" . }}
 
</body>
</html>

If you named your partial differently, make sure to use that name (e.g., {{ partial "my-analytics-script.html" . }}).

4. Configure config.toml (Optional but Recommended)

To make your Site ID configurable, you can use Hugo’s site parameters.

a. Update rybbit-analytics.html:

Modify layouts/partials/rybbit-analytics.html to use a site parameter:

{{/* layouts/partials/rybbit-analytics.html */}}
{{ if and (not .Site.IsServer) .Site.Params.rybbitSiteID }}
  <script async defer src="{{ .Site.Params.rybbitInstanceURL | default "https://app.rybbit.io" }}/api/script.js" data-site-id="{{ .Site.Params.rybbitSiteID }}"></script>
{{ end }}

b. Add parameters to config.toml (or config.yaml / config.json):

Open your Hugo configuration file (e.g., config.toml) and add:

[params]
  rybbitInstanceURL = "https://app.rybbit.io" # Your Rybbit instance URL
  rybbitSiteID = "YOUR_SITE_ID" # Your Rybbit Site ID

This approach keeps your specific IDs out of the templates and makes it easier to manage for different environments if needed.

5. Build and Deploy

Rebuild your Hugo site:

hugo

Deploy the generated public/ directory to your web server.

6. Verify Integration

• Open your live Hugo 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 Hugo site and will only track visits on your production deployment.