Integrations
Integrating Gooddata with Vue.js
Adding Gooddata to your Vue.js project is a simple, straightforward process. Follow the step-by-step instructions below to start tracking your visitors without compromising their privacy.
Step 1: Copy Your Project ID
Before you begin, you need your unique Gooddata Project ID.
- Log in to your Gooddata Dashboard.
- Select your project from the sidebar.
- Click on the Settings gear icon in the bottom left.
- Copy the
Project IDor the provided tracking snippet block.
Step 2: Add the Script to your HTML Template
In a standard Vue.js project (created with Vue CLI or Vite), there is a main index.html file at the root of your project.
- Open the
index.htmlfile in your code editor. - Locate the
<head>tags. - Paste the tracking script right before the closing
</head>tag. - Make sure to replace
<YOUR_PROJECT_ID>with the ID from your dashboard.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Your Vue App</title>
<!-- Add Gooddata here -->
<script defer data-project-id="<YOUR_PROJECT_ID>" src="https://gooddata-fyp.onrender.com/sdk/tracker.js"></script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>Step 3: Verify the Installation
Once you have added the script and published your changes, it's time to test if Gooddata is receiving data.
- Open your live website in a new incognito/private browsing window.
- Navigate to a few different pages.
- Return to your Gooddata Dashboard and go to the Realtime tab.
- You should see "1 Active Visitor" and your recent page views populating instantly.
Troubleshooting: If you don't see any data, make sure you don't have an adblocker enabled that might be blocking the script, and ensure you replaced <YOUR_PROJECT_ID> with your actual ID.