イベントの設定

src/components/achievements/Card.tsx

@@ -1,6 +1,8 @@
 import { Avatar, Flex, Text } from "@radix-ui/themes";
 import { type ReactElement } from "react";
+import { useLocation } from "react-router-dom";
 import styled from "styled-components";
+import { sendAnalytics } from "@/lib/utils/analytics";
 import { useNavigate } from "@/router";
 import { type Achievement } from "@/types/post-data/achievements";
 
@@ -56,11 +58,13 @@ export function AchievementCard({
   achievement: Achievement;
 }): ReactElement {
   const navigate = useNavigate();
+  const url = useLocation().pathname;
 
   return (
     <CardStyle
       align="center"
       onClick={() => {
+        sendAnalytics("achievementDetail", url);
         navigate("/achievements/:id", {
           params: {
             id: achievement.id.toString(),

src/components/member/Card.tsx

@@ -1,6 +1,8 @@
 import { Avatar, Flex, Text } from "@radix-ui/themes";
 import { type ReactElement } from "react";
+import { useLocation } from "react-router-dom";
 import styled from "styled-components";
+import { sendAnalytics } from "@/lib/utils/analytics";
 import { useNavigate } from "@/router";
 import { type Member } from "@/types/member";
 
@@ -48,6 +50,7 @@ export function MemberCard({
   point?: number;
 }): ReactElement {
   const navigate = useNavigate();
+  const url = useLocation().pathname;
 
   return (
     <CardStyle
@@ -56,6 +59,7 @@ export function MemberCard({
         if (member.email == null) {
           throw new Error("Member email is undefined");
         }
+        sendAnalytics("memberDetail", url);
         navigate("/members/:id", {
           params: {
             id: member.email,

src/components/member/RankingCard.tsx

@@ -1,6 +1,8 @@
 import { Avatar, Box, Flex, Text } from "@radix-ui/themes";
 import { type ReactElement } from "react";
+import { useLocation } from "react-router-dom";
 import styled from "styled-components";
+import { sendAnalytics } from "@/lib/utils/analytics";
 import { Link } from "@/router";
 import { type Member } from "@/types/member";
 
@@ -32,12 +34,19 @@ export function RankingCard({
   index: number;
 }): ReactElement {
   const { name, email, icon } = member;
+  const url = useLocation().pathname;
 
   if (email == null) throw new Error("email is null");
 
   return (
     <BoxStyle>
-      <Link params={{ id: email }} to="/members/:id">
+      <Link
+        onClick={() => {
+          sendAnalytics("memberDetail", url);
+        }}
+        params={{ id: email }}
+        to="/members/:id"
+      >
         <Flex align="center" gap="6" ml="6rem">
           <Text mr="2rem" size="8" weight="bold">
             {index + 1}

src/lib/utils/analytics.ts

@@ -0,0 +1,12 @@
+export function sendAnalytics(
+  eventName: "unlock" | "achievementDetail" | "memberDetail" | "",
+  url: string,
+): void {
+  window.gtag("event", eventName, {
+    items: [
+      {
+        item_id: url,
+      },
+    ],
+  });
+}

src/pages/unlocked/index.tsx

@@ -1,5 +1,6 @@
 import { Box } from "@radix-ui/themes";
 import { useState, type ReactElement } from "react";
+import { useLocation } from "react-router-dom";
 import styled from "styled-components";
 import useSWRImmutable from "swr/immutable";
 import { match } from "ts-pattern";
@@ -10,6 +11,7 @@ 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";
@@ -22,6 +24,7 @@ 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 } =
@@ -58,6 +61,7 @@ export default function Page(): ReactElement {
               ({ achievementID: id }) => id !== targetAchievementId,
             ),
       );
+      sendAnalytics("unlock", url);
       await mutate();
     } finally {
       setIsUILocked(false);