Vue.js

Install EngageTrack in your Vue.js application.

Vue.js

Add EngageTrack to your Vue.js application. This works with both Vue 3 (Vite) and Vue 2 (Vue CLI) projects.

Option A: Add to index.html (Recommended)

The simplest approach is to add the script to your index.html. For Vite projects, this file is in the project root. For Vue CLI projects, it's in public/index.html.

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>My Vue App</title>
		<script
			defer
			data-site-id="YOUR_SITE_ID"
			src="https://cdn.engagetrack.net/sdk.js"
		></script>
	</head>
	<body>
		<div id="app"></div>
		<script type="module" src="/src/main.ts"></script>
	</body>
</html>

Replace YOUR_SITE_ID with the Site ID from your EngageTrack dashboard (Site Settings → General).

Option B: Load in App.vue

If you prefer to keep everything in Vue, load the script programmatically in your root component:

<script setup lang="ts">
import { onMounted } from "vue";
 
onMounted(() => {
	if (document.querySelector('script[src*="engagetrack"]')) return;
 
	const script = document.createElement("script");
	script.defer = true;
	script.dataset.siteId = "YOUR_SITE_ID";
	script.src = "https://cdn.engagetrack.net/sdk.js";
	document.head.appendChild(script);
});
</script>
 
<template>
	<RouterView />
</template>

The index.html approach (Option A) is preferred because the script loads earlier and won't miss the initial pageview. Use Option B only if you don't have access to index.html or need conditional loading.

Vue Router Integration

The EngageTrack SDK automatically tracks client-side navigations by listening to the History API. If you use Vue Router in history mode, every route change is tracked as a pageview with no extra setup.

Hash Mode

If your Vue Router uses createWebHashHistory, add data-hash="true" to the script tag:

<script
	defer
	data-site-id="YOUR_SITE_ID"
	data-hash="true"
	src="https://cdn.engagetrack.net/sdk.js"
></script>

Track Goals in Components

Call window.engagetrack() from methods or event handlers:

<script setup lang="ts">
function trackSignup() {
	window.engagetrack("signup-started", { source: "pricing-page" });
}
</script>
 
<template>
	<button @click="trackSignup">Start Free Trial</button>
</template>

Track on Route Enter

Use the onMounted hook or a route guard to fire events when users reach specific pages:

<script setup lang="ts">
import { onMounted } from "vue";
 
onMounted(() => {
	window.engagetrack("pricing-viewed");
});
</script>

Or with a global navigation guard in your router:

// router/index.ts
router.afterEach((to) => {
	if (to.name === "checkout-success") {
		window.engagetrack("checkout-complete");
	}
});

Track Revenue

<script setup lang="ts">
async function handlePurchase() {
	await submitOrder();
	window.engagetrack.trackPurchase({
		revenue: 29.99,
		currency: "USD",
	});
}
</script>
 
<template>
	<button @click="handlePurchase">Complete Purchase</button>
</template>

Verify Installation

Start your dev server (npm run dev).
Navigate between a few pages in your app.
In the EngageTrack dashboard, go to the Realtime tab — your visits should appear within seconds.

If you see your pageviews in Realtime, you're all set. If not, add data-debug="true" to the script tag and check the browser console for diagnostic messages.