Add GA event for calculator 'donate' link click

front-seat · Jan 24, 2024 · 8f1d4d0 · 8f1d4d0
1 parent 166a926
commit 8f1d4d0
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 8 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,5 +26,8 @@
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3"
+  },
+  "devDependencies": {
+    "@types/gtag.js": "^0.0.18"
   }
 }
diff --git a/src/components/Calculator.tsx b/src/components/Calculator.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
 import type { ReactNode } from "react";
 import Button from "./Button";
 
@@ -167,6 +167,24 @@ const AllocationComponent = ({
   usd: number;
   index: number;
 }) => {
+  const handleDonateClick = useCallback(() => {
+    // @ts-ignore-next-line (see Layout.astro)
+    if (window.ga_loaded) {
+      gtag("event", "click_donate", {
+        event_category: "donation",
+        event_label: "Clicked a donation link",
+        allocation: allocation.name,
+        usd: usd,
+        url: allocation.url(usd),
+        event_callback: () => {
+          window.open(allocation.url(usd), "_blank");
+        },
+      });
+    } else {
+      window.open(allocation.url(usd), "_blank");
+    }
+  }, [allocation, usd]);
+
   return (
     <div className="flex flex-row md:space-x-8 items-start flex-wrap md:flex-nowrap">
       <P28>
@@ -185,9 +203,7 @@ const AllocationComponent = ({
       <div className="min-w-[21%] pt-6 md:pt-0">
         <Button
           title={`Donate ${formatUSD(usd, true, true)}`}
-          onClick={() => {
-            window.open(allocation.url(usd), "_blank");
-          }}
+          onClick={handleDonateClick}
           className="w-full text-[20px] leading-[28px] py-4"
         />
       </div>

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -10,8 +10,11 @@ const { title } = Astro.props;
 <html lang="en" class="bg-darkest text-medium scroll-smooth">
   <head>
     <!-- Google tag (gtag.js) -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-0VY3ZD6W1R"
-    ></script>
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-0VY3ZD6W1R"
+      onerror="window.ga_loaded=false"
+      onload="window.ga_loaded=true"></script>
     <script>
       // disable typescript checking here entirely
       // @ts-nocheck

diff --git a/tsconfig.json b/tsconfig.json
@@ -3,5 +3,6 @@
   "compilerOptions": {
     "jsx": "react-jsx",
     "jsxImportSource": "react"
-  }
-}
+  },
+  "exclude": ["node_modules", "dist"]
+}