Merge pull request #175 from MiyashitaLab/feat/google_analytics

Google Analytics導入
MiyashitaLab · Sep 1, 2023 · 008e9ef · 008e9ef
2 parents 4379b10 + 7884f54
commit 008e9ef
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 0 deletions.
diff --git a/src/components/feature/analytics/Analytics.tsx b/src/components/feature/analytics/Analytics.tsx
@@ -0,0 +1,37 @@
+import Script from "next/script";
+import { FC } from "react";
+
+import { GOOGLE_ANALYTICS_ID } from "@/lib/environments";
+
+/**
+ * Analytics関連のスクリプトを読み込む
+ */
+export const Analytics: FC = () => {
+  //本番環境以外では読み込まない
+  if (process.env.NODE_ENV !== "production") {
+    return <></>;
+  }
+
+  if (!GOOGLE_ANALYTICS_ID) {
+    console.warn("NEXT_PUBLIC_GOOGLE_ANALYTICS_ID is not defined.");
+    return <></>;
+  }
+
+  return (
+    <>
+      {/* Google Analytics */}
+      <Script
+        src={`https://www.googletagmanager.com/gtag/js?id=${GOOGLE_ANALYTICS_ID}`}
+      />
+      <Script id="google-analytics">
+        {`
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+ 
+          gtag('config', 'GA_MEASUREMENT_ID');
+        `}
+      </Script>
+    </>
+  );
+};
diff --git a/src/components/feature/analytics/index.ts b/src/components/feature/analytics/index.ts
@@ -0,0 +1 @@
+export { Analytics } from "./Analytics";
diff --git a/src/lib/environments.ts b/src/lib/environments.ts
@@ -20,3 +20,6 @@ export const CONTENTFUL_ENVIRONMENT =
 export const ON_DEMAND_SECRET = validateEnvSet("ON_DEMAND_SECRET");
 
 export const SLACK_WEBHOOK_URL = process.env["SLACK_WEBHOOK_URL"];
+
+export const GOOGLE_ANALYTICS_ID =
+  process.env["NEXT_PUBLIC_GOOGLE_ANALYTICS_ID"];
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -1,5 +1,7 @@
 import { Html, Head, Main, NextScript } from "next/document";
 
+import { Analytics } from "@/components/feature/analytics";
+
 //ここに書いたものはstorybookでは読み込まれないので注意
 
 export default function Document() {
@@ -9,6 +11,7 @@ export default function Document() {
       <body>
         <Main />
         <NextScript />
+        <Analytics />
       </body>
     </Html>
   );