track flashcard buttons in google analytics

nepalcodes · Aug 4, 2024 · ef6ef5f · ef6ef5f
1 parent 537d717
commit ef6ef5f
Showing 1 changed file with 31 additions and 5 deletions.
diff --git a/nepalingo-web/src/components/Flashcard.tsx b/nepalingo-web/src/components/Flashcard.tsx
@@ -46,7 +46,6 @@ const Flashcard: React.FC = () => {
   const handleFlip = () => {
     setViewType((prevViewType) => (prevViewType + 1) % 3);
   };
-
   const handleNextWord = async () => {
     let wordArray: Array<string> = [];
     if (selectedLanguage === "Newari") {
@@ -94,7 +93,7 @@ const Flashcard: React.FC = () => {
           line
             .split(",")[0]
             .trim()
-            .replace(/(^"|"$)/g, ""),
+            .replace(/(^"|"$)/g, "")
         );
       }
     }
@@ -133,23 +132,50 @@ const Flashcard: React.FC = () => {
           <button
             disabled={isLoading}
             className="bg-white text-red-500 p-4 rounded-[16px] shadow-md hover:bg-red-500 hover:text-white flex items-center justify-center"
-            onClick={handleNextWord}
+            onClick={() => {
+              handleNextWord();
+              ReactGA.event({
+                category: "thumbs up",
+                action: "Click",
+                value: 99,
+                nonInteraction: true,
+                transport: "xhr",
+              });
+            }}
             style={{ width: "50px", height: "50px" }}
           >
             <FontAwesomeIcon icon={faThumbsDown} size="lg" />
           </button>
           <button
             disabled={isLoading}
             className="bg-white text-gray-500 p-4 rounded-[16px] shadow-md hover:bg-gray-500 hover:text-white flex items-center justify-center"
-            onClick={handleFlip}
+            onClick={() => {
+              handleFlip();
+              ReactGA.event({
+                category: "eye",
+                action: "Click",
+                value: 99,
+                nonInteraction: true,
+                transport: "xhr",
+              });
+            }}
             style={{ width: "50px", height: "50px" }}
           >
             <FontAwesomeIcon icon={faEye} size="lg" />
           </button>
           <button
             disabled={isLoading}
             className="bg-white text-green-500 p-4 rounded-[16px] shadow-md hover:bg-green-500 hover:text-white flex items-center justify-center"
-            onClick={handleNextWord}
+            onClick={() => {
+              handleNextWord();
+              ReactGA.event({
+                category: "thumbs down",
+                action: "Click",
+                value: 99,
+                nonInteraction: true,
+                transport: "xhr",
+              });
+            }}
             style={{ width: "50px", height: "50px" }}
           >
             <FontAwesomeIcon icon={faThumbsUp} size="lg" />