How to make it work with Nuxt 3?

[maxbellec]

Hello, Sorry if this question seems dumb, but I'm having a hard time getting this to work. As documented, I have my plugin in the Nuxt plugin folder.

analytics.client.ts

import VueMatomo from "vue-matomo"
import { defineNuxtPlugin } from "#app"

export default defineNuxtPlugin((nuxtApp) => {
  console.log("### analytics", nuxtApp.vueApp, VueMatomo)
  nuxtApp.vueApp.use(VueMatomo, {
    debug: true,
    host: "xxx",
    siteId: 1,
    requireConsent: false,
    // router: nuxtApp.router,
    trackInitialView: true,
  })
})

My console.log is printed to the console, so the vueApp.use(VueMatomo, ...) should be run, but nothing else happens. I had hoped the with debug: true I would have some info that matomo is starting or having issue, but I don't get anything. My Chrome plugins are disabled, and I don't have any other warning / error in the console.

Since this plugin works with Vue 3, I don't see any reason that Nuxt 3 would get in the way. I am on Nuxt 3.0.0-27420403.16e2a54 and Vue 3.2.31.

[markus-gx]

Hi @maxbellec ,

import { defineNuxtPlugin } from '#app'
import VueMatomo from 'vue-matomo'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueMatomo, {
    host: 'https://myhost.io',
    siteId: 2,
    // Enables automatically registering pageviews on the router
    router: nuxtApp.$router,
    enableLinkTracking: true,
    requireConsent: false,
    trackInitialView: true,
    disableCookies: true,
    requireCookieConsent: false,
  })
})

Works for me without any problems. U should consider to upgrade to the latest Nuxt RC too, because you are still in beta right?

[thorau]

Thanks, but how to access $matomo in a component? Following is always "undefined".

const { $matomo } = useNuxtApp()

[makerovski]

@thorau Have you found a solution for it ?

[vincent41]

Unfortunately it doesn't work somehow. Debug window doesn't open either when you write debug: true. And in Matomo I don't see any activity

[makerovski]

Hi @vincent41

I managed to make it work using Matomo as Nuxt plugin.

I have it in the plugins folder (will be automatic initialized) as matomo.client.ts

i use this configuration:

import VueMatomo from 'vue-matomo'
import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(VueMatomo, {

    router: nuxtApp.$router,
    host: 'yourHost.com',
    siteId: yourSiteID,
    enableLinkTracking: true,
    requireConsent: false,
    trackInitialView: true,
    disableCookies: false,
    requireCookieConsent: false,
    enableHeartBeatTimer: true,
    heartBeatTimerInterval: 5,
    trackerFileName: 'piwik',
    trackerUrl: 'yourUrl.php',
    trackerScriptUrl: 'yourUrl/matomo.js',
    userId: '',
    preInitActions: [
      ['setCustomVariable', '1', 'VisitorType', 'Member'],
      ['appendToTrackingUrl', 'new_visit=1']
    ]
  })
})

No need to make any other changes, and this is enough for what I need, maybe it helps you to get it working.

Can you send your actual code ? Would help to understand your problem better

[vincent41]

Hello @makerovski,

Thanks for your answer, something is definitely happening. But it's not like I would normally include the script. something is different for example,if I set debug: true and in the url https://domain.de/?mtmPreviewMode=1XybHsKe I don't see a preview window for it. Is it normal?

[makerovski]

Hello @vincent41, May I see your code ?

[maxleistner]

Hi @vincent41

I managed to make it work using Matomo as Nuxt plugin.

I have it in the plugins folder (will be automatic initialized) as matomo.client.ts

i use this configuration:

import VueMatomo from 'vue-matomo'
import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(VueMatomo, {

    router: nuxtApp.$router,
    host: 'yourHost.com',
    siteId: yourSiteID,
    enableLinkTracking: true,
    requireConsent: false,
    trackInitialView: true,
    disableCookies: false,
    requireCookieConsent: false,
    enableHeartBeatTimer: true,
    heartBeatTimerInterval: 5,
    trackerFileName: 'piwik',
    trackerUrl: 'yourUrl.php',
    trackerScriptUrl: 'yourUrl/matomo.js',
    userId: '',
    preInitActions: [
      ['setCustomVariable', '1', 'VisitorType', 'Member'],
      ['appendToTrackingUrl', 'new_visit=1']
    ]
  })
})

No need to make any other changes, and this is enough for what I need, maybe it helps you to get it working.

Can you send your actual code ? Would help to understand your problem better

Thanks for that!

BUT i get a new hit every time i click on a menu item as it would be a new person. I deleted the preInitActions and now it works. One User - one session - multiple pages

[WithAlex]

Hi @vincent41

I managed to make it work using Matomo as Nuxt plugin.

I have it in the plugins folder (will be automatic initialized) as matomo.client.ts

i use this configuration:

import VueMatomo from 'vue-matomo'
import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(VueMatomo, {

    router: nuxtApp.$router,
    host: 'yourHost.com',
    siteId: yourSiteID,
    enableLinkTracking: true,
    requireConsent: false,
    trackInitialView: true,
    disableCookies: false,
    requireCookieConsent: false,
    enableHeartBeatTimer: true,
    heartBeatTimerInterval: 5,
    trackerFileName: 'piwik',
    trackerUrl: 'yourUrl.php',
    trackerScriptUrl: 'yourUrl/matomo.js',
    userId: '',
    preInitActions: [
      ['setCustomVariable', '1', 'VisitorType', 'Member'],
      ['appendToTrackingUrl', 'new_visit=1']
    ]
  })
})

No need to make any other changes, and this is enough for what I need, maybe it helps you to get it working.

Can you send your actual code ? Would help to understand your problem better

Hello @maxbellec

How do you access to $matomo with your configuration ? I try const { $matomo } = useNuxtApp() in <script setup> but it's always undefined... I need it to call trackSiteSearch and push events

Do you have samples ?

Thank's.

[rnenjoy]

Remember that its nuxtApp.$router and not nuxtApp.router

[phoenixgao]

Hi guys, I followed this tutorial to make vue-matomo work in my nuxt3 project. However, it can't get the page title from the meta as it's not rendered yet when the route changes.

I wonder if there is a way to send the event to matomo API sometimes after the route change or listen on the meta change event like what this library does? https://github.com/pimlie/nuxt-matomo?tab=readme-ov-file#caveats

[makerovski]

Hi Guys,

I Managed it using the thid code, with that I can change some Matomo properties

const trackSearch = () => {
  window._paq.push(["trackEvent", "searched:", `${props.modelValue}`]);
};

It shows an error but it works