📊 Replace Google Analytics with warehouse analytics.
How to Event Stream Data from Your Nuxt.js App Using RudderStack
RudderStack is an open-source Customer Data Pipeline that enables you to track events from your web, mobile, and server-side sources and send them to your whole customer data stack in real-time. We have also open-sourced our primary GitHub repository - rudder-server.
You can instrument event streams on your Nuxt.js app using the following three key steps:
- Set up a tool or warehouse destination in RudderStack to route all the event data in real-time
- Deploy your Nuxt.js app and verify the event stream
We assume you have installed and set up your Nuxt.js app. If you haven’t, visit the official Nuxt.js documentation to get started.
Creating a Source in RudderStack
- Log into your RudderStack dashboard. (If you’re new to RudderStack, sign up here)
- On successful login, you should see the following dashboard:
- Make a note of the Data Plane URL. You will need this URL to integrate your Nuxt.js app with RudderStack.
Data Plane URL
- Assign a name to your Source and click on Next.
Name Your Source
Integrating Your Nuxt.js app with RudderStack
Integrate RudderStack with your Nuxt.js app and set up the tracking code following steps given below:
- Modify the
nuxt.config.jsfile in your app’s folder to include the following script:
Update the nuxt.config.js file
Important: You can refer to our sample Nuxt.js app present in our RudderStack Nuxt.js repository for more information on modifying these files.
Step 2: Creating a Destination Tool in RudderStack for Routing Your Nuxt.js app Events
RudderStack supports over 80 third-party tools and platforms to which you can securely send your tracked events. In this tutorial, we will route the Nuxt.js app events to Google Analytics. To add Google Analytics as a destination in RudderStack, follow the steps given below:
- In the left navigation bar of your Rudderstack dashboard, click on Destinations and select Add Destination. Since we have already configured a source, you can simply click on the source and click on the Add Destination option, as shown:
Note: You can use Connect Destinations option if you have already configured a destination in RudderStack and want to send your event data to that platform.
- Next, choose Google Analytics as your Destination.
Select Google Analytics
- Add a name to your destination and click on Next, as shown:
Enter Destination Name
- In the Connection Settings, configure your Google Analytics destination with your Google Analytics Tracking ID and other optional settings, as shown below. Then, click on Next.
Configure Google Analytics Tracking ID
- 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.
- Voila! Google Analytics is now configured as a destination. You should now see the following source-destination connection in your dashboard:
(Alternate) Step 3: Create a Warehouse Destination in RudderStack for Your Nuxt.js app 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 docs to get detailed and step-by-step instructions on how to do it for your preferred data warehouse.
We will set up a Google BigQuery warehouse destination for this tutorial to route all the events from our Nuxt.js app. 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 these steps:
- From the Destinations Directory, select Google BigQuery:
Select Google BigQuery as a Destination
- Add a name to your Destination and click on Next.
Add Destination Name
- Specify the Connection Credentials. Enter the BigQuery Project ID and the Staging Bucket Name. You can refer to these instructions to get this information.
Specify the Connection Credentials
- Lastly, copy the contents of the private JSON file. Find more information on how to do this in our documentation.
That’s all! You have successfully set up BigQuery as a warehouse destination in RudderStack.
Step 3: Deploying Your Nuxt.js app and Verifying the Event Stream
Monitoring in-app data is crucial to understand the real performance of your app and the user behavior. The insights you gain from this monitoring enable you to update your app to your customers’ needs. Continuously adapting your app to maintain likeability is an important trait of a successful app. RudderStack helps you achieve this securely.
In this tutorial, we learned how to instrument real-time event data on your Nuxt.js App using RudderStack. We integrated the Nuxt.js app with RudderStack JS SDK and learned how to set up the tracking code. We also set up Google Analytics as a destination in RudderStack to route all event streams in real-time and also verify successful delivery of the event streams.
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.