By Rudderstack Team

How to Event Stream from Your Gatsby Website Using Open Source RudderStack

RudderStack is an open-source Customer Data Pipeline that allows you to track and send real-time events from your web, mobile, and server-side sources to your entire customer data stack. Our primary repository - rudder-server - is open-sourced on GitHub.

With RudderStack’s open-source Gatsby plugin, you can easily integrate your Gatsby site with RudderStack, and track and capture customer events from it in real-time.

To instrument real-time event streams on your Gatsby website using RudderStack, we need to follow these four steps:

  1. Instrument your Gatsby website with RudderStack using the Gatsby plugin
  2. (Optional) Set up the RudderStack tracking code for your website
  3. Create a tool/warehouse destination in RudderStack for your Gatsby site’s event data
  4. Deploy your Gatsby site and verify the event stream

Pre-Requisites

This post assumes you have already installed and set up your Gatsby website. If you haven’t done so, we recommend following the official Gatsby documentation to get started.

Step 1: Instrument Your Gatsby Website with RudderStack Using the Gatsby Plugin

Create a source in RudderStack

Before you instrument your Gatsby site with RudderStack, you will need to set up a JavaScript source in your RudderStack dashboard, which will track and capture events from your website. To do so, follow these steps:

1. Log into your RudderStack dashboard. If you don’t have an account, please sign up.

2. Once you have logged in, you should see the following dashboard:

3. Note the Data Plane URL, which is required to instrument your Gatsby site with RudderStack.


4. The next step is to create a source. To do this, click on the Add Source button. Optionally, you can select the Directory option on the left nav bar and select Event Streams under Sources.

For the Gatsby plugin, we will set up a simple JavaScript source.

5. Assign a name to your source, and click on Next.

6. Your event source is now configured. Note the Write Key associated with this source. This is also required to configure the RudderStack-Gatsby integration.

Instrument your Gatsby site with RudderStack

To instrument your Gatsby website with RudderStack, we will leverage the open-source Gatsby plugin for RudderStack. Follow these steps:

1. Navigate to the root directory, which contains your site’s assets and resources.

2. Type the following command depending on the package manager of your choice:

  • For NPM: $ npm install --save gatsby-plugin-rudderstack
  • For YARN: $ yarn add gatsby-plugin-rudderstack

3. To set up the plugin, you will need to configure your gatsby-config.js file with the source Write Key and the Data Plane URL that you have obtained from the previous section (Create a source in RudderStack).

4. The configuration options are as shown:

plugins: [
{
resolve: `gatsby-plugin-rudderstack`,
options: {
prodKey: `RUDDERSTACK_PRODUCTION_WRITE_KEY`,<