Track button events in vue single page application

Support & Bugs
1

How do I track button events in matomo using vue.js single page application? right now I am able to track page visits.

can anyone help me here.

2

Hi,

If you use vue-matomo, then you can simply follow their docs that mention that you can directly access window._paq.push after setting it up.

Therefore Event Tracking works exactly as explained in https://matomo.org/docs/event-tracking/ by calling something like _paq.push(['trackEvent', 'Documentary', 'Play', 'Thrive']);

3

@Lukas hello - how do you see the reporting of this button event? I have confirmed a very similar scenario as above - see the event in the activity log - but can’t see the event in any type of a graph report.

I am following the very minimal directions here and can’t find anything in the reports section.
https://matomo.org/docs/event-tracking/#viewing-events-reports

thanks in advance for any assistance.

4

Its not working for me because I’m using typescript with ESNext.
help me in writing .d.ts file and how to use in .vue file.

I am getting below error
err = TypeError: Cannot read property ‘trackEvent’ of undefined at VueComponent.onApproveClick (http ://localhost:8080/js/app.js:2298:20) at
click (http ://localhost:8080/js/app.js:5317:56) at invokeWithErrorHandling (h ttp://localhost:8080/js/chunk-vendors.js:93823:26) at VueComponent.invoker
(h ttp://localhost:8080/js/chunk-vendors.js:94148:14) at invokeWithErrorHandling (h
ttp://localhost:8080/js/chunk-vendors.js:93823:26) at VueComponent.Vue.$emit (h ttp://localhost:8080/js/chunk-vendors.js:95852:9) at VueComponent.click (h ttp://localhost:8080/js/chunk-vendors.js:146270:12) at invokeWithErrorHandling (h ttp://localhost:8080/js/chunk-vendors.js:93823:26) at HTMLButtonElement.invoker (h ttp://localhost:8080/js/chunk-vendors.js:94148:14) at HTMLButtonElement.original._wrapper (h ttp://localhost:8080/js/chunk-vendors.js:99516:25), vm = VueComponent {_uid: 57, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}, info = “v-on handler”

5

Nevermind - it took time for the report to process - wish this lag was written in red on the top of basically every matomo help article (I’m kidding - but more visibility of this and having sifted through some logs - I think it would solve NUMEROUS help requests)

6

@followbl
If you are hosting Matomo yourself, you can control the delay until new reports are generated by changing the cron run interval.