How to add Matomo to Vue.js project

I’m trying to configure Matomo analytics to track different page visits on this static Vue.js site: GGF Impact Report 2018

I installed this package: vue-matomo - npm and added this to my main.js:

Vue.use(VueMatomo, {
  host: "http://matomo.finance-in-motion.com",
  siteId: 2,
  trackerFileName: "piwik",
  router: router,
  enableLinkTracking: true,
  requireConsent: false,
  trackInitialView: true,
  debug: false
});

But still, only /index is tracking visitors. How do I properly configure Matomo to work on a Vue.js site?

Hi,

When I visit your Website all URLs are tracked properly.
But as you are using URLs like http://ir2018.ggf.lu/#/target-regions you need to set the website settings so that Matomo doesn’t automatically cut away everything after # (as it normally is irrelevant to tracking).

And as all of your pages have the same title, all records will show up with the same title in Matomo.

Thanks Lukas, Although how do I update those website settings in Matomo to record the part of the URL that follows the hash? I can change the title names but shouldn’t each page be listed separately no matter their title under Behaviour > Pages? Right now, all I see is /index under the Page URL column on that screen.

It turns out there is a FAQ for this:
https://matomo.org/faq/how-to/faq_188/

image

Thanks, I did that which does seem to help but I’m still not seeing all pages listed separately under Behaviour > Pages (see screenshot). I have to open the segmented visit log for /index# to see the pages visited. It’s as if it’s treating those separate pages as anchor links on the same page.

Because they are. Your URLs aren’t “real” URLs but just anchor links on the same page. (/#/target-regions is just the anchor /target-regions for the browser).
You could set vue router to HTML5 history mode which uses proper URLs (but needs a bit of config in the htaccess to work)

https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

Yeah I know, I was just hoping Matomo could be configured to accommodate. But it’s actually all good. From the Behaviour > Pages screen, clicking on the row with page URL index# does display the breakdown for those pages which is what we wanted so that should work fine for the client. Thanks.