Integrating Gooddata with Next.js
Adding Gooddata to your Next.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 Root Layout
Next.js (App Router) uses a global layout.tsx or layout.jsx file to define the HTML shell of your application. This is the perfect place to put the Gooddata script so it loads on every page.
- In your code editor, open the
app/layout.tsx(orapp/layout.jsx) file. - Import the Next.js
<Script>component at the top of the file. - Add the
<Script>tag inside the<head>section of your document. - Replace
<YOUR_PROJECT_ID>with the ID you copied in Step 1.
Here is what your file should look like:
import Script from 'next/script';
export default function RootLayout({ children }) {
return (
<html lang="en">
<head>
{/* Add the Gooddata tracker to your layout */}
<Script
defer
src="https://gooddata-fyp.onrender.com/sdk/tracker.js"
data-project-id="<YOUR_PROJECT_ID>"
/>
</head>
<body>{children}</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.