Vue.js Integration
Usermaven provides official SDKs for both Vue 3 and Vue 2 applications. Our SDK offers powerful features including:
- Automatic tracking of page views and user interactions
- Cross-domain tracking support
- Flexible event tracking with custom payloads
- URL randomization to avoid PII collection
- Namespace support for multiple tracking instances
Vue 3 Integration
For a complete working example, check out our Vue 3 Example App (opens in a new tab).
Installation
For Vue 3 applications, install the @usermaven/vue package:
npm install @usermaven/vue
# or
yarn add @usermaven/vueSetup
Initialize the Usermaven plugin in your Vue 3 application's main entry file (usually main.js or main.ts):
import { createApp } from 'vue'
import { UsermavenPlugin } from '@usermaven/vue'
import App from './App.vue'
const app = createApp(App)
app.use(UsermavenPlugin, {
// Required Configuration
key: 'your-api-key', // Your Usermaven API key
trackingHost: 'https://events.usermaven.com', // Your tracking server URL
// Optional Configuration
autocapture: true, // Enable automatic event capturing
autoPageview: true, // Automatically track page views
randomizeUrl: false, // Randomize URLs to avoid PII collection
// Cross-domain Tracking ( Optional )
crossDomainLinking: false, // Enable cross-domain tracking
domains: 'example.com,example.org', // Specify allowed domains
// Advanced Configuration ( Optional )
namespace: 'my-app' // Custom namespace for multiple tracking instances
})
app.mount('#app')Using Composables
useUsermaven
The useUsermaven composable provides methods for tracking events and identifying users:
<script setup>
import { useUsermaven } from '@usermaven/vue'
const usermaven = useUsermaven()
// Track custom events
function onProductView(product) {
usermaven.track('product_view', {
productId: product.id,
name: product.name,
category: product.category,
price: product.price
})
}
// Identify users with detailed attributes
function onUserLogin() {
usermaven.id({
// Required attributes
id: 'lzL24K3kYw', // Unique ID for the user in database
email: 'user@domain.com', // Email address for the user
created_at: '2021-01-20T09:55:35', // DateTime string when user first signed up
// Recommended attributes
first_name: 'John',
last_name: 'Smith',
// Optional attributes
custom: {
plan_name: 'premium',
},
// Company attributes (for multi-user products)
company: {
// Required Attributes
id: 'uPq9oUGrIt', // Company ID in your database
name: 'Usermaven', // Company Name in your database
created_at: '2021-01-20T09:55:35', // DateTime string when company first signed up
// Optional attributes
custom: {
plan: 'enterprise',
industry: 'Technology',
website: 'https://usermaven.com',
employees: 20
}
}
})
}
</script>
<template>
<div>
<button @click="onProductView(product)">View Product</button>
</div>
</template>usePageView
The usePageView composable handles page view tracking:
<script setup>
import { usePageView } from '@usermaven/vue'
// Automatically track page views
const _ = usePageView()
</script>Vue 2 Integration
Installation
For Vue 2 applications, use the @usermaven/sdk-js package:
npm install @usermaven/sdk-js
# or
yarn add @usermaven/sdk-jsPlugin Setup
Create a plugin file (e.g., plugins/usermaven.js):
import Vue from 'vue'
import { usermavenClient } from '@usermaven/sdk-js'
export default {
install(Vue) {
// Initialize Usermaven with configuration
const client = usermavenClient({
// Required Configuration
key: 'your-api-key',
trackingHost: 'https://events.usermaven.com',
// Optional Configuration
autocapture: true, // Enable automatic event capturing
autoPageview: true, // Automatically track page views
randomizeUrl: false, // Randomize URLs to avoid PII collection
// Cross-domain Tracking ( Optional )
crossDomainLinking: true, // Enable cross-domain tracking
domains: 'example.com,example.org', // Specify allowed domains
// Advanced Configuration ( Optional )
namespace: 'my-app' // Custom namespace for multiple tracking instances
})
// Make usermaven available globally
Vue.prototype.$usermaven = client
}
}Register the plugin in your main.js:
import Vue from 'vue'
import UsermavenPlugin from './plugins/usermaven'
import App from './App.vue'
Vue.use(UsermavenPlugin)
new Vue({
render: h => h(App)
}).$mount('#app')Usage in Components
Track events and identify users in your Vue 2 components:
<template>
<div>
<button @click="trackPurchase">Complete Purchase</button>
</div>
</template>
<script>
export default {
name: 'CheckoutComponent',
methods: {
trackPurchase() {
this.$usermaven.track('purchase_completed', {
orderId: 'ORD-123',
total: this.cart.total,
currency: 'USD'
})
}
},
// Track page views
mounted() {
this.$usermaven.track('pageview', {
title: document.title,
path: this.$route.path
})
}
}
</script>Route Change Tracking
Implement page view tracking with Vue Router:
// In your router configuration
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'
Vue.use(VueRouter)
const router = new VueRouter({
routes
})
router.afterEach((to, from) => {
Vue.prototype.$usermaven.track('pageview', {
title: document.title,
path: to.path,
referrer: from.path
})
})
export default routerConfiguration Options
Here's a detailed explanation of all available configuration options:
key(required): Your Usermaven API keytrackingHost(required): The URL of your tracking server
Optional configurations:
autocapture: Enable automatic event capturing (default: false)autoPageview: Automatically track page views (default: false)randomizeUrl: Randomize URLs to avoid PII collection (default: false)namespace: Custom namespace for multiple tracking instancescrossDomainLinking: Enable cross-domain tracking (default: false)domains: Specify allowed domains for cross-domain tracking (e.g., '.example.com,.example.org')
There are more options available in the documentation, but these are the most common ones. For a complete list, refer to the Reference Guide (opens in a new tab).
