Integrations
Integrating Gooddata with Angular
Adding Gooddata to your Angular 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 index.html
Angular provides a single index.html file that serves as the entry point for your application.
- Open
src/index.htmlin your project folder. - Find the
<head>section. - Paste the tracking script right before the
</head>tag. - Replace
<YOUR_PROJECT_ID>with your actual project ID.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Your Angular App</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add Gooddata here -->
<script defer data-project-id="<YOUR_PROJECT_ID>" src="https://gooddata-fyp.onrender.com/sdk/tracker.js"></script>
</head>
<body>
<app-root></app-root>
</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.