How To Event Stream Data From Your Hugo Site To Google Analytics Using RudderStack
You can easily implement event streams on your Hugo site by following three steps:
2. Set up a tool or warehouse destination in RudderStack to route all the event data in real-time
3. Deploy your Hugo site and verify the event stream
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.
Creating A Source In RudderStack
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.
Integrating Your Hugo Site With RudderStack
- Open your index.html file and insert the following code within the
…waiting for Gist…
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:
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.
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
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
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.
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.
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.
This blog was originally published at: