https://github.com/openmost/nuxt-matomo
Matomo module for Nuxt 3
https://github.com/openmost/nuxt-matomo
matomo matomo-sdk nuxt nuxt-matomo nuxt-matomo-tag-manager nuxt-module nuxt3
Last synced: about 1 year ago
JSON representation
Matomo module for Nuxt 3
- Host: GitHub
- URL: https://github.com/openmost/nuxt-matomo
- Owner: openmost
- Created: 2023-09-19T08:34:09.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-25T16:36:35.000Z (over 1 year ago)
- Last Synced: 2025-03-10T16:41:12.055Z (about 1 year ago)
- Topics: matomo, matomo-sdk, nuxt, nuxt-matomo, nuxt-matomo-tag-manager, nuxt-module, nuxt3
- Language: TypeScript
- Homepage: https://openmost.io/products/nuxt-matomo/
- Size: 765 KB
- Stars: 4
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Matomo for Nuxt
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]
- [✨ Release Notes](/CHANGELOG.md)
## Quick Setup
1. Add `@openmost/nuxt-matomo` dependency to your project
```bash
# Using pnpm
pnpm add @openmost/nuxt-matomo
# Using yarn
yarn add @openmost/nuxt-matomo
# Using npm
npm install @openmost/nuxt-matomo
```
2. Add `@openmost/nuxt-matomo` to the `modules` section of `nuxt.config.ts`
```javascript
export default defineNuxtConfig({
modules: [
'@openmost/nuxt-matomo'
]
})
```
3. Register config in the `matomo` section to your `nuxt.config.ts`:
```javascript
runtimeConfig: {
public: {
matomo: {
host: 'https://matomo.example.com',
containerId: 'xxxxxxxx',
},
},
}
```
4. You can override values with `.env` file:
```
NUXT_PUBLIC_MATOMO_HOST=https://matomo.example.com
NUXT_PUBLIC_MATOMO_CONTAINER_ID=xxxxxxxx
```
5. Update your Matomo page view tag configuration
As [SPA doesn't work with Matomo Tag Manager](https://developer.matomo.org/guides/spa-tracking) by default, you have to add a second trigger to your Matomo tag in the Tag Manager UI.
- Look at your Matomo Tag Manager container configuration
- Edit Matomo Analytics tag, and add a new "History change" trigger.
- Ensure that your tag has now both "Page view" AND "History change" triggers.
- Don't forget to publish a new version of your container!
## Default `dataLayer` on every pages
On every pages, the default `dataLayer` object is generated with this structure :
```javascript
dataLayer.push({
event: 'page_view',
page_url: '/', //example value
referrer_url: '/previous' //example value
})
```
## Useful composables
This module allow you to use some helpful composables, here is the list :
### Add data to your `dataLayer` with the `useDataLayerPush` composable
The `useDataLayerPush()` composable allow you to easely push data to the `dataLayer` array.
```html
Click me
function onClick(){
useDataLayerPush({
event: 'some_event',
foo: 'bar',
})
}
```
### Send events with the `useMatomoEvent` composable
The `useMatomoEvent()` composable allow you to send events to Matomo directly from your components.
It also handle custom dimension as 5th parameter (optional).
```html
Click me
function onClick(){
useMatomoEvent('Category', 'Action', 'event_name', 23, {dimension1: 'Some value'})
}
```
### Convert goals with the `useMatomoGoal` composable
The `useMatomoGoal()` composable allow you to convert goals from your components.
```html
Click me
function onClick(){
useMatomoGoal(4) // 4 is the goal ID
}
```
### Handle custom dimensions with the `useMatomoCustomDimension` composable
The `useMatomoCustomDimension()` composable allow you to send data to your custom dimensions.
```html
Click me
function onClick() {
useMatomoCustomDimension(1, 'My custom value') // 1 is the custom dimension ID
}
```
### Support custom variables with the `useMatomoCustomVariables` composable
The `useMatomoCustomVariables()` composable allow you to send data to your custom variables.
```html
Click me
function onClick() {
useMatomoCustomVariables(1, 'variable name', 'variable value', 'page')
}
```
Enjoy !
[npm-version-src]: https://img.shields.io/npm/v/@openmost/nuxt-matomo/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/@openmost/nuxt-matomo
[npm-downloads-src]: https://img.shields.io/npm/dm/@openmost/nuxt-matomo.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/@openmost/nuxt-matomo
[license-src]: https://img.shields.io/npm/l/@openmost/nuxt-matomo.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/@openmost/nuxt-matomo
[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com