# Matomo Analytics

The c15t matomoAnalytics helper loads Matomo only after visitors allow measurement in Inth. With defaultConsent, it loads Matomo on each page and drives the Matomo consent API instead.

## Key facts

- **Tool:** Matomo Analytics
- **Category:** Analytics
- **Consent categories:** Measurement
- **Setup method:** c15t package
- **Package:** @c15t/integrations

## Links

- [Documentation](https://c15t.com/docs/integrations/matomo-analytics)
- [Matomo Analytics](https://matomo.org/)

Keep Matomo off the page until visitors allow measurement. Or load it on each page and let the Matomo consent API hold data until they agree.

Inth keeps the consent record of each choice, with the visitor’s country and the policy that applied.

[Start for free](/dashboard/sign-up)

## Before you start

You need an Inth project that connects to your app and c15t in that app. You also need the site ID and Matomo URL from your Matomo snippet. For Matomo Cloud, use your cloud ID.

New to c15t? Complete the quickstart for your framework first. Keep its Inth endpoint, policy, styles and consent UI.

[Open the quickstart for your framework](https://c15t.com/docs/frameworks)

## How consent gets to Matomo

By default, the c15t matomoAnalytics helper loads matomo.js only after measurement has permission. In this mode, it sends no consent signal to Matomo.

Set defaultConsent to required or given to use the Matomo consent mode. Then matomo.js loads on each page. The helper calls requireConsent before a choice, setConsentGiven after permission and forgetConsentGiven after withdrawal.

In both consent modes, Matomo sends no hits until setConsentGiven. The helper sends another page view only when measurement changes from denied to allowed.

disableCookies stops Matomo cookies. It does not change when Matomo loads.

[Read Matomo's guide to tracking consent](https://developer.matomo.org/guides/tracking-consent)

## Installation

This guide uses the helper default. To load Matomo on each page and use its consent API, add defaultConsent: 'required'.

### Wait for permission

With defaultConsent omitted, no request goes to Matomo until the visitor accepts measurement.

```ts
matomoAnalytics({ matomoUrl, siteId })
```

An opt-out policy or no policy gives optional categories permission before a choice. Then Matomo loads on the first page. This guide uses an opt-in policy.

## Setup steps

#### Install the integration package

Add the helpers next to c15t. An import alone does not start the Matomo tracker.

```
pnpm add @c15t/integrations
```

#### Add your Matomo URL and site ID

The helper loads matomo.js from your Matomo URL and sends hits to matomo.php there. For Matomo Cloud, pass cloudId instead of matomoUrl.

```
import { matomoAnalytics } from '@c15t/integrations/matomo-analytics';

export const scripts = [
  matomoAnalytics({ matomoUrl: 'https://analytics.example.com', siteId: 1 }),
];
```

Without matomoUrl or cloudId, set both trackerUrl and scriptUrl. Otherwise the helper logs an error, and the script does not load.

### Register it with your existing setup

#### Next.js

Add scripts to c15t.config.ts, next to next.config.ts. Keep the rest of your config, such as mode, in the same call. App Router, Pages Router and static export read the same file.

```
import { defineConsentConfig } from 'c15t/next';
import { scripts } from './src/consent-scripts';

export default defineConsentConfig({ scripts });
```

#### TanStack Start

Pass scripts to the ConsentRoot in your root route. Import helpers in the route module, not in a server function: script configurations carry callbacks.

```
import { scripts } from '../consent-scripts';

<ConsentRoot state={consent} scripts={scripts}>
```

#### React

Add scripts to the options of your ConsentProvider, next to mode. Keep the banner, dialog and preferences link inside the provider.

```
import { scripts } from './consent-scripts';

<ConsentProvider options={{ mode, scripts }}>
```

#### Nuxt

Register scripts under the c15t key in app.config.ts. Keep them out of nuxt.config.ts, which reaches the browser as JSON and drops the helper callbacks.

```
import { scripts } from '../src/consent-scripts';

export default defineAppConfig({
  c15t: { scripts },
});
```

#### Vue

Pass scripts to the c15tVue plugin call you have now. The plugin starts one script loader when the app mounts.

```
import { c15tVue, manifest } from 'c15t/vue/vue-plugin';
import { scripts } from './consent-scripts';

app.use(c15tVue, {
  mode: manifest(),
  scripts,
});
```

#### Astro

Add scripts to the client entrypoint, which the integration finds on its own. Keep helpers out of astro.config.mjs: its options are serialized into the page.

```
import type { C15tClientOptionsExtension } from 'c15t/astro';
import { scripts } from './consent-scripts';

export default { scripts } satisfies C15tClientOptionsExtension;
```

#### Svelte

Pass scripts as a prop to the ConsentProvider you have now. The provider owns the loader and disposes it on unmount.

```
<script lang="ts">
  import { ConsentProvider, manifest } from 'c15t/svelte';
  import { scripts } from './consent-scripts';
</script>

<ConsentProvider mode={manifest()} {scripts}>
  <!-- Your app and consent UI -->
</ConsentProvider>
```

#### SvelteKit

Add scripts to the ConsentRoot in the root layout. Import helpers in the layout component, not in +layout.server.ts: a server load cannot send functions to the browser.

```
<script lang="ts">
  import { ConsentRoot } from 'c15t/svelte';
  import { scripts } from '../consent-scripts';

  let { children, data } = $props();
</script>

<ConsentRoot state={data.consent} {scripts}>
  {@render children()}
</ConsentRoot>
```

#### HTML: Paste the vendor’s snippet behind consent

The helpers need a bundler. On a page with the c15t script tag, paste the vendor’s own snippet instead and keep it inert until visitors allow its category. Helper options, such as loadMode, do not apply.

```
<script type="text/plain" data-c15t-category="measurement">
  // The vendor's snippet, unchanged
</script>
```

#### JavaScript

Pass scripts to init() from @c15t/browser, next to your mode. With createConsentRuntime, pass scripts to it instead.

```
import { init, manifest } from '@c15t/browser';
import { scripts } from './consent-scripts';

const consent = init({
  mode: manifest(),
  scripts,
});
```

Remove the old Matomo tracking code, so Matomo loads only through c15t. If you already have a scripts array, add the helper to it.

## Verify your setup

These checks use the helper default and an opt-in policy. Open a private window and DevTools Network, and filter by matomo. Then test the three states.

- **Before a choice**: matomo.js does not load and no matomo.php request goes out.

- **After you allow measurement**: matomo.js loads without a page reload. A matomo.php request sends the page view.

- **After you withdraw measurement**: Save your choice. c15t reloads the page. The new page sends no request to Matomo.

With defaultConsent: 'required', matomo.js loads before a choice, but no matomo.php request goes out until the visitor allows measurement. Test that mode on its own.

[Open the full Matomo guide](https://c15t.com/docs/integrations/matomo-analytics)

## Related guides

- [OneDollarStats](/integrations/one-dollar-stats)

- [Pirsch](/integrations/pirsch)

- [Plausible Analytics](/integrations/plausible-analytics)