Adding Umami to Astro

[Ali-Hussein-dev]

My issue is the views are only for the root page "/" and other pages are being tracked.

Here is my current Implementation:

// astro.config.js
head: {
  tag: "script",
  attrs: {
    src: "...",
    "data-website-id": "...",
    defer: true,
  },
},

[pat-s]

I don't have a solution (yet), but it appears to be caused by Astros routing: when you change to a different webpage, Astro won't trigger a full page load (you can see that the page in the network tab is still pointing to the initial one when entering the website).

Only when performing a full page reload on that new page, this is then reflected in the network tab as well and captured by Umami.

[pat-s]

Found a way to make it work, thanks to a person helping me on the Astro Discord:

1. You're likely using View-Transitions. These are preventing a full page reload when you switch pages.
2. To force a page reload after a transition, one can use data-astro-rerun. This will then successfully run the .js scripts on a page-reload event and track the visit.

Full example:

<script async is:inline data-astro-rerun src="<src>" data-website-id=<id></script>

[yeskunall]

If you’re not too keen on forcing the script to re-execute after every transition, then you can opt-in to use Astro’s astro:page-load lifecycle event:

document.addEventListener("astro:page-load", () => {
  // Run after every additional navigation by Astro
  void window.umami.track((props) => ({ ...props }));
});

For good DX, you might also want to (p|npm) add --save-dev @types/umami so the above code-block won’t complain.

---

Shameless plug: you could also use @yeskunall/astro-umami.