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.
2. On successful login, you should see the following dashboard:
3. Make a note of the Data Plane URL. You will need this URL to integrate your Nuxt.js app with RudderStack.
5. Assign a name to your Source and click on Next.
Integrate RudderStack with your Nuxt.js app and set up the tracking code following steps given below:
nuxt.config.js file in your app's folder to include the following script:
Important: You can refer to our sample Nuxt.js app present in our RudderStack Nuxt.js repository for more information on modifying these files.
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:
1. 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.
2. Next, choose Google Analytics as your Destination.
3. Add a name to your destination and click on Next, as shown:
5. 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.
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. Voila! Google Analytics is now configured as a destination. You should now see the following source-destination connection in your dashboard:
mportant: 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:
1. From the Destinations Directory, select Google BigQuery:
2. Add a name to your Destination and click on Next.
4. Specify the Connection Credentials. Enter the BigQuery Project ID and the Staging Bucket Name. You can refer to these instructions to get this information.
5. 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.
Follow these steps to find:
1. On your Terminal or cmd, navigate to the folder containing your Nuxt.js app.
2. To deploy the app, run
npm run dev command, as shown:
3. Open your Nuxt.js app by visiting the URL http://localhost:3000 on your browser.
4. To verify if
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, let's check if the events are sent to our Google Analytics destination. Go to your Google Analytics dashboard and navigate to the Realtime - Events option.
We can see one active user on our Nuxt.js app, and the track event is visible too. This shows that the event has been tracked and delivered successfully. Similarly, you should also receive the event in your Google BigQuery warehouse.
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.
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