How to add Matomo to Vue.js project

General questions
1

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?

2

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.

3

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.

4

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

image

5

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.

16%20PM
16%20PM692×352 13 KB

6

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)

7

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.