How to provide custom names for page view events in Azure App Insights?

Question

By default App Insights use page title as event name. Having dynamic page names, like \"Order 32424\", creates insane amount of event types.

Documentation on the mat

Answer 1

Here's one work-around, if you're using templates to render your /orders/12345 pages:

appInsights.trackPageView({name: TEMPLATE_NAME });

Another option, perhaps better suited for a SPA with react-router:

const Tracker = () => {
  let {pathname} = useLocation();
  pathname = pathname.replace(/([/]orders[/])([^/]+), "$1*");  // handle /orders/NN/whatever
  pathname = pathname.replace(/([/]foo[/]bar[/])([^/]+)(.*)/, "$1*");  // handle /foo/bar/NN/whatever
  useEffect(() => {
    appInsights.trackPageView({uri: pathname});
  }, [pathname]);
  return null;
}