Add Databuddy's cookieless product analytics to your Jekyll static site by adding the tracking script to your site's main layout file or by creating an include file.

How to Add Databuddy to Jekyll

Get Your Tracking Script

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

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

Replace YOUR_CLIENT_ID with your actual Client ID from your Databuddy dashboard.

Option A: Add to Default Layout

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

Locate Your Main Layout File

In your Jekyll project, find your main layout file. This is often _layouts/default.html.

Add the Tracking Script

Open this file and paste the Databuddy tracking script just before the closing </body> tag.

<!DOCTYPE html>
<html lang="{{ site.lang | default: 'en' }}">
<head>
  <meta charset="utf-8">
  <title>{{ site.title }}</title>
</head>
<body>
  {{ content }}
  <!-- Other footer content -->

  <!-- Databuddy Analytics Script -->
  {% if jekyll.environment == "production" %}
      <script
          src="https://cdn.databuddy.cc/databuddy.js"
          data-client-id="YOUR_CLIENT_ID"
          crossorigin="anonymous"
          async
      ></script>
  {% endif %}
</body>
</html>

Explanation:

{% if jekyll.environment == "production" %}: This Liquid tag 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_CLIENT_ID with your actual Client ID.

Option B: Create an Include File (Recommended)

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

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 databuddy-analytics.html inside _includes/ and paste the following:

{% comment %} Databuddy Analytics Include {% endcomment %}
{% if jekyll.environment == "production" and site.databuddy_client_id %}
  <script
      src="https://cdn.databuddy.cc/databuddy.js"
      data-client-id="{{ site.databuddy_client_id }}"
      crossorigin="anonymous"
      async
  ></script>
{% endif %}

Include in Layout

Open your main layout file (e.g., _layouts/default.html).

Just before the closing </body> tag, add:

<!DOCTYPE html>
<html lang="{{ site.lang | default: 'en' }}">
<head>
  <meta charset="utf-8">
  <title>{{ site.title }}</title>
</head>
<body>
  {{ content }}
  <!-- Other footer content -->

  {% include databuddy-analytics.html %}
</body>
</html>

Configure _config.yml

Open your _config.yml file and add your Databuddy Client ID:

# Databuddy Analytics Configuration
databuddy_client_id: "YOUR_CLIENT_ID"

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

Configuration Options

Enable additional tracking features by modifying the include file:

{% comment %} Databuddy Analytics Include with Options {% endcomment %}
{% if jekyll.environment == "production" and site.databuddy_client_id %}
  <script
      src="https://cdn.databuddy.cc/databuddy.js"
      data-client-id="{{ site.databuddy_client_id }}"
      data-track-attributes
      data-track-outgoing-links
      data-track-interactions
      data-track-web-vitals
      data-track-errors
      crossorigin="anonymous"
      async
  ></script>
{% endif %}

Custom Event Tracking

Track custom events in your Jekyll posts and pages using data attributes or inline JavaScript.

Using Data Attributes

Enable automatic tracking with data attributes:

<!-- In your Jekyll posts or pages -->
<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:

<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 Jekyll Posts

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

---
title: My Post
track_events: true
---

# My Post

Content here...

{% if page.track_events %}
<script>
if (window.databuddy) {
  window.databuddy.track('blog_post_view', {
      post_title: '{{ page.title }}',
      post_url: '{{ page.url }}'
  });
}
</script>
{% endif %}

Hugo

Hugo static site integration with partial templates.

WordPress

Plugin or manual setup for WordPress sites.

React

TypeScript support with React hooks and components.

Need help with your Jekyll integration? Contact us at support@databuddy.cc.

Jekyll