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])