Free React SEO Tracking Tool That's Actually GDPR-Ready
Mitu Das
super admin
I've been there. You build a beautiful React app. You add Google Analytics. You feel good about it. Then someone mentions GDPR. And your stomach drops.
Most analytics setups have a dirty secret: they load tracking scripts before the user says yes. That's not just bad practice anymore. EU data protection authorities are actively fining companies, and the numbers are terrifying.
Here's what changed everything for me. A free, open-source toolkit called @power-seo/tracking. It solves GDPR consent, multi-provider analytics, and TypeScript safety, all in one package. No monthly fees. No bloated vendor SDKs. Just clean, typed code that does exactly what you need.
What makes it stand out is that it's more than just an analytics wrapper. If you're looking for a free React SEO tracking tool that respects user privacy while keeping implementation simple, this package checks all the boxes.
Let me walk you through everything. By the end, you'll know how to set it up, and why it might be the last analytics library you ever have to research.
Why Most React Analytics Setups Are Quietly Broken
Let me be blunt. If you're copy-pasting a <script> tag directly into your <head>, you're probably tracking visitors before they've consented to anything.
The old pattern looks like this:
<!-- ❌ This loads unconditionally - no consent check -->
<script src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
That script runs the moment your page loads. No consent. No gate. Just tracking.
GDPR requires explicit opt-in before you collect analytics data. Running scripts unconditionally in <head> is exactly the pattern that gets companies fined.
But here's the frustrating part I ran into: fixing this properly is hard.
You either wire up a custom consent state for every project (tedious and error-prone), pay for a third-party consent platform like Cookiebot (not cheap), or use a solution that only works with one framework or one analytics provider.
None of those felt right. I wanted something free, typed, and built for modern React from the ground up.
That's exactly what @power-seo/tracking is.
What Is @power-seo/tracking
@power-seo/tracking is a consent-aware analytics toolkit for TypeScript. It lets you build typed script configs for five analytics platforms, manage GDPR consent state with a reactive store, and render consent-gated script tags and a cookie banner via drop-in React components.
The core philosophy is simple: every ScriptConfig exposes shouldLoad(consentState) - scripts never load without the correct consent category.
It supports five analytics providers out of the box:
- GA4 (Google Analytics 4)
- Microsoft Clarity
- PostHog
- Plausible Analytics
- Fathom Analytics
And it ships with zero runtime dependencies - pure TypeScript, with an optional React 18+ peer dependency for the <AnalyticsScript> and <ConsentBanner> components.
Install it in seconds:
npm install @power-seo/tracking
# or
yarn add @power-seo/tracking
# or
pnpm add @power-seo/tracking
No sign-up. No API key for the tool itself. Free forever.
How the Consent Manager Works (And Why It's Different)
Most consent tools feel like an afterthought. You manage state manually, pass it around with Context, and hope nothing breaks on re-render.
@power-seo/tracking gives you a reactive consent store called createConsentManager(). It's typed, predictable, and subscribable.
Here's what it looks like:
import { createConsentManager } from '@power-seo/tracking';
const consent = createConsentManager({ necessary: true, analytics: false });
// Grant/revoke individual categories
consent.grant('analytics');
consent.revoke('marketing');
// Grant or revoke all non-necessary categories
consent.grantAll();
consent.revokeAll();
// Read current state
const state = consent.getState();
// { necessary: true, analytics: true, marketing: false, preferences: false }
// Subscribe to changes - returns unsubscribe function
const unsubscribe = consent.onChange((newState) => {
console.log('Consent changed:', newState);
});
The defaults matter enormously here. The consent manager defaults to necessary: true and all other categories to false - satisfying GDPR opt-in requirements out of the box. You're not tracking anyone until they actively say yes.
I love the onChange() method. It returns an unsubscribe function - perfect for React's useEffect. No memory leaks. Clean and simple.
Consent Manager Methods at a Glance
| Method | Signature | Description |
|---|---|---|
grant | (category: ConsentCategory) => void | Grant a consent category |
revoke | (category: ConsentCategory) => void | Revoke a consent category |
grantAll | () => void | Grant all non-necessary categories |
revokeAll | () => void | Revoke all non-necessary categories |
getState | () => ConsentState | Get the current consent snapshot |
isGranted | (category: ConsentCategory) => boolean | Check if a category is granted |
onChange | (cb: ConsentChangeCallback) => () => void | Subscribe to changes; returns unsubscribe |
The necessary consent is always true and cannot be revoked. That's by design - necessary cookies are exempt from GDPR opt-in rules.
Quick Start: Everything Working Together
Here's the pattern that clicked for me. This is the full flow from the documentation:
import { createConsentManager, buildGA4Script, buildPlausibleScript } from '@power-seo/tracking';
// 1. Create consent manager - analytics off by default (GDPR opt-in)
const consent = createConsentManager({
necessary: true,
analytics: false,
marketing: false,
preferences: false,
});
// 2. Build script configs for your providers
const scripts = [
...buildGA4Script({ measurementId: 'G-XXXXXXX' }),
buildPlausibleScript({ domain: 'example.com' }),
];
// 3. Only load scripts where consent matches
const toLoad = scripts.filter((s) => s.shouldLoad(consent.getState()));
// toLoad → [] until analytics consent is granted
// 4. Grant consent (e.g. after user clicks "Accept All")
consent.grantAll();
const nowToLoad = scripts.filter((s) => s.shouldLoad(consent.getState()));
// nowToLoad → [GA4Script1, GA4Script2, PlausibleScript]
See what happens in step 3? Before the user accepts, toLoad is an empty array. Nothing loads. Not one byte of tracking code touches the browser until consent is explicitly granted.
That's the whole model. And it's beautiful in its simplicity.
Setting Up All Five Analytics Providers
Here's where the toolkit really earns its place. Instead of writing different init code for each platform, you use typed script builders - one consistent API for all five providers.
import {
buildGA4Script,
buildClarityScript,
buildPostHogScript,
buildPlausibleScript,
buildFathomScript,
} from '@power-seo/tracking';
const scripts = [
...buildGA4Script({ measurementId: 'G-XXXXXXX' }), // returns ScriptConfig[]
buildClarityScript({ projectId: 'abc123' }),
buildPostHogScript({ apiKey: 'phc_xxx', apiHost: 'https://app.posthog.com' }),
buildPlausibleScript({ domain: 'example.com' }),
buildFathomScript({ siteId: 'ABCDEFGH' }),
];
Notice that buildGA4Script uses the spread operator (...). That's because GA4 returns ScriptConfig[] - two script tags - one to load the library and one for the config call. The builder handles that automatically.
Every other builder returns a single ScriptConfig. Each one exposes shouldLoad(consentState) - so you can always filter the list down to only what the user has permitted.
Script Builder Reference
| Function | Config Props | Returns | Description |
|---|---|---|---|
buildGA4Script | { measurementId } | ScriptConfig[] | Google Analytics 4 (2 script tags) |
buildClarityScript | { projectId } | ScriptConfig | Microsoft Clarity |
buildPostHogScript | { apiKey, apiHost? } | ScriptConfig | PostHog |
buildPlausibleScript | { domain, customDomain? } | ScriptConfig | Plausible Analytics |
buildFathomScript | { siteId } | ScriptConfig | Fathom Analytics |
React Integration: Two Drop-In Components
If you're building with React 18+, the experience gets even smoother. Two components handle everything for you.
The AnalyticsScript Component
'use client';
import { AnalyticsScript } from '@power-seo/tracking/react';
import { buildGA4Script, createConsentManager } from '@power-seo/tracking';
const consent = createConsentManager({ necessary: true, analytics: false });
const scripts = buildGA4Script({ measurementId: 'G-XXXXXXX' });
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<html>
<head>
<AnalyticsScript scripts={scripts} consent={consent.getState()} />
</head>
<body>{children}</body>
</html>
);
}
<AnalyticsScript> renders <script> tags that pass shouldLoad(consent). If a script's consent category hasn't been granted, it simply doesn't render. No conditional JSX. No custom logic. It just works.
The ConsentBanner Component
'use client';
import { ConsentBanner } from '@power-seo/tracking/react';
import { createConsentManager } from '@power-seo/tracking';
const consent = createConsentManager({ necessary: true, analytics: false });
export function CookieBanner() {
return <ConsentBanner manager={consent} privacyPolicyUrl="/privacy-policy" />;
}
<ConsentBanner> is a ready-to-use GDPR cookie banner with Accept All / Reject All wired directly to the consent manager. Drop it in your root layout. Done. No state management boilerplate required.
Reactive Consent Loading in Next.js App Router
Want fully reactive analytics that loads the moment a user accepts? Here's the pattern from the docs:
'use client';
import { useEffect, useState } from 'react';
import { createConsentManager, buildGA4Script } from '@power-seo/tracking';
const consent = createConsentManager({ necessary: true, analytics: false });
const scripts = buildGA4Script({ measurementId: 'G-XXXXXXX' });
export function AnalyticsLoader() {
const [state, setState] = useState(consent.getState());
useEffect(() => {
return consent.onChange(setState);
}, []);
const toLoad = scripts.filter((s) => s.shouldLoad(state));
// inject toLoad scripts into document.head
return null;
}
When the user clicks "Accept All," onChange fires, React state updates, and the filtered scripts load - without a page refresh. No manual DOM manipulation. The useEffect return value is the unsubscribe function, so cleanup is automatic.
Server-Side API Clients for Custom Dashboards
Here's a feature that genuinely surprised me. Most consent toolkits stop at the frontend. This one goes further.
@power-seo/tracking includes five typed API clients for querying your analytics data server-side. Use them to build custom reporting dashboards or pull stats directly into your own admin panel.
import { createGA4Client, createPlausibleClient } from '@power-seo/tracking';
// Query GA4 reports
const ga4 = createGA4Client(process.env.GA4_ACCESS_TOKEN!);
// Query Plausible stats
const plausible = createPlausibleClient(process.env.PLAUSIBLE_API_KEY!);
const stats = await plausible.getAggregate('your-site-id', '7d');
console.log(stats.visitors, stats.pageviews);
No separate SDKs to install for each platform. One toolkit, five providers, all typed.
API Client Reference
| Function | Parameters | Returns | Description |
|---|---|---|---|
createGA4Client | (accessToken: string) | GA4Client | Google Analytics 4 Data API |
createClarityClient | (apiKey: string) | ClarityClient | Microsoft Clarity API |
createPostHogClient | (apiKey: string, host?: string) | PostHogClient | PostHog API |
createPlausibleClient | (apiKey: string) | PlausibleClient | Plausible Stats API |
createFathomClient | (apiKey: string) | FathomClient | Fathom Analytics API |
Each client has methods matched to what that platform actually exposes. GA4 gets queryReport, getRealtimeReport, and getMetadata. Plausible gets getTimeseries, getBreakdown, and getAggregate. PostHog gets queryEvents, getTrends, and getFunnels. No guessing what's available.
Free React SEO Tracking Tool: Compares to the Alternatives
I spent time looking at the real alternatives. Here's my honest comparison:
| Feature | @next/third-parties | partytown | cookiebot | @power-seo/tracking |
|---|---|---|---|---|
| Typed script builders | ❌ | ❌ | ❌ | ✅ |
Consent-aware shouldLoad() | ❌ | ❌ | ✅ | ✅ |
| Built-in consent manager | ❌ | ❌ | ✅ (paid) | ✅ |
| Analytics API clients | ❌ | ❌ | ❌ | ✅ |
| 5-provider support | ⚠️ | ⚠️ | ✅ | ✅ |
| Zero runtime dependencies | ✅ | ✅ | ❌ | ✅ |
| TypeScript-first | ❌ | ❌ | ❌ | ✅ |
| React components | ⚠️ | ❌ | ✅ | ✅ |
Cookiebot charges monthly. @next/third-parties has no consent management whatsoever. partytown has no React components and limited provider support. @power-seo/tracking gives you everything - for free.
Who Should Use This
Honestly? Most React and Next.js developers who care about doing things right.
The toolkit is framework-agnostic, so the script builders and consent manager work seamlessly across Next.js, Remix, Vite, Vanilla JS, and Edge runtimes. Whether you're building a traditional web app or optimizing for Next.js SEO, the same implementation can be used without framework-specific dependencies.
It's also edge-compatible. There are no Node.js-specific APIs, which means it runs smoothly on Cloudflare Workers, Vercel Edge, and Deno environments.
On top of that, it's fully tree-shakeable. Import only buildGA4Script and createConsentManager, and that's all you'll bundle. Unused providers contribute zero bytes to your final output, helping keep performance high, an important factor for both user experience and Next.js SEO.
You'll especially want this if you:
- Run a SaaS product that needs to track users without privacy violations
- Build e-commerce stores and want Clarity session recordings with a consent gate
- Want to run GA4 + Plausible + PostHog side-by-side for data validation
- Need a custom analytics dashboard pulling data from multiple providers server-side
- Work on enterprise apps that need a full audit trail of consent events
- Build A/B testing pipelines with PostHog feature flags and consent management
Conclusion: Stop Guessing, Start Shipping Compliantly
The analytics world is tightening fast. Cookie-based tracking is under more regulatory scrutiny than ever. Scripts that load unconditionally in <head> are a compliance liability and a performance problem, since they can hurt LCP before any user interaction.
But you don't have to choose between tracking your users and respecting their privacy.
@power-seo/tracking is a free React SEO tracking tool that gives you typed script builders for five platforms, a reactive GDPR-compliant consent manager, drop-in React components, and server-side API clients, all with zero runtime dependencies.
This is the setup I'd recommend to any React or Next.js developer today. It's the tool I wish existed two years ago.
Get started now:
npm install @power-seo/tracking
For React components, React 18+ is required as a peer dependency.
GitHub: github.com/CyberCraftBD/power-seo
Frequently Asked Questions About Free React SEO Tracking Tool
Is @power-seo/tracking really free?
Yes. It's open-source and published on npm with zero paid tiers for the core toolkit. The only requirement is React 18+ as a peer dependency if you use <AnalyticsScript> or <ConsentBanner>. The script builders, consent manager, and API clients work anywhere with no peer dependency at all.
Does it work with Next.js App Router?
Yes. The 'use client' directive examples in this article show the exact pattern for App Router layouts. The onChange() subscription pairs perfectly with useEffect and useState for reactive consent loading.
What if a user never clicks Accept or Reject?
The consent manager defaults to necessary: true and all other categories to false. Analytics scripts simply won't load. The visitor's session stays private until they make an active choice. That's correct GDPR opt-in behavior - nothing loads without explicit permission.
Can I use just one analytics provider?
Yes. The package is fully tree-shakeable. Import only buildPlausibleScript and createConsentManager, and that's all you bundle. Zero dead code in your output.
FAQ
Frequently Asked Questions
We offer end-to-end digital solutions including website design & development, UI/UX design, SEO, custom ERP systems, graphics & brand identity, and digital marketing.
Timelines vary by project scope. A standard website typically takes 3-6 weeks, while complex ERP or web application projects may take 2-5 months.
Yes - we offer ongoing support and maintenance packages for all projects. Our team is available to handle updates, bug fixes, performance monitoring, and feature additions.
Absolutely. Visit our Works section to browse our portfolio of completed projects across various industries and service categories.
Simply reach out via our contact form or call us directly. We will schedule a free consultation to understand your needs and provide a tailored proposal.