Tracking Blocker
Implement GDPR cookie consents.
Uses yett for script blocking and custom implementation for iframe blocking.
Setup
npm install @valu/tracking-blocker
Traditional sites
Load node_modules/@valu/tracking-blocker/dist/tb-head.min.js before any
scripts or iframes that send tracking beacons.
Next.js
In _document.tsx:
import Document, { Head, Html, Main, NextScript } from "next/document";
import { TrackingBlocker } from "@valu/tracking-blocker/react-ssr";
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<TrackingBlocker
scriptWhitelist={[/allow\.example/]}
></TrackingBlocker>
<script
dangerouslySetInnerHTML={{
__html: `/* whatever tracking codes */`,
}}
></script>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;React API
import { useTrackingBlocker } from "@valu/tracking-blocker/react";
function TrackingConsent() {
const [blocked, api] = useTrackingBlocker();
if (!blocked) {
return null;
}
return (
<div>
<p>We use cookies.</p>
<button onClick={api.unblock}>OK</button>
</div>
);
}Global API
To be used with traditional websites
if (TB.isBlocked()) {
$("#consent-prompt").show();
$("#consent-prompt button").on("click", () => {
TB.unblock();
});
}