feat(website): add google analytics

agrc · Apr 29, 2024 · 29d2de3 · 29d2de3
1 parent 5eb91e7
commit 29d2de3
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 0 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -11,6 +11,7 @@
     "dataframe",
     "dataframes",
     "datetimepicker",
+    "DCLT",
     "drivername",
     "Dsplay",
     "dtypes",
@@ -31,6 +32,7 @@
     "googleapis",
     "GRAMA",
     "gserviceaccount",
+    "gtags",
     "hemionus",
     "IDFA",
     "iloc",
@@ -64,6 +66,7 @@
     "ondevice",
     "openid",
     "packagejson",
+    "pageview",
     "palletjack",
     "Podfile",
     "postgis",

diff --git a/src/website/app/root.jsx b/src/website/app/root.jsx
@@ -1,5 +1,7 @@
 import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react';
 import styles from './tailwind.css';
+import * as gtag from "~/utils/gtags.client";
+import { useEffect } from 'react';
 
 export function meta() {
   return [{ title: 'Utah Roadkill Reporter' }];
@@ -9,7 +11,16 @@ export function links() {
   return [{ rel: 'stylesheet', href: styles }];
 }
 
+const gaTrackingId = 'G-P135E0DCLT';
+
 export default function App() {
+
+  useEffect(() => {
+    if (gaTrackingId?.length) {
+      gtag.pageview(location.pathname, gaTrackingId);
+    }
+  }, []);
+
   return (
     <html lang="en">
       <head>
@@ -18,6 +29,29 @@ export default function App() {
         <Meta />
         <Links />
       </head>
+      {process.env.NODE_ENV === "development" || !gaTrackingId ? null : (
+          <>
+            <script
+              async
+              src={`https://www.googletagmanager.com/gtag/js?id=${gaTrackingId}`}
+            />
+            <script
+              async
+              id="gtag-init"
+              dangerouslySetInnerHTML={{
+                __html: `
+                window.dataLayer = window.dataLayer || [];
+                function gtag(){dataLayer.push(arguments);}
+                gtag('js', new Date());
+
+                gtag('config', '${gaTrackingId}', {
+                  page_path: window.location.pathname,
+                });
+              `,
+              }}
+            />
+          </>
+        )}
       <body className="p-10 font-sans text-gray-700">
         <Outlet />
         <ScrollRestoration />

diff --git a/src/website/app/utils/gtags.client.js b/src/website/app/utils/gtags.client.js
@@ -0,0 +1,40 @@
+// ref: https://github.com/remix-run/examples/tree/main/google-analytics
+
+/**
+ * @example
+ * https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+ */
+export const pageview = (url, trackingId) => {
+  if (!window.gtag) {
+    console.warn(
+      "window.gtag is not defined. This could mean your google analytics script has not loaded on the page yet.",
+    );
+    return;
+  }
+  window.gtag("config", trackingId, {
+    page_path: url,
+  });
+};
+
+/**
+ * @example
+ * https://developers.google.com/analytics/devguides/collection/gtagjs/events
+ */
+export const event = ({
+  action,
+  category,
+  label,
+  value,
+}) => {
+  if (!window.gtag) {
+    console.warn(
+      "window.gtag is not defined. This could mean your google analytics script has not loaded on the page yet.",
+    );
+    return;
+  }
+  window.gtag("event", action, {
+    event_category: category,
+    event_label: label,
+    value: value,
+  });
+};