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 article will guide you through the integration process of your Eleventy site with RudderStack using our JavaScript SDK. It'll also help you get started with tracking real-time user events and sending them to your preferred destinations.
Instrument event streams on your Eleventy site by following three simple steps:
1. Integrate Eleventy 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 Eleventy site and verify the event stream
Pre-Requisites
Before getting started, you need to ensure your Eleventy site is installed and set up. If you haven't done it yet, visit the official Eleventy installation doc to get started.
Step 1: Integrating Eleventy Site With RudderStack JavaScript SDK
Creating A Source In RudderStack
First of all, open up your RudderStack Dashboard and set up a JavaScript source to track the events from your Eleventy site. Follow the instructions listed below to set up the source:
1. Log into your RudderStack dashboard. If you're new to RudderStack, sign up here.
2. Once you are logged in, you will see the following dashboard:
3. Note the Data Plane URL. You will need this URL to integrate your Eleventy 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 Eleventy site.
Integrating Your Eleventy Site With RudderStack
Integrate RudderStack JavaScript code with your Eleventy Site and set up the tracking code following steps given below:
1. Open your index.html file and insert the following lines of code within the
tag:<script> rudderanalytics=window.rudderanalytics=[];for(var methods=["load","page","track","identify","alias","group","ready","reset","getAnonymousId","setAnonymousId"],i=0;i<methods.length;i++){var method=methods[i];rudderanalytics[method]=function(a){return function(){rudderanalytics.push([a].concat(Array.prototype.slice.call(arguments)))}}(method)}rudderanalytics.load("1pBSDA8DDqVgLRzxN5JWyKJQoNN","https://hosted.rudderlabs.com"),rudderanalytics.page();rudderanalytics.track( "Test Event in 11ty", { revenue: 30, currency: 'INR' , user_actual_id: 12345 }, () => {console.log("Track call");});</script><script src="https://cdn.rudderlabs.com/rudder-analytics.min.js"></script>
Important: You can refer to our sample Eleventy site present in our RudderStack Eleventy site repository for more information on modifying these files.
Step 2: Creating A Destination Tool In RudderStack For Routing Your Eleventy Site Events
RudderStack supports over 80 third-party tools and platforms to which you can securely send your tracked events. In this section, we will route the Eleventy Site events to Google Analytics. In order to add Google Analytics as a destination in RudderStack, follow the steps given below:
1. In your RudderStack dashboard's left navigation bar, click on Destinations and then select Add Destination as shown:
Note: You can use the Connect Destinations option if you have already configured a destination in RudderStack and want to send your event data to that platform.
2. Next, choose Google Analytics as your Destination.
3. Add a name to your destination and click Next, as shown:
4. Now, connect the JavaScript source that we have already configured previously in Step 1.
5. On the Connection Settings page, configure your Google Analytics destination with your Google Analytics Tracking ID and other optional settings, as shown below. Then, click Next.
6. You can also transform your events before sending them to Google Analytics. For more information on this feature, check out our documentation on User Transformations.
7. Well done! Your Google Analytics is now configured as a destination. You should see the following source-destination connection in your dashboard:
(Alternate) Step 2: Create A Warehouse Destination For Your Eleventy Site Events
Important: Before you configure a data warehouse as a destination in RudderStack, you will need to set up a new project in your data warehouse. Also, you need to create a new RudderStack user role with the relevant permissions.
Follow our documentation to get step-by-step instructions on how to do this for your preferred data warehouse.
We will configure a Google BigQuery warehouse destination for this tutorial to route all the events from your Eleventy Site. You can set up a BigQuery project with the required permissions for the service account by following our documentation.
Once you have set up the project and assigned the required user permissions, follow the instructions given below:
1. From the Destinations Directory, select Google BigQuery:
2. Assign a name to your Destination and click Next.
3. Connect to the JavaScript source from which you will track your Eleventy Site events. Then, click Next.
4. Specify Connection Credentials. Add BigQuery Project ID and the Staging Bucket Name. You can refer to these instructions to get this information.
5. Finally, copy the contents of the private JSON file. You can refer to our documentation for more information on how to do this.
That's all! You have now successfully set up BigQuery as a warehouse destination in RudderStack.
Step 3: Deploying Your Eleventy Site And Verifying The Event Stream
Now that you have successfully configured your event source and destination, next you need to verify that the event stream is working properly. To do so, deploy your Eleventy Site application and test if the events are being tracked by the JavaScript source and are being delivered to your Google Analytics destination.
Follow the steps below:
1. In your Terminal or cmd, navigate to the folder containing your Eleventy Site.
2. To deploy the app, execute npx @11ty/eleventy --serve command, as shown:
3. Open your Eleventy site by visiting the server address mentioned in the cmd or http://localhost:8080 on your browser.
4. Next, verify if rudder-analytics.js (RudderStack's JavaScript SDK) has loaded correctly. To do this, go to your browser's Developer tools and navigate to the Network tab.
The following screenshot highlights this option for Google Chrome:
5. Check if RudderStack can track the different page views and clicks by clicking on the Live Events tab of your JavaScript source on the RudderStack dashboard page:
Note: After deploying your app, there can sometimes be a lag before events start sending and are visible in your dashboard and destination. Don't worry. All events are captured and sent; just be aware that they can take a few minutes to show up.
\
6. Brilliant! RudderStack has successfully tracked and captured the events:
7. Next, check if the events are sent to your Google Analytics destination. Go to your Google Analytics dashboard and navigate to the Realtime - **Events **option.
As you can see, there is one active user on the Eleventy site, and the track event is visible as well. This means the event was tracked and delivered successfully. Similarly, you will also receive the event in your Google BigQuery warehouse.
Summary
Web analytics is the process of collecting and analyzing the user behavior data on a website. It helps companies understand how users interact with their websites in order to optimize performance and create better end-user experiences. RudderStack enables companies to perform web analytics securely.
To conclude, in this article we covered how you can use Rudderstack to capture real-time event data from your Eleventy site by instrumenting the site with the RudderStack JS SDK and setting up the tracking code. We also detailed how to integrate Google Analytics as a destination in RudderStack in order to route real-time event data from your Eleventy site to the Google Analytics platform.
Sign Up For Free And Start Sending Data
Test out our event stream, ELT, and reverse-ETL pipelines. Use our HTTP source to send data in less than 5 minutes, or install one of our 12 SDKs in your website or app. Get Started
Top comments (0)