correct-apricot

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>
  );
}

// __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})
    }
  })

// 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})

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",

    "@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

5 Replies

flat-fuchsia•2mo ago

executing this in browser console does not work either

this contradicts

i can use plausible function in the browser console,

flat-fuchsia•2mo ago

this page makes it sound like it should "just work" ™ ? https://plausible.io/docs/spa-support

Single-page application support | Plausible docs

Plausible Analytics integrates automatically with modern pushState based frontend routers. If you're running a single-page application

correct-apricotOP•2mo ago

thanks for replying, what i meant with

i can use plausible function in the browser console,

is that i can see a "plausible" function on the global window object with typeof window.plausible === "function", so script is definitely loaded, it's just that calling it with appropriate args still does not register a pageview or log a network call in the network tab

flat-fuchsia•2mo ago

so what does your script do that is setting the plausible function on window?

correct-apricotOP•2mo ago

nevermind it's working now, browser extensions were blocking the requests, i didn't think they would cause a problem since plausible is self-hosted on our own subdomain, thanks for taking the time

Gaming

Programming

Help setting up Plausible analytics

Did you find this page helpful?