detect clicks on flashcards and page view on flashcard page

nepalcodes · Jul 16, 2024 · dd28888 · dd28888
1 parent 0593e92
commit dd28888
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/nepalingo-web/src/components/Flashcard.tsx b/nepalingo-web/src/components/Flashcard.tsx
@@ -3,8 +3,16 @@ import Card from "./Card";
 import Button from "./Button";
 import useDictionary from "../hooks/useDictionary";
 import { generate } from "random-words";
+import ReactGA from "react-ga4";
 
 const Flashcard: React.FC = () => {
+  ReactGA.event({
+    category: "flash cards",
+    action: "Click",
+    value: 99, // optional, must be a number
+    nonInteraction: true, // optional, true/false
+    transport: "xhr", // optional, beacon/xhr/image
+  });
   const [word, setWord] = useState("salt");
   const [isFlipped, setIsFlipped] = useState(false);
   const { data, isLoading, error } = useDictionary({

diff --git a/nepalingo-web/src/pages/FlashcardPage.tsx b/nepalingo-web/src/pages/FlashcardPage.tsx
@@ -1,8 +1,14 @@
 import Flashcard from "../components/Flashcard";
 import Header from "../components/header/Header";
 import React from "react";
+import ReactGA from "react-ga4";
 
 const FlashcardPage: React.FC = () => {
+  ReactGA.send({
+    hitType: "pageview",
+    page: window.location.pathname,
+    title: "flashcard page",
+  });
   return (
     <>
       <Header />