Single-page apps

How the widget follows client-side navigation in React, Vue, Next.js and other single-page apps, and what to do about a missed route.

In a single-page app the URL changes without loading a new page. The widget notices, and treats each new route as a new page view:

Popups, banners and other elements it added for the previous route are removed.
Your rules are checked again against the new URL, and matching actions are applied.
A page view is recorded, and goals that match the new URL can fire.

What's detected automatically

history.pushState() and history.replaceState(), which is how React Router, Vue Router, Next.js, Nuxt, SvelteKit and Angular change routes
the browser's back and forward buttons (popstate)
hash changes (hashchange), for hash-based routers

There's nothing to set up for any of these.

Extra route-change detectors

Some sites change what's on screen without going through the History API. If route changes go unnoticed, switch on extra detectors. They're options to GeoEngage.init(), so the widget has to be started by your own code:

GeoEngage.init({
  navigation: {
    enablePolling: true,    // compare the URL on a timer…
    pollingInterval: 500,   // …every 500 ms, the default
    observeTitle: true,     // check the URL whenever <title> changes
    interceptClicks: true,  // check the URL on clicks on internal links
  },
});

All of them are off by default. Switch on only what you need: polling, in particular, keeps running for as long as the page is open.

If your router bypasses the History API entirely, call notifyRouteChange() after each route change:

myRouter.on('change', () => window.GeoEngage?.notifyRouteChange());