TanStackT
TanStack•4mo ago•
5 replies
primary-violet

Help setting up Plausible analytics

i tried a lot of variations of setting up the script including using head() scripts array, they all seem to load the script and i can use plausible function in the browser console, this is the latest one i tried (directly in <head>):
// __root.tsx
function RootLayout() {
  return (
    <html lang="en">
      <head>
        <HeadContent />
<!-- self-hosted plausible -->
        <script defer data-domain="mydomain.com" src="https://analytics.mydomain.com/js/script.outbound-links.js"></script>
      </head>
      <body>
        <Outlet />
        <Toaster />
        <TanStackRouterDevtools position="bottom-right" />
        <Scripts />
      </body>
    </html>
  );
}


this doesn't work, neither for first page load nor any subsequent client navigations, even when i add this in router.tsx

// router.tsx
  router.history.subscribe(({ location }) => {
    const url = import.meta.env.VITE_FRONTEND_URL + location.href
    if (typeof (window as any).plausible === 'function') {
      (window as any).plausible('pageview', { u: url })
      console.log("Plausible:", {url})
    }
  })


still does not work in client navigations, even though i see the console logs, no network requests, plausible dashboard still says 0 pageviews, executing this in browser console does not work either
plausible("pageview", {u: window.location.href})


these are the versions i am working with in package.json:
    "@tanstack/react-router": "^1.131.27",
    "@tanstack/react-router-ssr-query": "^1.131.27",
    "@tanstack/react-start": "^1.131.27",

    "react": "^19.0.0",
    "react-dom": "^19.0.0",


any help with this is greatly appreciated
Was this page helpful?