Integrate Matomo in a Nuxt 3 Application

matomo.client.ts

// ~/plugins/matomo.client.ts
const loadMatomoScript = () => {
  const script = document.createElement('script');
  script.async = true;
  script.src = 'https://your-matomo-instance.com/js/container.js'; // Replace with your Matomo instance URL
  document.getElementsByTagName('script')[0].parentNode?.insertBefore(script, null);
};

const setInitTracking = () => {
  if (window._paq) {
    // You can add custom dimensions here
    // like the authenticated user details
    window._paq.push(['trackPageView']);
  }
};

export default defineNuxtPlugin((nuxtApp) => {
  if (import.meta.client) {
    const _mtm = (window._mtm = window._mtm || []);
    const router = nuxtApp.$router;
    
    _mtm.push({ 'mtm.startTime': new Date().getTime(), event: 'mtm.Start' });
    
    loadMatomoScript();
    setInitTracking();
    
    router.afterEach((to) => {
      setNavigationTracking(to.path);
    });
  }
});

nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  plugins: [
    '~/plugins/matomo.client.ts',
  ],
});