How can I integrate Goatcounter in SvelteKit SSR with hydration? "window.addEventListener('hashchange'," seems not to work

[stephane-klein]

Hello,

I try to configure Add GoatCounter to a SPA in my SvelteKit project, here.

            window.addEventListener('hashchange', function(e) {
                console.log('ici1');
                window.goatcounter.count({
                    path: location.pathname + location.search + location.hash,
                })
            })

I don't see "ici1" in my browser console when I change pages 🤔.

Do you have any ideas for implementing this Goatcounter integration in my SvelteKit project?

Best regards,
Stéphane

[geoffrich]

Listening to the hashchange event won't work because SvelteKit does not use hash-based navigation.

I haven't tried it myself, but maybe you can use afterNavigate in your root +layout.svelte?

<script>
	import { afterNavigate } from '$app/navigation';

	afterNavigate(({ to }) => {
		const url = to?.url;
		if (url) {
			window.goatcounter.count({
				path: url.pathname + url.search + url.hash
			})
		}
	})
</script>

<slot />