Trackthemetric Logo

Trackthemetric + Vue.js

Here's how you can set up Trackthemetric analytics in a Vue.js project.

Option 1
Inject the script in your root component

The easiest way to make sure the tracking code runs on every route is to add it at the very top level of your app.

1. Open your project's main file (usuallymain.js or main.ts ).

2. Add the following script:

import { createApp } from 'vue'
import App from './App.vue'

const script = document.createElement('script')
script.defer = true
script.setAttribute('id', 'TrackTheMetric')
script.setAttribute('data-website-id', 'YOUR_WEBSITE_ID')
script.setAttribute('data-domain', 'YOUR_DOMAIN.COM')
script.src = 'https://app.trackthemetric.com/tracker.js'
document.head.appendChild(script)

createApp(App).mount('#app')

Make sure to replace the YOUR_WEBSITE_ID and YOUR_DOMAIN.COM with your actual website ID and domain.

Option 2
Add it directly in index.html

If you prefer not to handle it in Vue.js code, you can drop the snippet straight into your HTML:

<script
  defer
  id="TrackTheMetric"
  data-website-id="YOUR_WEBSITE_ID"
  data-domain="YOUR_DOMAIN.COM"
  src="https://app.trackthemetric.com/tracker.js"
></script>

3
Verifying the setup

Once you've deployed your project:

  • Open your production site in the browser.
  • Head over to your Trackthemetric dashboard.
  • Within a few minutes, you should see traffic starting to appear.