Nuxt.js Integration

Usermaven provides integration support for Nuxt.js applications through our core SDK. Our SDK offers:

• Automatic page view tracking

• Cross-domain tracking support

• Flexible event tracking with custom payloads

• URL randomization to avoid PII collection

• Namespace support for multiple tracking instances

Installation

Install the Usermaven core package:

npm install @usermaven/sdk-js
# or
yarn add @usermaven/sdk-js

Setup

Plugin Setup

Create a new file plugins/usermaven.client.ts to initialize Usermaven:

export default defineNuxtPlugin((nuxtApp) => {
  // Initialize Usermaven
  const usermaven = usermavenClient({
    // Required Configuration
    key: 'your-api-key',
    trackingHost: 'https://events.usermaven.com',

    // Optional Configuration
    autocapture: true, // Enable automatic event capturing
    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
  });

  // Make usermaven available globally
  nuxtApp.provide('usermaven', usermaven);
});

Page View Tracking

Set up page view tracking in your app.vue:

<script setup>

const { $usermaven } = useNuxtApp();
const route = useRoute();

// Track initial page view
onMounted(() => {
  $usermaven.track('pageview');
});

// Track page views on route changes
watch(
  () => route.fullPath,
  (newPath) => {
    $usermaven.track('pageview');
  }
);
</script>

<template>
  <!-- Unsupported component: NuxtPage -->
</template>

Usage in Components

Tracking Custom Events

Track custom events in your components:

<script setup>

const { $usermaven } = useNuxtApp();

const handleButtonClick = () => {
  $usermaven.track('button_click', {
    buttonId: 'submit-button',
    page: 'checkout',
    value: 99.99,
  });
};
</script>

<template>
  <button @click="handleButtonClick">Click Me</button>
</template>

Identifying Users

Identify users and set their properties:

<script setup>

const { $usermaven } = useNuxtApp();

const identifyUser = () => {
  $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>
  <button @click="identifyUser">Update Profile</button>
</template>

Configuration Options

Here's a detailed explanation of all available configuration options:

Required:

• key: Your Usermaven API key

• trackingHost: The URL of your tracking server

Optional:

• autocapture: Enable automatic event capturing (default: false)

• randomizeUrl: Randomize URLs to avoid PII collection (default: false)

• namespace: Custom namespace for multiple tracking instances

• crossDomainLinking: Enable cross-domain tracking (default: false)

• domains: Specify allowed domains for cross-domain tracking (e.g., 'example.com,example.org')

For a complete list of configuration options, refer to the Reference Guide.

Example App

For a complete working example, check out our Nuxt.js Example App.