Umami working with client-side routing

[jachsu]

Describe the feature or enhancement

I'm using Umami cloud.

My website is built with Next.js, utilizing client-side routing. This means that third-party scripts, such as Umami Analytics, are currently only loaded on the initial page load or upon a refresh. Consequently, Umami Analytics fails to collect page view data when users navigate to other pages within the site.

I’m aware that some other analytics tools offer a feature where they listen to route changes, ensuring that they track the views of all visited pages dynamically.

Inquiry:
Is there any known workaround or configuration that allows Umami Analytics to track page views during client-side navigation?

[reaganmcf]

Are you using next.js's Router lib? I've never had issues

[jachsu]

Are you using next.js's Router lib? I've never had issues

I am using a nextjs template. The code indicates the navigations are implemented using tag. Maybe I should try modify the code?

[jachsu]

After investigating the Network tab, I've observed :
Initial Load: script.js is successfully loaded when the website is first accessed, and a POST request is made to /api/send.
Page Navigation: When navigating to other pages or URLs, no subsequent POST requests are made.
Any insights or suggestions on how to resolve this issue would be greatly appreciated.

[aagorelik]

For SPAs, you generally need to disable auto tracking with data-auto-track="false" in <script> and then trigger umami.track(); when need to track a page view (or send event)

[aagorelik]

For SPAs, you generally need to disable auto tracking with data-auto-track="false" in <script> and then trigger umami.track(); when need to track a page view (or send event)

Although it should track URL change automatically (if using Router?)

[krzysztof-dk]

Try loading umami tracking script script using https://nextjs.org/docs/pages/api-reference/components/script or https://nextjs.org/docs/app/api-reference/components/script

<Script
  async
  src={...}
  data-website-id={...}
/>

Next.js will trigger its own events on pathname change and load event of that Script component will be triggered which results in sending requests to Umami /api/send endpoint.