I have been adding Matomo tracking to the Queerlit frontend, using
Dennis Ruhe’s vue-matomo plugin. The plugin hooks nicely into the router and tracks page views for each route change. It has not, however, been tracking the page title.

My first attempt to fix this was by sending the setDocumentTitle event after async-fetching the data in the router view component. However, by the time we even get into the component <script setup>, vue-matomo has already tracked the page view. I wish Matomo had support for “amending” a tracked page view so that we could add the title afterwards, but it doesn’t seem that way.

My next attempt relied on fetching the data and then setting the route title, all in the vue-router beforeEnter hook. That way, when entering the route (and before running <script setup>), it suddenly has a title which vue-matomo can pick up. Copying an example in this Vue discussion, I implemented beforeRouteEnter in a non-setup <script> block next to the <script setup>. It was kind of working, but I had to make it even more complicated in the Term router view component, where it was expected that the route would update with different route parameters. I probably could have continued with this approach, but the complexity was bothering me.

The third time is the charm. It was clear that the vue-router integration of vue-matomo does not take dynamic page titles into account. Instead of submitting to its assumptions, I left the router option of the plugin undefined, and instead added invocations at the appropriate place in my code. I already had a little useTitle composable wrapping the useTitle of VueUse, so I added it there.

The logic is this:

1. When the page title is set, track the page view to Matomo.
2. When visiting a new path (including updating same route with new params), repeat from 1.

I am making assumptions now too, but they are based on the application at hand and not on a general case. Most importantly, I am assuming that each router view component will set the page title, i.e. invoke useTitle(). That’s just a pattern I’m committing to, and which I want to do anyway.