[Feature]: Allow intercepting of navigation events

[ion-willo]

What is the new or updated feature that you are suggesting?

Allow user-defined code to be executed when a navigation event occurs, either on an SSR fetch or CSR event.

Why should this feature be included?

We need to send an event to Google Tag Manager to capture page views for analytics. Once Remix has been hydrated, navigation events will happen on the client and within Remix.

[ion-willo]

After playing with it for a bit, I noticed that I can use the TransitionManager via useTransition. Adding this to App in root.tsx seems to work for client-side navigation:

  const transition = useTransition()
  if (transition.state === 'loading') {
    // Perform action using transition.location.pathname
  }

Any reason not to use this approach?

[jarimustonen]

@ion-willo Have you resolved this? How did you integrate GTM to Remix? Did you manage to get the page views integrated without creating a custom triggers?

[ion-willo]

I ended up doing this in app/root.jsx

  const navigation = useNavigation()
  useEffect(() => {
    if (navigation.state === 'loading') {
      // console.log('*** Navigating to', navigation.location?.pathname)
      // Put GTM trigger here
    }
  }, [navigation.location?.pathname])

[MaxLardenois]

Are you catching everything with this code?
If you have a <Link to=".." /> somewhere there is no navigation event fired (maybe you do not want to trigger GTM in this case so you might be good)

[ion-willo]

Mmm... relative links - no, we didn't use these. Interesting that that does not trigger a navigation event though. Is that intentional or a bug?

[MaxLardenois]

Might be intentional as there is no actual request made. I was in the process of asking the question when I saw yours.

[jarimustonen]

Great to know. I find Remix incredible, but it seems that Redix users typically do not need to integrate with Google Tag Manager. I guess typical GTM users are still using WordPress. So this discussion is precious. Thank you.

Do you use standard triggers (Page Load, etc.), or do you have to define a custom trigger? Also, please provide some example code for manually triggering a trigger.

[ion-willo]

Sorry @jarimustonen , only seeing this now. We used redux-beacon (https://www.npmjs.com/package/redux-beacon) as we needed to trigger analytics to several analytics back-ends. We're also running a PWA and redux-beacon support tracking offline stats and syncs it back up once online, although some analytics systems did not like that one bit 😄