Feat: GoogleAnalytics, Clarity 도입 Script 컴포넌트 (#145)

i-Dear · May 29, 2024 · 45c7af8 · 45c7af8
1 parent 370cb6c
commit 45c7af8
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 0 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import "./globals.css";
 import "reactflow/dist/base.css";
 import "reactflow/dist/style.css";
 import type { Metadata, Viewport } from "next";
+import Metrics from "@/metrics";
 
 export const metadata: Metadata = {
   title: "Sync-D",
@@ -25,6 +26,7 @@ export default function RootLayout({
   return (
     <html lang="ko">
       <body>{children}</body>
+      <Metrics />
     </html>
   );
 }
diff --git a/src/metrics/GoogleAnalytics.tsx b/src/metrics/GoogleAnalytics.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import Script from "next/script";
+
+const GoogleAnalytics = () => {
+  return (
+    <>
+      <Script
+        strategy="afterInteractive"
+        src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`}
+      />
+      <Script
+        id="google-analytics-init"
+        strategy="afterInteractive"
+        dangerouslySetInnerHTML={{
+          __html: `
+                    window.dataLayer = window.dataLayer || [];
+                    function gtag(){dataLayer.push(arguments);}
+                    gtag('js', new Date());
+
+                    gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}');
+                    `,
+        }}
+      />
+    </>
+  );
+};
+
+export default GoogleAnalytics;
diff --git a/src/metrics/MicrosoftClarity.tsx b/src/metrics/MicrosoftClarity.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import Script from "next/script";
+
+const MicrosoftClarity = () => {
+  return (
+    <Script
+      id="microsoft-clarity-init"
+      strategy="afterInteractive"
+      dangerouslySetInnerHTML={{
+        __html: `
+        (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", "${process.env.NEXT_PUBLIC_MICROSOFT_CLARITY_ID}");
+            `,
+      }}
+    />
+  );
+};
+
+export default MicrosoftClarity;
diff --git a/src/metrics/index.tsx b/src/metrics/index.tsx
@@ -0,0 +1,11 @@
+import GoogleAnalytics from "./GoogleAnalytics";
+import MicrosoftClarity from "./MicrosoftClarity";
+
+const Metrics = () => (
+  <>
+    <GoogleAnalytics />
+    <MicrosoftClarity />
+  </>
+);
+
+export default Metrics;