pimlie / nuxt-matomo

Matomo analytics for Nuxt.js
Other
88 stars 15 forks source link

matomo() not called for layouts/error.vue #10

Open arildm opened 4 years ago

arildm commented 4 years ago

I followed https://nuxtjs.org/guide/async-data#handling-errors and https://nuxtjs.org/guide/views#error-page. In a page component pages/Page.vue I have:

  async asyncData({ route, store, error }) {
    // ...
    error({ statusCode: 404, message: 'Not found' })
  },

And in layouts/error.vue:

  matomo(from, to, store) {
    console.log('Am I ever called?')
    // Source: https://matomo.org/faq/how-to/faq_60/
    this.setDocumentTitle(
      `${this.error.statusCode}/URL = ${encodeURIComponent(to.fullPath)}/From = ${encodeURIComponent(from.path)}`
    )
    this.trackPageView()
    return false
  }

It seems that matomo() is not being called for error.vue. How can I achieve this?

pimlie commented 3 years ago

Bit late to respond but tracking in this module is done using vue-router guards, but when an error occurs in Nuxt then loading the error page doesnt trigger a navigation event as Nuxt just loads the error page component instead of your actual page component.

The only way to resolve this is probably to call this.$matomo.trackPageView() manually in the mounted hook of the error page.

arildm commented 3 years ago

Thanks for the reply! I have the following in layouts/error.vue now, which works well enough to be logging some error pages, although I haven't checked if it's "perfect".

  created() {
    // An error has happened, so $matomo is not necessarily available.
    if (this.$matomo) {
      // Source: https://matomo.org/faq/how-to/faq_60/
      this.$matomo.setDocumentTitle(
        `${this.error.statusCode}${this.$route && `/URL = ${encodeURIComponent(this.$route.fullPath)}`}`
      )
      this.$matomo.trackPageView()
    }
  }

Would it make sense to make a PR with an addition to the README about this? In my case, reporting 404s is one of the main reasons I use Matomo at all.