How to enable dynamic page analysis (Vue.js)

Question

I'm building a website where users can create new pages using dynamic URLs. I would like to add traffic analytics to each page individually and allow users to view a dashboard of the data collected for the pages they have created (view only, they should not be able to edit a given dashboard). This should also be automated so that when new users sign up and create their own pages, they are automatically tracked.

This should work in Vue.js if possible, but anything that works with vanilla JS should be fine too.

Is this possible using Google Analytics or a similar alternative tool? Is this expensive?

Answer 1

Most web applications today are single-page applications or client-side web applications. This means that most analytics platforms such as GA etc. can work with your web application.

However, you need to implement the analysis in a specific way so that you capture the required metrics. I think using Google Tag Manager and creating a DataLayer will make things easier in the long run. Once the data layer is available, you can use this data with any analytics tool.

To track screen view changes, you can use any of the custom triggers available in your application to notify of screen view changes, or you can use the history changes mentioned here: Google Tag Manager and Single Page application.

You can also use the application changes above Here is the simple route to populate the data layer and use the values ​​from the data layer in any analysis including GA.

Other option is to use vue-analytics. The author provides easy-to-understand documentation, and branches are here

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

Hope this helps.