Set up Flowsery Analytics in a Vue.js project

This guide explains how to add Flowsery Analytics tracking to a Vue.js application.

Inject the script from main.js

The cleanest approach is to append the script in your main entry file.

1. Open your main file (usually main.js or main.ts).

2. Add the Flowsery Analytics snippet:

   import { createApp } from 'vue'
   import App from './App.vue'
   
   // Inject Flowsery Analytics script
   const script = document.createElement('script')
   script.defer = true
   script.setAttribute('data-fl-website-id', 'flid_******')
   script.setAttribute('data-domain', 'your_domain.com')
   script.src = 'https://analytics.flowsery.com/js/script.js'
   document.head.appendChild(script)
   
   createApp(App).mount('#app')
   

   Swap flid_****** for the Website ID from your Flowsery Analytics settings. Swap your_domain.com for the root domain of your site.

Alternative: static HTML approach

You can also drop the snippet directly into index.html:

<script
  defer
  data-fl-website-id="flid_******"
  data-domain="your_domain.com"
  src="https://analytics.flowsery.com/js/script.js"
></script>

Confirm everything is working

After deploying either approach:

• Navigate to your live site
• Open your Flowsery Analytics dashboard and check for incoming pageviews
• Allow a couple of minutes for the first data to appear

For additional options such as localhost tracking, custom API endpoints, or cross-domain configuration, refer to the script configuration reference.