BlogPricingDashboardGitHubGitHub★ 841

Hugo

Add Databuddy's privacy-first analytics to your Hugo static site by 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.

How to Add Databuddy to Hugo

1

Get Your Tracking Script

Get your Databuddy tracking script from your Databuddy dashboard. It will look like this:

html
<script
src="https://cdn.databuddy.cc/databuddy.js"
data-client-id="YOUR_CLIENT_ID"
async
></script>

Replace YOUR_CLIENT_ID with your actual Client ID from your Databuddy 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 databuddy-analytics.html.

Paste your Databuddy tracking script into this new file:

layouts/partials/databuddy-analytics.htmlhtml
{{/* layouts/partials/databuddy-analytics.html */}}
{{ if not .Site.IsServer }}
  <script
      src="https://cdn.databuddy.cc/databuddy.js"
      data-client-id="YOUR_CLIENT_ID"
      async
  ></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 YOUR_CLIENT_ID with your actual Client ID.
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 Databuddy Analytics partial:

layouts/_default/baseof.htmlhtml
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
<head>
  <meta charset="utf-8">
  <title>{{ .Site.Title }}</title>
</head>
<body>
  {{ block "main" . }}{{ end }}

  {{/* Other footer content */}}

  {{ partial "databuddy-analytics.html" . }}
</body>
</html>

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

To make your Client ID configurable, you can use Hugo's site parameters.

1

Update databuddy-analytics.html

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

layouts/partials/databuddy-analytics.htmlhtml
{{/* layouts/partials/databuddy-analytics.html */}}
{{ if and (not .Site.IsServer) .Site.Params.databuddyClientID }}
  <script
      src="https://cdn.databuddy.cc/databuddy.js"
      data-client-id="{{ .Site.Params.databuddyClientID }}"
      async
  ></script>
{{ end }}
2

Add Parameters to config.toml

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

config.tomltoml
[params]
databuddyClientID = "YOUR_CLIENT_ID"

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

Configuration Options

Enable additional tracking features by modifying the partial:

layouts/partials/databuddy-analytics.htmlhtml
{{/* layouts/partials/databuddy-analytics.html */}}
{{ if and (not .Site.IsServer) .Site.Params.databuddyClientID }}
  <script
      src="https://cdn.databuddy.cc/databuddy.js"
      data-client-id="{{ .Site.Params.databuddyClientID }}"
      data-track-attributes
      data-track-outgoing-links
      data-track-interactions
      data-track-performance
      data-track-web-vitals
      data-track-errors
      data-track-scroll-depth
      async
  ></script>
{{ end }}

Custom Event Tracking

Track custom events in your Hugo content using data attributes or inline JavaScript.

Using Data Attributes

Enable automatic tracking with data attributes:

html
<!-- In your Hugo content files -->
<button data-track="cta_click" data-button-type="primary">
  Get Started
</button>

<a href="/pricing" data-track="pricing_link_click" data-link-location="header">
  View Pricing
</a>

Inline JavaScript

Add custom tracking to specific pages or posts:

html
<script>
document.addEventListener('DOMContentLoaded', function() {
  var button = document.getElementById('special-button');
  if (button && window.databuddy) {
      button.addEventListener('click', function() {
          window.databuddy.track('button_click', {
              button_id: 'special-button',
              page_path: window.location.pathname
          });
      });
  }
});
</script>

In Hugo Posts

Add tracking to specific blog posts using front matter and shortcodes:

content/posts/my-post.mdmarkdown
---
title: "My Post"
track_events: true
---

# My Post

Content here...

{{< databuddy-track event="blog_post_view" >}}

Create a shortcode for tracking:

layouts/shortcodes/databuddy-track.htmlhtml
{{/* layouts/shortcodes/databuddy-track.html */}}
{{ if and (not .Site.IsServer) .Site.Params.databuddyClientID }}
<script>
if (window.databuddy) {
  window.databuddy.track('{{ .Get "event" }}', {
      {{- range $key, $value := .Params }}
      {{- if ne $key "event" }}
      '{{ $key }}': '{{ $value }}',
      {{- end }}
      {{- end }}
      page_path: window.location.pathname,
      page_title: document.title
  });
}
</script>
{{ end }}

How is this guide?

Edit on GitHub