re-implement google analytics

2024-05-11 05:55:08 +00:00 · 2021-01-10 01:14:57 -07:00
parent ccf9bb1fc0
commit 4137286ca4
11 changed files with 148 additions and 14 deletions
--- a/hyperglass/ui/hooks/useGoogleAnalytics.tsx
+++ b/hyperglass/ui/hooks/useGoogleAnalytics.tsx
@@ -0,0 +1,81 @@
+import { useCallback } from 'react';
+import { createState, useState } from '@hookstate/core';
+import * as ReactGA from 'react-ga';
+
+import type { GAEffect, GAReturn } from './types';
+
+const enabledState = createState<boolean>(false);
+
+export function useGoogleAnalytics(): GAReturn {
+  const enabled = useState<boolean>(enabledState);
+
+  const useAnalytics = useCallback((effect: GAEffect): void => {
+    if (typeof window !== 'undefined' && enabled.value) {
+      if (typeof effect === 'function') {
+        effect(ReactGA);
+      }
+    }
+  }, []);
+
+  const trackEvent = useCallback((e: ReactGA.EventArgs) => {
+    useAnalytics(ga => {
+      if (process.env.NODE_ENV === 'production') {
+        ga.event(e);
+      } else {
+        console.log(
+          `%cEvent %c${JSON.stringify(e)}`,
+          'background: green; color: black; padding: 0.5rem; font-size: 0.75rem;',
+          'background: black; color: green; padding: 0.5rem; font-size: 0.75rem; font-weight: bold;',
+        );
+      }
+    });
+  }, []);
+
+  const trackPage = useCallback((path: string) => {
+    useAnalytics(ga => {
+      if (process.env.NODE_ENV === 'production') {
+        ga.pageview(path);
+      } else {
+        console.log(
+          `%cPage View %c${path}`,
+          'background: blue; color: white; padding: 0.5rem; font-size: 0.75rem;',
+          'background: white; color: blue; padding: 0.5rem; font-size: 0.75rem; font-weight: bold;',
+        );
+      }
+    });
+  }, []);
+
+  const trackModal = useCallback((path: string) => {
+    useAnalytics(ga => {
+      if (process.env.NODE_ENV === 'production') {
+        ga.modalview(path);
+      } else {
+        console.log(
+          `%cModal View %c${path}`,
+          'background: red; color: white; padding: 0.5rem; font-size: 0.75rem;',
+          'background: white; color: red; padding: 0.5rem; font-size: 0.75rem; font-weight: bold;',
+        );
+      }
+    });
+  }, []);
+
+  const initialize = useCallback((trackingId: string, debug: boolean) => {
+    if (typeof trackingId !== 'string') {
+      return;
+    }
+
+    enabled.set(true);
+
+    const initializeOpts = { titleCase: false } as ReactGA.InitializeOptions;
+
+    if (debug) {
+      initializeOpts.debug = true;
+    }
+
+    useAnalytics(ga => {
+      ga.initialize(trackingId, initializeOpts);
+    });
+  }, []);
+
+  return { trackEvent, trackModal, trackPage, initialize, ga: ReactGA };
+}