Overriding URLs

Palette collects the pathname of each user session. This allows attributing metrics to specific pages.

It's often helpful to group together pages that share the same paramaterized URL.

For example, if you have an app that shows user profiles, such as/user/john-doe and /user/jane-doe, it's helpful to group these paths under the url /user/[name].

To do this, you can use the tag function to override the URL.

Vanilla JS

import { tag } from "@palette.dev/browser";

tag("palette.location", "/user/[name]");

Next.js

import { tag } from "@palette.dev/browser";

const useSyncRouterLocation = () => {
  const { pathname, query } = useRouter();

  useEffect(() => {
    tag("palette.location", pathname);
    Object.entries(query).forEach(([key, value]) => {
      tag(`req.query.${key}`, Array.isArray(value) ? value.join(",") : value ?? "");
    });
  }, [pathname, query]);
};

const MyApp = () => {
  useSyncRouterLocation();

  // ...
};