Add Privatus Analytics to Astro

Add privacy-friendly analytics to an Astro site with the @privatus/astro integration or an is:inline script in your layout, with view transitions supported.

# Add Privatus Analytics to Astro

> Add privacy-friendly analytics to an Astro site with the @privatus/astro integration or an is:inline script in your layout, with view transitions supported.

## With `@privatus/astro`

> **Warning:** `@privatus/astro` is not published on npm yet. Until it is,
> don't install a package with this name from the public registry,
> because anyone could have published it. Use the setup under
> [Without the package](#without-the-package) instead.

```sh
npm install @privatus/astro
```

```js
// astro.config.mjs
import { defineConfig } from 'astro/config'
import privatus from '@privatus/astro'

export default defineConfig({
  integrations: [privatus({ site: 'pa_YOURSITEID' })],
})
```

The integration adds a tiny loader to every page's `<head>` that installs
the queue stub and injects `pa.js` once. It works with static and SSR
output and with view transitions.

## Without the package

Add the snippet to your base layout's `<head>`:

```astro
---
// src/layouts/Base.astro
---
<html lang="en">
  <head>
    <script is:inline defer src="https://privatusanalytics.com/js/pa.js" data-site="pa_YOURSITEID"></script>
  </head>
  <body><slot /></body>
</html>
```

`is:inline` stops Astro from bundling the script, which would break the
`data-` attributes.

With `<ViewTransitions />` / `<ClientRouter />`, navigations use
`history.pushState`, which the tracker follows. Don't add
`data-astro-rerun` to the tracker script: it would load the tracker again on
every navigation.

以 Markdown 檢視

With `@privatus/astro`#

Warning: @privatus/astro is not published on npm yet. Until it is, don't install a package with this name from the public registry, because anyone could have published it. Use the setup under Without the package instead.

npm install @privatus/astro

// astro.config.mjs
import { defineConfig } from 'astro/config'
import privatus from '@privatus/astro'

export default defineConfig({
  integrations: [privatus({ site: 'pa_YOURSITEID' })],
})

The integration adds a tiny loader to every page's <head> that installs the queue stub and injects pa.js once. It works with static and SSR output and with view transitions.

Without the package#

Add the snippet to your base layout's <head>:

astro

---
// src/layouts/Base.astro
---
<html lang="en">
  <head>
    <script is:inline defer src="https://privatusanalytics.com/js/pa.js" data-site="pa_YOURSITEID"></script>
  </head>
  <body><slot /></body>
</html>

is:inline stops Astro from bundling the script, which would break the data- attributes.

With <ViewTransitions /> / <ClientRouter />, navigations use history.pushState, which the tracker follows. Don't add data-astro-rerun to the tracker script: it would load the tracker again on every navigation.

With @privatus/astro#

Without the package#

With `@privatus/astro`#