By Rudderstack Team

How to Event Stream Data from Your Jekyll Site to Google Analytics Using RudderStack

RudderStack is an open-source Customer Data Pipeline that helps you track your customer events from your web, mobile, and server-side sources and sends them to your entire customer data stack in real-time. We have also open-sourced our primary GitHub repository - rudder-server.

This blog will help you quickly integrate your Jekyll site with RudderStack using our JavaScript SDK and get started with tracking real-time user events and send them to your preferred destinations.

Instrument event streams on your Jekyll site by following three simple steps:

  1. Integrate the Jekyll Site with RudderStack JavaScript SDK and set up the tracking code
  2. Set up a tool or warehouse destination in RudderStack to route all the event data in real-time
  3. Deploy your Jekyll site and verify the event stream

Pre-Requisites

Before getting started, you need to ensure your Jekyll site is installed and set up. If you haven’t done it yet, visit the official Jekyll installation doc to get started.

Step 1: Integrating Your Jekyll Site with RudderStack JavaScript SDK

Creating a Source in RudderStack

You need to set up a JavaScript source in your RudderStack dashboard that will track events from your Jekyll site. Follow these steps to set up the source:

  1. Log into your RudderStack dashboard. If you’re new to RudderStack, sign up here.
  2. On login, you should see the following dashboard:

3. Note down the Data Plane URL. You will need this URL to integrate your Jekyll site with RudderStack.

4. Create a Source by clicking on the Add Source option. You can also click on the Directory option in the left nav bar and select Event Streams under Sources, as shown. Next, select JavaScript.

5. Add a name for JavaScript Source and click on Next.

6. Your JavaScript source is now configured and ready to track events. Note the Write Key associated with this source. You will need it to set up the RudderStack integration with your Jekyll site.

Integrating Your Jekyll Site with RudderStack

Integrate RudderStack JavaScript code with your Jekyll Site and set up the tracking code following steps given below:

  1. Jekyll has an extensive theme system that helps customize your site's presentation. Minima is Jekyll’s default theme. You can check your default theme using the following command:
bundle info --path minima

The following command opens an explorer window showing the theme files and directories.

`open $(bundle info --path minima)`

2. Next, create** rudder.html inside the _includes folder in the minima theme folder (Location: C:\Ruby30-x64\lib\ruby\gems\3.0.0\gems) to include the following script: