Vue Matomo tracker inside theme

[tassoman]

Hello there, I'm trying to inject Matomo's Vue tracker inside my template but failing.

I managed to create a custom theme by having a custom MyLayout.vue but I'm unable to inject the vue-matomo component inside my Layout's Slot.

Any idea on how to load the component, by using the provided example? Vue.use(VueMatomo, {props: 'myprops'})

[brc-dd]

Vue.use -- this is vue 2 syntax. You'll need something like this: https://vitepress.dev/guide/extending-default-theme#registering-global-components -- app.use(VueMatomo, { ... }) inside enhanceApp.

[tassoman]

Looks like I made it, but adding the component to MyLayout.vue makes an orhpan <vuematomo></vuematomo> xml tag 🥴

export default {
    extends: DefaultTheme,
    Layout: MyLayout,
    enhanceApp({app}) {
            app.component('TestComp', MyComp)
            app.use(VueMatomo, {
                host: 'https://matomo.my.host/',
                siteId: 123,
            })
    }
} satisfies Theme

<script setup>
import DefaultTheme from 'vitepress/theme'
const { Layout } = DefaultTheme
</script>

<template>
  <Layout>
    <template #layout-bottom>
        <VueMatomo />
    </template>
  </Layout>
</template>

[brc-dd]

I don't think it registers any global component. Just initializing should be sufficient. Better to do that inside some condition like typeof document !== 'undefined' to avoid breaking ssr.

[tassoman]

I tried somehow, having it half functional. Was included but claiming internal errors, because Matomo Tracker was not initialized.
I feel it buggy, not official, and not functional, not ready for TS, also.
I'm just going to create a custom component loading the needed JS after page is rendered. Maybe by importing mounted hook.

[tassoman]

I don't think it registers any global component. Just initializing should be sufficient. Better to do that inside some condition like typeof document !== 'undefined' to avoid breaking ssr.

Hello @brc-dd sorry for returning on this after a while.
I got things done following your hint. So, now, this enhancement code is able to load the library and connect to the tracker, inside a 2.0.0-alpha4 environment.

export default {
    extends: DefaultTheme,
    Layout: RerLayout,
    enhanceApp({app, router}) {
        app.use(VueMatomo, {
            debug: true,
            host: 'https://matomo.example.com',
            siteId: 123,
            router,
        })
    }
}

The problem I get an error while "injecting" the router. (as seen in vue-matomo readme).

TypeError: Cannot read properties of undefined (reading 'value')

I guess router is empty, not initialized. Any hint about initialization, injection? By reading the Theme interface, I guessed was already there (such as app)

[brc-dd]

It needs vue-router instance there as argument. VitePress doesn't use vue-router.

[Djyp]

In case anyone comes here like I did
Not sure it's the perfect solution that respect the art of Vue development but here's how I got it to work :

I have Vite 2.0.0-alpha2
I tried using vue-matomo and the package vitepress-plugin-matomo and a bunch of stuff including what is described up on this page. Nothing worked. Extending the theme didn't help either.

Best way was this, in index.ts :

// Basic code
export default {
  extends: DefaultTheme,
  Layout: () => {
    return h(DefaultTheme.Layout, null, {
      // https://vitepress.dev/guide/extending-default-theme#layout-slots
    })
  },
  enhanceApp({ app, router, siteData }) {
    // ...
  },
// My code
  setup(app) {
    onMounted(() => {
      // Matomo's JS code
      var _paq = window._paq = window._paq || [];
      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
      _paq.push(['trackPageView']);
      _paq.push(['enableLinkTracking']);
      (function() {
          var u="//matomo.host.someting/";
          _paq.push(['setTrackerUrl', u+'matomo.php']);
          _paq.push(['setSiteId', '123']);
          var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
          g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
      })();
      // end of Matomo's code
    })
  }
// End of my code
} satisfies Theme

I'm a still Vue/Vite newbie so I had a lot to figure out to workaround this simple feature. Please let me know if anything seems wrong to you

[tassoman]

Thanks @Djyp for your insight. I tried your example, but I got various Type Script linting errors.
I also realized the Vue-Matomo library is intended to work only client side. @brc-dd helped me in the other thread. Then I decided to give it up. Too complex.
Finally, by leveraging on this informations, given I already have my general customization component, I moved implementation there, when my general component is mounted:

<script setup>
import { onMounted } from 'vue'
import DefaultTheme from 'vitepress/theme-without-fonts'
import Feedback from './Feedback.vue'
const { Layout } = DefaultTheme

onMounted(() => {
  // Initialize Matomo
  window._paq = window._paq || []
  window._paq.push(['setSiteId', '191'])
  window._paq.push(['setTrackerUrl', 'https://example.com/matomo.php'])
  window._paq.push(['enableLinkTracking'])
  window._paq.push(['trackPageView'])

  // Load Matomo script
  const script = document.createElement('script')
  script.async = true
  script.src = 'https://example.com/matomo.js'
  document.head.appendChild(script)
})
</script>

<template>
  <Layout>
    <template #doc-footer-before>
      <Feedback />
    </template>
  </Layout>
</template>

Now Matomo is loaded and you can make customizations according your tracking policy.

[Djyp]

Thanks for your feedback. I guess this could be a more proper way of doing it. But I still don't have any error on my builds 🤔 Maybe it is related to the version of Vitepress or TypeScript ?