Vue.js (Vite / Client-Side)
Integrate analytics-tube with your client-side Vue.js application
This guide explains how to integrate analytics-tube with your standard client-side Vue.js Single Page Applications (SPAs), typically built using Vite (e.g., via npm create vue@latest or npm create vite@latest -- --template vue).
How to Add analytics-tube to Your Client-Side Vue.js App
The recommended and simplest method for client-side Vue applications is to add the analytics-tube tracking script directly to your index.html file. This ensures the script is loaded early and reliably.
Adding to index.html
Retrieve Your Tracking Script
Navigate to your analytics-tube dashboard to obtain your code snippet:
<script
src="https://app.analytics.tube/api/script.js"
data-site-id="YOUR_SITE_ID"
defer
></script>Replace YOUR_SITE_ID with your actual Site ID.
Locate Your index.html File
This file is typically located at the root of your Vite-based Vue project.
Add the Snippet to index.html
Open index.html and paste the analytics-tube tracking snippet just before the closing </head> tag or </body> tag. Placing it in the <head> allows it to load sooner.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Vue App</title>
<!-- analytics-tube Tracking Snippet -->
<script
src="https://app.analytics.tube/api/script.js"
data-site-id="YOUR_SITE_ID"
defer
></script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
<!-- Or place script here, before </body> -->
</body>
</html>Ensure YOUR_SITE_ID is replaced with your actual Site ID.
Verify Installation
Deploy your application and check your analytics-tube dashboard for incoming data. You can also inspect your browser's network tab to confirm that script.js is loaded.
SPA Page View Tracking: analytics-tube's script is designed to automatically track route changes in SPAs using Vue Router. If page views aren't tracked correctly after navigation, you might need to manually trigger them using window.analytics-tube.pageview() after each route change. This can be done using Vue Router's navigation guards:
// Example with Vue Router in your router setup file (e.g., src/router/index.js)
import { createRouter, createWebHistory } from 'vue-router';
// ... your routes ...
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [ /* ... your routes ... */ ]
});
router.afterEach((to, from) => {
if (window.analytics-tube && typeof window.analytics-tube.pageview === 'function') {
window.analytics-tube.pageview();
}
});
export default router;Always test the default behavior first, as manual tracking might not be necessary.
Custom Event Tracking
From any Vue component or method, you can track custom events:
<template>
<button @click="trackCustomEvent">Track Action</button>
</template>
<script setup>
function trackCustomEvent() {
if (window.analytics-tube && typeof window.analytics-tube.event === 'function') {
window.analytics-tube.event('custom_vue_action', { detail: 'User performed a client-side Vue action' });
}
}
</script>Always check if window.analytics-tube and its methods are available before calling them.