By Rudderstack Team

How to event stream data from your Vue app to Google Analytics using RudderStack

RudderStack is an open-source Customer Data Platform 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.

This guide will help you quickly integrate your Vue app with RudderStack using the JavaScript SDK and get started with tracking real-time user events and sending them to your preferred destinations.

Instrument event streams on your Vue app by following three simple steps:

1. Integrate your Vue app with RudderStack JavaScript SDK and set up the tracking code

2. Set up a destination in RudderStack to route all the event data in real-time

3. Deploy your Vue app and verify the events

Pre-Requisites

Before getting started, you need to ensure your Vue app is installed and set up. If you haven’t done it yet, refer to the Vue documentation for more information.

Step 1: Integrating your Vue app with the JavaScript SDK

Creating a JavaScript source in RudderStack

You need to set up a JavaScript source in your RudderStack dashboard that will track events from your Vue app. Follow these steps to set up the source:

1. Log into your RudderStack dashboard. If you’re new to RudderStack, sign up here.

2. Write down the Data Plane URL. You will need this later.

3. Create a Source by clicking on the Add Source option. You can also click on the Directory option in the left navigation bar and select Event Streams under Sources, as shown. Next, select JavaScript.

4. Add a name for JavaScript Source and click on Next.

5. 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 Vue app.

Installing and configuring the JavaScript SDK in your Vue app

Integrate RudderStack JavaScript code with your Vue app and set up the tracking code following steps given below:

  1. In your Vue app's project folder, navigate to the public folder and open index.html.
  2. Place the following script within the <head> section of the page:
<script>


      rudderanalytics=window.rudderanalytics=[];
      for(var methods=["load","page","track","identify","reset"],i=0