diff --git a/app/_components/Footer.tsx b/app/_components/Footer.tsx
index 79a59fc..9272e3e 100644
--- a/app/_components/Footer.tsx
+++ b/app/_components/Footer.tsx
@@ -1,5 +1,6 @@
import Package from "@/../package.json";
import { footerImage, nextjsLogo } from "@/_assets/illustrations";
+import { analyticsEnabled } from "@/_utils/analytics/server";
import Image from "next/image";
import Link from "next/link";
import React from "react";
@@ -14,7 +15,7 @@ const Footer: React.FC = () => (
This site was created with help of some third-party tools and services.
- { process.env.CLARITY_ID &&
+ { analyticsEnabled() &&
This site is using Microsoft Clarity for analytics purposes.
By using this site you agree that we and Microsoft can collect and use this data.
diff --git a/app/_utils/analytics/server.ts b/app/_utils/analytics/server.ts
new file mode 100644
index 0000000..bfd93cf
--- /dev/null
+++ b/app/_utils/analytics/server.ts
@@ -0,0 +1,14 @@
+import { headers } from "next/headers";
+
+/**
+ * Check if Clarity is enabled
+ * @returns true if Clarity is enabled
+ */
+export const analyticsEnabled = (): boolean => !!process.env.CLARITY_ID;
+
+/**
+ * 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";
diff --git a/app/attribution/page.tsx b/app/attribution/page.tsx
index e64cc75..c3b3614 100644
--- a/app/attribution/page.tsx
+++ b/app/attribution/page.tsx
@@ -2,6 +2,7 @@ import Package from "@/../package.json";
import Button from "@/_components/Button";
import { canonicalName, getTitle } from "@/_data/metadata";
import ThirdPartyAttribution from "@/_data/ThirdPartyAttributiont";
+import { analyticsEnabled } from "@/_utils/analytics/server";
import { ArrowLeft24Regular, ArrowRight24Regular } from "@fluentui/react-icons";
import { Metadata } from "next";
import React from "react";
@@ -23,7 +24,7 @@ const AttributionPage: React.FC = () => (
Attrubtions & information
- { process.env.CLARITY_ID &&
+ { analyticsEnabled() &&
Privacy policy
diff --git a/app/layout.tsx b/app/layout.tsx
index 728d248..3e8d7e2 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -5,6 +5,7 @@ import Script from "next/script";
import { PropsWithChildren } from "react";
import Footer from "./_components/Footer";
import Header from "./_components/Header";
+import { canLoadAnalytics } from "./_utils/analytics/server";
import fonts from "./fonts";
import "./globals.scss";
@@ -26,7 +27,7 @@ export default function RootLayout(props: PropsWithChildren)
return (
i.variable).join(" ") }>
- { headers.get("Dnt") !== "1" && process.env.CLARITY_ID &&
+ { canLoadAnalytics() &&
// If "Do Not Track" is enabled, or there's no CLARITY_ID set up, we don't load any analytics
}