BlogPricingDashboardGitHubGitHub★ 841

Jekyll

Add Databuddy's privacy-first 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

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.

Option A: Add to Default Layout

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

1

Locate Your Main Layout File

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

2

Add the Tracking Script

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

_layouts/default.htmlhtml
<!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 -->
  {% raw %}{% if jekyll.environment == "production" %}{% endraw %}
      <script
          src="https://cdn.databuddy.cc/databuddy.js"
          data-client-id="YOUR_CLIENT_ID"
          async
      ></script>
  {% raw %}{% endif %}{% endraw %}
</body>
</html>

Explanation:

  • {% raw %}{% if jekyll.environment == "production" %}{% endraw %}: 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.

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

1

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:

_includes/databuddy-analytics.htmlhtml
{% raw %}{% 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 }}"
      async
  ></script>
{% endif %}{% endraw %}
2

Include in Layout

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

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

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

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

Configure _config.yml

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

_config.ymlyaml
# 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:

_includes/databuddy-analytics.htmlhtml
{% raw %}{% 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-performance
      data-track-web-vitals
      data-track-errors
      data-track-scroll-depth
      async
  ></script>
{% endif %}{% endraw %}

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:

html
<!-- 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:

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

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

_posts/2024-01-01-my-post.mdmarkdown
---
title: My Post
track_events: true
---

# My Post

Content here...

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

How is this guide?

Edit on GitHub