Tracking Dynamic URLs in Analytics: Normalizing Page Names
I added the track_pageview:url-with-path-and-query-string option to track pages that users view. This method collects all dynamic URLs, including user-generated content pages. However, this makes it difficult to analyze pages of the same type (e.g., all detail pages) as a single group, so I'm using a DYNAMIC_PAGE array to define path patterns and a getPageNameFromPath function to normalize page names. For example, URLs like '/seeks/123' and '/seeks/456' are all being tracked as a single page type called 'seeks/detail'. I'd like to confirm if this approach is heading in the right direction
const DYNAMIC_PAGE = [
{ path: '/seeks/', format: (path: string) => `${path}detail` }, //seeks/@recruitmentId
{ path: '/portfolio/bookmarks/', format: (path: string) => `${path}detail` }, //portfolio/bookmarks/@groupId
{ path: '/point/charge/', format: (path: string) => `${path}detail` },
];
const getPageNameFromPath = (pathname: string) => {
const cleanPath = pathname.includes('?') ? pathname.split('?')[0] : pathname;
const segments = cleanPath.split('/').filter(Boolean);
if (segments[0]?.startsWith('@')) {
return segments.length > 1 ? 'portfolio_detail' : 'user_profile';
}
const dynamicRoute = DYNAMIC_PAGE.find(({ path }) => cleanPath.startsWith(path));
if (dynamicRoute) {
return dynamicRoute.format(dynamicRoute.path);
}
};
React.useEffect(() => {
Analytics.track_pageview({
page_title: title,
page: getPageNameFromPath(pathname) ?? pathname,
});
}, [pathname]);