[Vuejs]-How to enable analytics for dynamic pages (Vue.js)

Most of the Web applications now a days are single page apps or Client side web applications. This means most of the analytics platforms like GA etc will work with your web application.

However, You will need to implement the analytics in a specific way for you to capture the required metrics. I think using Google Tag manager and creating a DataLayer will make it easier in the long run. Once the datalayer is available you can use this data with any analytics tool.

In order to track a screenview change, you can use any custom trigger available with your application that notifies of the screen view change or you can use the History change as mentioned here: Google Tag Manager and Single Page apps.

You can also use the App Rote changes as mentioned here on simple routing to populate the datalayer and use the values from the datalayer in any analytics including the GA.

Other option is using vue-analytics . There is Easy to follow documentation from the author and the branch is here

This way any new pages added etc will be tracked automatically.

Hope this helps.

As I read from this source–

If you have a website that has dynamic content or multiple pages
and steps under one URL (or an all-flash website), you have to do a
little more work to get Google Analytics to effectively track your
pages.

Here are some more references you can check upon-

• Here you can read, how Google Analytics works.
• Here you can find its pricing plans which are free for small businesses.
• Here you can read how Google Analytics performs for dynamic links.
• Here is another answer given by @Ruslan Konygin on a similar problem.
• Here is a complete guide on Tracking Dynamic Sites and Pages with Google Analytics.

Legal context

Well… What is the targeted audience? If your main targets are privacy advocates or European people covered by the General Data Protection Regulation (GDPR), it would be a terrible idea to select Google Analytics as the solution. In France, for instance, we have a National Commission on Informatics and Liberty ("CNIL" in French). It is:

an independent French administrative regulatory body whose mission is
to ensure that data privacy law is applied to the collection, storage,
and use of personal data. (Source: Wikipedia)

The CNIL tends to strongly discourage the use of Google Analytics (see Q&A on the CNIL’s formal notices concerning the use of Google Analytics). Therefore, be very careful about that, especially if you are targeting an international audience.

Recommended tool

When it comes to web analytics, you have a wide range of technical solutions. For obvious reasons, I will not put the complete list here, but I can give you a tool that I know and use: Matomo.

This one is recommended by the CNIL, it is open source (see GitHub) and GDPR-compliant. You can self-host Matomo (On-Premise), which is completely free. You only pay if you use Matomo Cloud.

Matomo has a technical website dedicated to developers and exposes an API which should allow you to do what you want. Doing some research, I even found a thread on the official forum where the OP seems to have a similar problem to yours. Since it is a requirement in your question, you can also find information about user permissions.

On this page, you can read that Matomo developers use Vue for the front-end code. There is also a plugin called vue-matomo, which may be useful in your project.

Finally, to track single-page applications (SPAs), read on: Single-Page Application/Progressive Web App Tracking: Integrate – Matomo Analytics (formerly Piwik Analytics) – Developer Docs – v5