umami-software / umami

Umami is a simple, fast, privacy-focused alternative to Google Analytics.
https://umami.is
MIT License
23.13k stars 4.3k forks source link

Using `data-umami-event` causes a full page reload when clicking the same route repeatedly #2949

Open AlaminPu1007 opened 2 months ago

AlaminPu1007 commented 2 months ago

Describe the Bug

When using data-umami-event on a component in a Next.js application, clicking the same route multiple times causes a full page reload instead of maintaining client-side navigation. This behavior bypasses Next.js' routing mechanism, which should prevent hard reloads when navigating to the same route.

Steps to Reproduce

  1. Add data-umami-event to a component in a Next.js application
    <Link href="/some-route" data-umami-event="button-click">Go to Route</Link>
  2. Navigate to the route by clicking the link.
  3. Click the same link again while on the same route.

Expected Behavior

Next.js should handle the navigation without triggering a hard reload, keeping the navigation smooth and client-side.

Actual Behavior

Clicking the link again causes a full page reload, even though it navigates to the same route, disrupting the expected smooth navigation flow in the application.

Environment

  1. Next.js Version - 14.2.3
  2. Umami Version - 2.11.3

Database

PostgreSQL

Which Umami version are you using? (if relevant)

2.11.3

Which browser are you using? (if relevant)

Chrome latest

mikecao commented 2 months ago

Can you try putting the attribute on a wrapper element?

<div data-umami-event="button-click">
  <Link href="/">Go to route</Link>
</div>
AlaminPu1007 commented 2 months ago

It's working after following your approach.

fra-iesus commented 1 month ago

Hi @mikecao, I'm experiencing the same issue, and I must admit that I find the suggested workaround unsatisfactory as it often leads to significant code changes in SPAs. After quickly reviewing the JavaScript part of the code, I understand the underlying reason for the problem. However, I believe it could be resolved more elegantly by utilizing navigator.sendBeacon() instead of preventing the default behavior and then manually updating location.href for non-external links. Do you happen to know who might be responsible for this part of the code and whom I could address this suggestion to? Thanks.

laurent-d commented 3 days ago

Hi @mikecao, i have the same issue on static old school html website with a ajax loading page on every pages. I try your workaround but the effect is links are no more tracked. Do you have any ideas ?