Does `trackPageview` tracks the page `searchParams`?

[ElRodrigote]

Hi there!

Currently we created a hook to register and submit the URL pages with fathom-client

Our current relevant dependencies and versions:

    "fathom-client": "^3.7.0",
    "next": "14.1.3",    
    "react": "^18",
    "react-dom": "^18",

Our current implementation for this hook:

import { usePathname, useSearchParams } from 'next/navigation';
import { useEffect } from 'react';
import * as Fathom from 'fathom-client';

export function useAnalytics() {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    if (!pathname) return;

    const host = window.location.host;
    const protocol = window.location.protocol;
    const search = searchParams.toString();
    const fullPath = `${pathname}${search ? `?${search}` : ''}`;

    const url = `${protocol}//${host}${fullPath}`;

    Fathom.trackPageview({ url });
  }, [pathname, searchParams]);

  if (typeof window === 'undefined') return;

  Fathom.load(FATHOM_KEY, {
    includedDomains: APP_DOMAINS.split(','),
  });
}

The issue we're facing now is our app dashboard not logging the search params for the pages the user visits.
So for example if an user visits /path/to/url?id=$id, we're only getting /path/to/url registered in the dashboard.

Not sure what we're doing wrong here. If anybody has a clue around this, would be awesome to hear about it <3

Thanks!
Rorry.

[adamJLev]

same issue here, and also surprised to see that the example in their readme doesnt include the ? so it all just looks like a giant path in the dashboard
https://github.com/derrickreimer/fathom-client?tab=readme-ov-file#using-the-experimental-app-directory-v13

[adamJLev]

Inspecting the JS request in webtools , I can see that the fathom client is actually stripping away the query string:

Page: http://localhost:3001/?param=1
Result:

[derrickreimer]

Hey folks, this library is not doing any URL modification itself (it just accepts whatever url prop gets passed to it, or else uses the current URL for the page at the time that trackPageview gets called).

The README instructions for Next.js were borrowed from the guide published by Vercel (https://vercel.com/guides/deploying-nextjs-using-fathom-analytics-with-vercel) — there's been quite a bit or volatility with Next.js over the past few years, feels like stuff just keeps changing 😅 so it's possible that this is not properly appending the search params as intended:

    trackPageview({
      url: pathname + searchParams?.toString(),
      referrer: document.referrer
    });

By chance, have you reached out to Fathom support about query string support? I'm a user of Fathom as well and I don't recall ever seeing query params in my dashboard either — perhaps they just never show those? /cc @JackEllis

[adamJLev]

thanks for clarifying, I digged in a bit more and indeed I can confirm the querystring is being stripped in the fathom JS: https://cdn.usefathom.com/script.js

its stripping all querystring params besides those in a short hardcoded list in there, which seems quite opinionated on their part.

Relevant part:
https://gist.github.com/adamJLev/13e33aa57d985094b180f90e9f6f8cdd#file-fathom-js-L89

I might reach out to them and ask for workarounds, but Im guessing they do this because they dont have any good support for filtering urls by query params in the dashboard, so basically every URL gets treated as unique if it has one of those params in their short list.

thx @derrickreimer !

[adamJLev]

also in case it helps anyone else, it looks like the fantom.js is also ignoring the URL you pass it, and its simply grabbing location.pathname every time. So technically at least with the version thats published on their cdn now, no matter what you pass, it'll ignore that and grab it from window.location anyway

https://gist.github.com/adamJLev/13e33aa57d985094b180f90e9f6f8cdd#file-fathom-js-L165

[derrickreimer]

Glad we got to the bottom it!