xfox111/my-website
1
0
Fork 0
mirror of https://github.com/XFox111/my-website.git synced 2026-04-22 07:28:01 +03:00
Code Activity

fix: cookie consent tracking breaks when CDN caching is involved

Browse Source
This commit is contained in:
Eugene Fox
2024-10-24 16:20:34 +00:00
parent 5a4b67d83e
commit f2e985cfea
5 changed files with 25 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/_components/CookieBanner.tsx
+4 -1
View File
@@ -12,11 +12,14 @@ const CookieBanner: React.FC<{ askForConsent: boolean; }> = props =>
useEffect(() => useEffect(() =>
{ {
if (navigator.doNotTrack === "1")
return;
const choice = getCookieChoice(); const choice = getCookieChoice();
setVisible(choice === "none"); setVisible(choice === "none");
// Since Clarity cookies expiration dates extend well beyond 60 days, // Since Clarity cookies expiration dates extend well beyond 60 days,
// we need to terminate them manually once our consent tracking cookie expires. // we need to terminate them manually once our consent tracking cookie expired.
if (choice !== "accepted") if (choice !== "accepted")
window.clarity?.("consent", false); window.clarity?.("consent", false);
}, []); }, []);
app/_utils/analytics/server.ts
+1 -9
View File
@@ -1,5 +1,4 @@
import { unstable_noStore } from "next/cache"; import { unstable_noStore } from "next/cache";
import { headers } from "next/headers";
/** /**
* Check if Clarity is enabled * Check if Clarity is enabled
@@ -15,15 +14,8 @@ export const analyticsEnabled = (): boolean =>
* Check if Clarity requires explicit consent * Check if Clarity requires explicit consent
* @returns true if Clarity requires explicit consent * @returns true if Clarity requires explicit consent
*/ */
export const requireExcplicitConsent = (): boolean => export const requireExplicitConsent = (): boolean =>
{ {
unstable_noStore(); unstable_noStore();
return process.env.CLARITY_CONSENT === "1"; return process.env.CLARITY_CONSENT === "1";
}; };
/**
* Check if Clarity is enabled and the browser didn't send a DNT signal
* @returns true if Clarity is enabled and the browser didn't send a DNT signal
*/
export const canLoadAnalytics = (): boolean =>
analyticsEnabled() && headers().get("Dnt") !== "1";
app/attribution/page.tsx
+10 -4
View File
@@ -3,7 +3,7 @@ import Button from "@/_components/Button";
import RevokeConsentButton from "@/_components/RevokeConsentButton"; import RevokeConsentButton from "@/_components/RevokeConsentButton";
import { canonicalName, getTitle } from "@/_data/metadata"; import { canonicalName, getTitle } from "@/_data/metadata";
import ThirdPartyAttribution from "@/_data/ThirdPartyAttributiont"; import ThirdPartyAttribution from "@/_data/ThirdPartyAttributiont";
import { analyticsEnabled } from "@/_utils/analytics/server"; import { analyticsEnabled, requireExplicitConsent } from "@/_utils/analytics/server";
import { ArrowLeft24Regular, ArrowRight24Regular } from "@fluentui/react-icons"; import { ArrowLeft24Regular, ArrowRight24Regular } from "@fluentui/react-icons";
import { Metadata } from "next"; import { Metadata } from "next";
import { unstable_noStore } from "next/cache"; import { unstable_noStore } from "next/cache";
@@ -42,14 +42,20 @@ const AttributionPage: React.FC = () => (
see the <a href="https://privacy.microsoft.com/privacystatement" target="_blank">Microsoft Privacy Statement</a>. see the <a href="https://privacy.microsoft.com/privacystatement" target="_blank">Microsoft Privacy Statement</a>.
</p> </p>
<p> <p>
If the "Do Not Track" option is enabled in your browser, the website will not load any tracking code. If the "Do Not Track" option is enabled in your browser,
the website will not execute any tracking code.
</p> </p>
{ requireExplicitConsent() &&
<p> <p>
If you previously gave your consent to use cookies, you can revoke it by clicking "Revoke my consent" button on this page below (the button is available only if the consent was given). Recorded data will be deleted after 30-day retention period. If you previously gave your consent to use cookies,
you can revoke it by clicking "Revoke my consent" button on this page below
(the button is available only if the consent was given).
Recorded data will be deleted after 30-day retention period.
</p> </p>
}
<div className={ cls.buttonRow }> <div className={ cls.buttonRow }>
<RevokeConsentButton /> { requireExplicitConsent() && <RevokeConsentButton /> }
<Button appearance="secondary" <Button appearance="secondary"
href="https://learn.microsoft.com/clarity/faq#privacy" target="_blank" href="https://learn.microsoft.com/clarity/faq#privacy" target="_blank"
iconAfter={ <ArrowRight24Regular /> }> iconAfter={ <ArrowRight24Regular /> }>
app/layout.tsx
+6 -4
View File
@@ -5,7 +5,7 @@ import { PropsWithChildren } from "react";
import CookieBanner from "./_components/CookieBanner"; import CookieBanner from "./_components/CookieBanner";
import Footer from "./_components/Footer"; import Footer from "./_components/Footer";
import Header from "./_components/Header"; import Header from "./_components/Header";
import { canLoadAnalytics, requireExcplicitConsent } from "./_utils/analytics/server"; import { analyticsEnabled, requireExplicitConsent } from "./_utils/analytics/server";
import fonts from "./fonts"; import fonts from "./fonts";
import "./globals.scss"; import "./globals.scss";
@@ -23,12 +23,14 @@ export default function RootLayout(props: PropsWithChildren)
{ {
return ( return (
<html lang="en" className={ fonts.map(i => i.variable).join(" ") }> <html lang="en" className={ fonts.map(i => i.variable).join(" ") }>
{ canLoadAnalytics() && { analyticsEnabled() &&
// If "Do Not Track" is enabled, or there's no CLARITY_ID set up, we don't load any analytics
<Script id="ms-clarity" src="/clarity.js" data-id={ process.env.CLARITY_ID } /> <Script id="ms-clarity" src="/clarity.js" data-id={ process.env.CLARITY_ID } />
} }
<body> <body>
{ canLoadAnalytics() && <CookieBanner askForConsent={ requireExcplicitConsent() } /> } { analyticsEnabled() &&
<CookieBanner askForConsent={ requireExplicitConsent() } />
}
<Header /> <Header />
{ props.children } { props.children }
<Footer /> <Footer />
public/clarity.js
+2 -1
View File
@@ -30,7 +30,8 @@
/** @type {string | undefined} */ /** @type {string | undefined} */
const id = document.getElementById("ms-clarity")?.dataset.id; const id = document.getElementById("ms-clarity")?.dataset.id;
if (!id) // If "Do Not Track" is enabled, or there's no CLARITY_ID set up, we don't load any analytics
if (!id || navigator.doNotTrack === "1")
return; return;
window["clarity"] ??= function () window["clarity"] ??= function ()