Subscribe to router changes for analytics

[jahilldev]

I'm looking for a way to centrally define GTM dataLayer pushes based on router state changes, e.g whenever a navigation occurs. We use the dataLayer for tracking all sorts of things for observability.

What's the recommended way of achieving this with wouter?

Something like this (although the onChange property doesn't exist, I know):

<Router
  onChange={
    () => window.dataLayer.push({ event: 'navigation', /*[...]*/ })
  }
>
  {/*[...]*/}
</Router>

Perhaps this can be done via hooks?

Thanks in advance for the help

P.S: So glad we don't need to use the behemoth of react-router for simple React apps anymore! Good work!

[molefrog]

Wouter doesn't support events yet, as an alternative I can suggest listening to changes of the current location:

const [location] = useLocation()

useEffect(() => {
 // some additional logic if you want to avoid sending events on mount or duplicate events
 ... 
}, [location])

[nikita-starostin]

@molefrog @jahilldev

For similar things, when I need to perform some action on every navigation, I am using kind of monkey patching of the useLocation

export function useCustomLocation(): HookReturnValue<LocationHook> {
  const [location, setLocation] = useBrowserLocation();
  const appSetLocation = useCallback(async (to: Path, options?: { replace?: boolean }) => {
      // do whatever I want, for example override the to
       const destination = `MY_PREFIX/${to}`; 
       setLocation(destination, options);
    }
  }, [setLocation]);

  return [location, appSetLocation];
}

        <Router hook={useCustomLocation}>
{/*  when components here call useLocation the useCustomLocation will be used */}
</Router>