Fixup duplicate calls on subsequent pages

services/app-web/src/hooks/useTealium.ts

@@ -1,8 +1,7 @@
-import { useCallback, useEffect } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 import { usePage } from '../contexts/PageContext'
-import { useCurrentRoute } from './useCurrentRoute'
 import { createScript } from './useScript'
-import { PageTitlesRecord } from '../constants/routes'
+import { PageTitlesRecord, RouteT } from '../constants/routes'
 import { useAuth } from '../contexts/AuthContext'
 import {
     CONTENT_TYPE_BY_ROUTE,
@@ -15,6 +14,8 @@ import type {
     TealiumEvent,
 } from '../constants/tealium'
 import { recordJSException } from '../otelHelpers'
+import { useLocation } from 'react-router-dom'
+import { getRouteName } from '../routeHelpers'
 
 /*
 Tealium is the data layer for Google Analytics and other data tracking at CMS
@@ -25,17 +26,16 @@ Tealium is the data layer for Google Analytics and other data tracking at CMS
     In addition, useTealium returns a function for tracking user events. See Tealium docs on tracking: https://docs.tealium.com/platforms/javascript/track/
 */
 const useTealium = (): {
-    logTealiumEvent: (linkData: TealiumLinkDataObject) => void
+    logUserEvent: (linkData: TealiumLinkDataObject) => void
 } => {
-    const { currentRoute, pathname } = useCurrentRoute()
+    const { pathname } = useLocation()
+    const currentRoute = getRouteName(pathname)
     const { heading } = usePage()
     const { loggedInUser } = useAuth()
-
-    const waitForUtag = async () => {
-        return new Promise(resolve => setTimeout(resolve, 1000));
-     }
-
-     const callUTagView = useCallback(() => {
+    const lastLoggedRoute = useRef<RouteT | 'UNKNOWN_ROUTE' | undefined>(
+        currentRoute
+    )
+    const logPageView = () => {
         const tealiumPageName = getTealiumPageName({
             heading,
             route: currentRoute,
@@ -54,15 +54,19 @@ const useTealium = (): {
             logged_in: `${Boolean(loggedInUser) ?? false}`,
         }
         utag.view(tagData)
-        console.log('utag view', tagData)
-     },[currentRoute, heading, pathname, loggedInUser])
+        lastLoggedRoute.current = currentRoute
+     }
 
     // Add Tealium setup
     // this effect should only fire on initial app load
     useEffect(() => {
-        // if (process.env.REACT_APP_STAGE_NAME === 'local') {
-        //     return
-        // }
+        if (process.env.REACT_APP_STAGE_NAME === 'local') {
+            return
+        }
+
+        const waitForUtag = async () => {
+            return new Promise(resolve => setTimeout(resolve, 1000));
+        }
 
         const tealiumEnv = getTealiumEnv(
             process.env.REACT_APP_STAGE_NAME || 'main'
@@ -111,48 +115,36 @@ const useTealium = (): {
 
         document.body.appendChild(loadTagsSnippet)
 
-
         if (!window.utag) {
-            console.log('initial load')
-            // All of this is a guardrail - protect against trying to call utag before its loaded on initial load
+            // All of this is a guardrail on initial load - protect against trying to call utag before its loaded
             waitForUtag().finally( () =>{
             if (!window.utag) {
                 recordJSException('Analytics did not load in time')
                 return
             } else {
-                callUTagView()
+                logPageView()
              }
             })
-        } else {
-            console.log('initial load')
-            callUTagView()
         }
-
         return () => {
             // document.body.removeChild(loadTagsSnippet)
             document.head.removeChild(initializeTagManagerSnippet)
         }
     }, [])
 
     // Add page view
-    // this effect should fire on each page view or if something changes about logged in user
+    // this effect should fire on each page view
     useEffect(() => {
-        // if (process.env.REACT_APP_STAGE_NAME === 'local') {
-        //     return
-        // }
-
-        // We are in a SPA page route change after initial load
-        console.log(currentRoute, loggedInUser)
-        if (window.utag && loggedInUser !== undefined) {
-            console.log('page view')
-            // callUTagView()
+        if (process.env.REACT_APP_STAGE_NAME === 'local') {
+            return
         }
 
+        if (window.utag && lastLoggedRoute.current !== currentRoute) {
+            logPageView()
+        }
+    }, [currentRoute])
 
-    }, [currentRoute, loggedInUser])
-
-    // Add user event
-    const logTealiumEvent = (linkData: {
+    const logUserEvent = (linkData: {
         tealium_event: TealiumEvent
         content_type?: string
     }) => {
@@ -177,7 +169,7 @@ const useTealium = (): {
         utag.link(tagData)
     }
 
-    return { logTealiumEvent }
+    return { logUserEvent }
 }
 
 export { useTealium }