Matomo: track client-side navigation page views

[Siilwyn]

🆒 Your use case

Using the Matomo script I would like client-side navigation (through <NuxtLink>) to send page view events to Matomo.

🆕 The solution you'd like

Perhaps only if trackPageView is truthy the integration hooks into the vue router to send events.

🔍 Alternatives you've considered

No response

ℹ️ Additional info

No response

[joaopedrodcf]

I think this seems a bit unrelated with the nuxt/scripts as it's more how can you do a tracking in a custom library.

I would suggest maybe using route middleware: https://nuxt.com/docs/getting-started/routing#route-middleware to send the event everytime the route changes

// pseudo code

export default defineNuxtRouteMiddleware(async(to, from) => {
const {proxy} = await useScript({src: 'https://your-matomo-domain/matomo.js'});
},{
 {
   use() {
      return { paq: window._paq };
  },
})



proxy._paq.push(['setCustomUrl', to.fullPath]);
proxy._paq.push(['trackPageView']);

export default defineNuxtConfig({
  router: {
    middleware: ['matomo'],
  },
});

[Siilwyn]

Hmm possibly? I expect an 'official' integration from nuxt/scripts that is about plug-and-play to cover this for me. But I can see this being out of scope too... I'm curious if this is considered in scope or not.

[Siilwyn]

Because of #322 can't use the proxy either 😓 and getting the correct page title is also an issue in middleware.

Using the useScriptMatomoAnalytics composable and onLoaded in app.vue works:

<script setup lang="ts">
const { onLoaded } = useScriptMatomoAnalytics();

useScriptEventPage(({ title, path }) => {
  onLoaded((matomo) => {
    matomo._paq.push(['setCustomUrl', path]);
    matomo._paq.push(['setDocumentTitle', title]);
    matomo._paq.push(['trackPageView']);
  });
});
</script>