kbase · dakotablair · Nov 29, 2023 · Nov 28, 2023 · Nov 28, 2023 · Nov 28, 2023
diff --git a/public/index.html b/public/index.html
@@ -1,6 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-KXZCE6YQFZ"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', 'G-KXZCE6YQFZ', { send_page_view: false });
+    </script>
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <link rel="icon" href="https://www.kbase.us/wp-content/uploads/sites/6/2020/08/kbase-favicon-32-bgwhite_rounded_corners.png" sizes="192x192" />
     <link rel="apple-touch-icon" href="https://www.kbase.us/wp-content/uploads/sites/6/2020/08/kbase-favicon-32-bgwhite_rounded_corners.png" />

diff --git a/src/app/Routes.tsx b/src/app/Routes.tsx
@@ -22,13 +22,18 @@ import {
   detailPath,
   detailDataProductPath,
 } from '../features/collections/Collections';
-import { useAppSelector, useFilteredParams } from '../common/hooks';
+import {
+  useAppSelector,
+  useFilteredParams,
+  usePageTracking,
+} from '../common/hooks';
 
 export const LOGIN_ROUTE = '/legacy/login';
 export const ROOT_REDIRECT_ROUTE = '/narratives';
 
 const Routes: FC = () => {
   useFilteredParams();
+  usePageTracking();
   return (
     <RRRoutes>
       <Route path={`${LEGACY_BASE_ROUTE}/*`} element={<Legacy />} />

diff --git a/src/common/hooks.ts b/src/common/hooks.ts
@@ -4,12 +4,18 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
 import { useLocation, useNavigate } from 'react-router-dom';
 import type { RootState, AppDispatch } from '../app/store';
+import { authMe } from '../features/auth/authSlice';
 import {
   generatePathWithSearchParams,
   isValidParam,
   setParams,
 } from '../features/params/paramsSlice';
 
+declare global {
+  interface Window {
+    gtag: Function;
+  }
+}
 // Use throughout the app instead of plain `useDispatch` and `useSelector`
 export const useAppDispatch = () => useDispatch<AppDispatch>();
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
@@ -88,3 +94,20 @@ export const useFilteredParams = () => {
   }, [check.length, dispatch, loc.pathname, navigate, paramsFiltered]);
   return paramsFiltered;
 };
+
+export const usePageTracking = () => {
+  const location = useLocation();
+  const me = useAppSelector(authMe);
+
+  useEffect(() => {
+    const pageView: Record<string, string> = {
+      page_path: location.pathname + location.search + location.hash,
+      page_search: location.search,
+      page_hash: location.hash,
+    };
+    if (me && me.anonid) {
+      pageView.user_id = me.anonid;
+    }
+    window.gtag('event', 'page_view', pageView);
+  }, [location, me]);
+};
diff --git a/src/features/navigator/Navigator.test.tsx b/src/features/navigator/Navigator.test.tsx
@@ -71,6 +71,7 @@ const logError = (error: Error, info: { componentStack: string }) => {
 describe('The <Navigator /> component...', () => {
   beforeAll(() => {
     enableFetchMocks();
+    window.gtag = jest.fn();
   });
 
   afterAll(() => {

diff --git a/src/features/profile/Profile.test.tsx b/src/features/profile/Profile.test.tsx
@@ -81,6 +81,7 @@ consoleError.mockImplementation(() => {});
 describe('Profile related components', () => {
   beforeAll(() => {
     enableFetchMocks();
+    window.gtag = jest.fn();
   });
   afterAll(() => {
     consoleError.mockRestore();