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:
Instrument your Gatsby website with RudderStack using the Gatsby plugin
(Optional) Set up the RudderStack tracking code for your website
Create a tool/warehouse destination in RudderStack for your Gatsby site’s event data
Deploy your Gatsby site and verify the event stream
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
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.
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).