Apply Google Analytics tracking #196 (#197)

* Apply Google Analytics tracking #196 Resolve #196 * Apply Google Analytics tracking #196 Resolve #196
kiwiy-is · Jul 4, 2024 · fa6c4e6 · fa6c4e6
1 parent 270b9a0
commit fa6c4e6
Show file tree

Hide file tree

Showing 3 changed files with 257 additions and 226 deletions.
diff --git a/apps/website/src/app/analytics-scripts.tsx b/apps/website/src/app/analytics-scripts.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { useSearchParams } from "next/navigation";
+import Script from "next/script";
+import React from "react";
+
+type Props = {};
+
+const AnalyticsScripts = (props: Props) => {
+  const searchParams = useSearchParams();
+
+  const noTrackingQuery = searchParams.get("no-tracking");
+  const noTracking = noTrackingQuery
+    ? decodeURIComponent(noTrackingQuery) === "true"
+    : false;
+
+  return (
+    <>
+      {process.env.NODE_ENV === "production" && !noTracking && (
+        <>
+          <Script
+            strategy="afterInteractive"
+            src={`https://www.googletagmanager.com/gtag/js?id=G-ZXQWB7MHM7`}
+          />
+          <Script id="google-analytics" strategy="afterInteractive">
+            {`
+              window.dataLayer = window.dataLayer || [];
+              function gtag(){dataLayer.push(arguments);}
+              gtag('js', new Date());
+              gtag('config', 'G-ZXQWB7MHM7');
+            `}
+          </Script>
+          <Script id="ms-clarity">
+            {`
+              (function(c,l,a,r,i,t,y){
+                c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+                t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+                y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+              })(window, document, "clarity", "script", "n0wi3fv67g");
+            `}
+          </Script>
+        </>
+      )}
+    </>
+  );
+};
+
+export default AnalyticsScripts;
diff --git a/apps/website/src/app/layout.tsx b/apps/website/src/app/layout.tsx
@@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import "ui/dist/style.css";
 import { cn } from "ui";
+import AnalyticsScripts from "./analytics-scripts";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -51,6 +52,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
+      <AnalyticsScripts />
       <body className={cn(inter.className, "antialiased")}>{children}</body>
     </html>
   );