設定忘れ

src/lib/utils/analytics.ts

@@ -1,12 +1,18 @@
-export function sendAnalytics(
-  eventName: "unlock" | "achievementDetail" | "memberDetail" | "",
-  url: string,
-): void {
-  window.gtag("event", eventName, {
-    items: [
-      {
-        item_id: url,
-      },
-    ],
-  });
-}
+import { useEffect } from "react";
+import ReactGA from "react-ga4";
+import { useLocation } from "react-router-dom";
+
+export const usePageTracking = (): void => {
+  const location = useLocation();
+
+  useEffect(() => {
+    // Google Analytics 測定 ID を入力して設定
+    ReactGA.initialize("G-8KV8Z5BX8M");
+    ReactGA.send({
+      hitType: "pageview",
+      // アクセスしたパス (pathname) とクエリ文字列 (search) を送付する (必要に応じて編集する)
+      page: location.pathname + location.search,
+    });
+  }, [location]);
+};
+

src/pages/_app.tsx

@@ -8,7 +8,7 @@ import { Expanded } from "@/components/Expanded";
 import { Footer } from "@/components/Footer";
 import { Header } from "@/components/Header";
 import { Redirects } from "@/components/Redirects";
-
+import { usePageTracking } from "@/lib/utils/analytics";
 import "the-new-css-reset/css/reset.css";
 import "@radix-ui/themes/styles.css";
 import "@fontsource-variable/noto-sans-jp";
@@ -60,6 +60,7 @@ const ThemeStyle = styled(Theme)`
 `;
 
 export default function Layout(): ReactElement {
+  usePageTracking();
   return (
     <ThemeStyle>
       <Main>

src/pages/unlocked/index.tsx

@@ -1,5 +1,6 @@
 import { Box } from "@radix-ui/themes";
 import { useState, type ReactElement } from "react";
+import ReactGA from "react-ga4";
 import { useLocation } from "react-router-dom";
 import styled from "styled-components";
 import useSWRImmutable from "swr/immutable";
@@ -11,7 +12,6 @@ import { useUnlockedAchievements } from "@/hooks/db/unlocked-achievements";
 import { useMember } from "@/hooks/member";
 import { useTeam } from "@/hooks/teams";
 import { S } from "@/lib/consts";
-import { sendAnalytics } from "@/lib/utils/analytics";
 import { handleSWRError } from "@/lib/utils/swr";
 import { type CurrentMember } from "@/types/member";
 import { type Achievement } from "@/types/post-data/achievements";
@@ -24,7 +24,6 @@ const BoxStyle = styled(Box)`
 `;
 
 export default function Page(): ReactElement {
-  const url = useLocation().pathname;
   const { fetchCurrentMember } = useMember();
   const { fetch: fetchAchievements } = useAchievements(useTeam);
   const { fetch: fetchUnlockedAchievements, update } =
@@ -61,7 +60,7 @@ export default function Page(): ReactElement {
               ({ achievementID: id }) => id !== targetAchievementId,
             ),
       );
-      sendAnalytics("unlock", url);
+      ReactGA.event("unlocked achievement");
       await mutate();
     } finally {
       setIsUILocked(false);