@valu/tracking-blocker NPM

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();
    });
}

yett

@everything-registry/sub-chunk-977 @zalastax/nolb-_val

0.1.0

3 years ago