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

Pre-requisites

Before getting started, we are assuming that you have already installed the Hugo site on your system. In case you haven’t, visit the official Hugo installation doc to get started.

Step 1: Integrating your Hugo site with the RudderStack JavaScript SDK

Creating a source in RudderStack

First and foremost, open your RudderStack Dashboard and set up a JavaScript source to track the events from your Hugo site. Follow the instructions listed below to set up the source:

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

2. Once done, you will see the following dashboard:

3. Note the Data Plane URL as you will need this URL to integrate your Hugo site with RudderStack.

4. Next, create a Source by clicking on the Add Source option. If already added, you can also click on the Directory option in the left navigation bar, and select Event Streams under Sources, as shown. Next, select JavaScript as a source.

5. Add a name for your JavaScript source and click on Next.

6. Now the JavaScript source is configured and all set to track events. Take note of the WRITE KEY associated with this source. You will need this key to set up the RudderStack integration with your Hugo site.

Integrating your Hugo site with RudderStack

Integrate RudderStack JavaScript code with your Hugo Site and set up the tracking code using the following steps:

Open your index.html file and insert the following code within the <head></head> tag:

JAVASCRIPT
<script>
      rudderanalytics = window.rudderanalytics = [];
        var methods = [
          "load",
          "page",
          "track",
          "identify",
          "alias",
          "group",
          "ready",
          "reset",
          // "requireIntegration",
          "setAnonymousId",
          "getAnonymousId",
        ];
        for (var i = 0; i < methods.length; i++) {
          var method = methods[i];
          rudderanalytics[method] = (function (methodName) {
            return function () {
              rudderanalytics.push(
                [methodName].concat(Array.prototype.slice.call(arguments))
              );
            };
          })(method);
        }
        rudderanalytics.load("1skegHQpcGKIfhSHCHTVbsv9oui","https://hosted.rudderlabs.com");
        rudderanalytics.track("Simple track call");
    </script>
    <script src="https://cdn.rudderlabs.com/v1/rudder-analytics.min.js"></script>

Important: You can refer to our sample Hugo site present in RudderStack Hugo site repository for more information on modifying these files.

Step 2: Creating a destination tool in RudderStack for routing your Hugo site events

RudderStack supports more than 80 third-party tools as well as platforms where you can send your tracked events securely. In this section, you will route the Hugo site events to Google Analytics using RudderStack integration. To do this, follow the below steps:

1. Click on Destinations in your RudderStack dashboard’s left navigation bar, 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. Choose Google Analytics as your destination.

3. Add a name to your destination and click on Next, as shown:

4. Once the destination is named, connect it to the JavaScript source that you have already configured in Step 1 - Integrating your Hugo site with the RudderStack JavaScript SDK.

5. Next, 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. Before sending your events to Google Analytics, Rudderstack also provides you the option of transforming them. To learn more about this feature, check out our User Transformations documentation.

7. Congratulations! Google Analytics is now configured as a destination. Now, you will be able to see the following source-destination connection in your dashboard:

(Alternate) Step 3: Create a warehouse destination for your Hugo site event

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.

In this tutorial, you will configure a Google BigQuery warehouse destination to route all the events from your Hugo Site. You can also follow our documentation to set up a BigQuery project with the required permissions for the service account.

Once the project is all set and the required user permissions are assigned, follow the instructions given below:

1. From the Destinations Directory, select Google BigQuery:

2. Name your Destination and click Next.

3. Now, connect to the JavaScript source from which you will track your Hugo Site events. Then, click Next.

4. Specify Connection Credentials. Add BigQuery Project ID and Staging GCS Storage Bucket Name by following these instructions:

5. Once done, copy the contents of the private JSON file.

Voila! You have now successfully set up BigQuery as a warehouse destination in RudderStack.

Step 3: Deploying your Hugo site and verifying the event stream

Now that your event source and destination are configured, verify that the event stream is working. For this, deploy your Hugo Site application and test whether the events are being tracked by the JavaScript source and delivered to your Google Analytics destination.

Follow the steps below:

1. In your Terminal or Command Prompt, navigate to the folder containing your Hugo Site.

2. To deploy the app, execute the hugo server -D command, as shown:

3. Navigate to your Hugo site by visiting the server address mentioned in the cmd or http://localhost:1313/ on your browser.

4. Next, verify if rudder-analytics.js (RudderStack’s JavaScript SDK) has loaded correctly. For this, open your browser’s Developer tools and navigate to the Network tab. The following screenshot highlights this option for Google Chrome:

5. Now 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 the Hugo site starts sending the events 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. Great! RudderStack has successfully tracked and captured the event:

7. Next, check if the events are being sent to your Google Analytics destination. For that, go to your Google Analytics dashboard and navigate to the Realtime > Events option.

As you can see there is one active user on the Hugo site, and the event call is visible. This indicates that the event was tracked and delivered successfully. You will also receive the event in your Google BigQuery warehouse.

Summary

Web analytics facilitates collecting and analyzing user behavior data on a website. It helps companies understand their user behavior in order to optimize performance and create better end-user experiences. RudderStack enables companies to perform web analytics securely.

In this article, you learned how Rudderstack can be used to capture real-time event data from your Hugo site by integrating the site with the RudderStack JS SDK and setting up the tracking code. You also explored how to integrate Google Analytics as a destination in RudderStack to route real-time event data from your Hugo site to the Google Analytics platform.

Don't want to go through the pain of direct integration? RudderStack's Javascript SDK makes it easy to send data from your Hugo site to Google Analytics.