Integrating Gooddata with Vanilla HTML
Adding Gooddata to your Vanilla HTML 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: Paste the Script in your Head Tags
If you are building a website from scratch using plain HTML, or modifying an existing template, you just need to paste the script into your code.
- Open your HTML files (like
index.html) in a text editor. - Find the opening
<head>tag near the top of the file. - Paste the tracking script directly below it.
- Replace
<YOUR_PROJECT_ID>with your actual project ID.
Note: You must do this for every HTML page you want to track, or put it in a shared header template if you are using PHP/Jekyll/Hugo etc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
<!-- Add Gooddata here -->
<script defer data-project-id="<YOUR_PROJECT_ID>" src="https://gooddata-fyp.onrender.com/sdk/tracker.js"></script>
</head>
<body>
<h1>Welcome to my website!</h1>
</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.