Versatailor logoVersaTailorDocs
Dashboard
Docs/EVENTS/Track your events

Track Custom Events

Custom events allow you to track specific user interactions and behaviors in your application. With VersaTailor's analytics platform, you can implement custom event tracking to gather valuable insights about how users interact with your features.

Overview

Custom events allow you to track specific user interactions and behaviors in your application. With VersaTailor's analytics platform, you can implement custom event tracking to gather valuable insights about how users interact with your features.

Implementation

To track custom events, use the versatailor function available in the global window object. Here are some examples:

Basic Custom Event

window?.versatailor("submit_button_click", {
  description: "User clicked the submit button",
  buttonType: "primary",
  page: "/contact",
});

Signup Event

Signup events require an email address for user identification:

window?.versatailor("signup", {
  email: "user@example.com",
});

Payment Event

Payment events support comprehensive e-commerce tracking with revenue attribution:

window?.versatailor("payment", {
  email: "customer@example.com", // Required
  amnt: 2999, // Amount in cents ($29.99)
  currency: "USD", // Currency code (default: USD)
  orderId: "order_12345", // Order identifier
  productId: "prod_abc123", // Product identifier
  category: "subscription", // Product category
});

Event Dashboard

The custom events dashboard provides a comprehensive view of your tracked events, including:

  • Event name and description
  • Total event count
  • Unique users who triggered the event
  • User journey analysis with detailed event data
  • Custom properties and parameters

Event Metrics

Each event in the dashboard displays key metrics:

  • Count: Total number of times the event was triggered
  • Unique Users: Number of distinct users who triggered the event
  • Journey: Access to detailed user journey information

Payment Event Details

Payment events display comprehensive e-commerce data:

  • Customer Email: User identification (censored in public dashboards)
  • Revenue Amount: Payment amount with currency formatting
  • Order ID: Order identifier for transaction tracking
  • Product ID: Product identifier for inventory analysis
  • Category: Product category for segmentation

Custom Properties

All custom properties you include with your events are displayed in an expandable section:

  • Collapsible View: Click to expand/collapse custom properties
  • Key-Value Display: All custom parameters shown with proper formatting
  • Object Support: Nested objects are displayed as formatted JSON

User Journey Analysis

For each custom event, you can analyze the user's journey to understand the context and flow of actions:

  • View all instances of a specific event
  • Analyze the sequence of actions before and after the event
  • Understand user behavior patterns

Best Practices

Naming Conventions

Use clear and consistent naming patterns for your events:

// Good examples
window?.versatailor("signup_form_submitted", { ... });
window?.versatailor("product_added_to_cart", { ... });
window?.versatailor("checkout_completed", { ... });

// Avoid
window?.versatailor("clicked", { ... }); // Too vague
window?.versatailor("btn_1_click", { ... }); // Not descriptive

Payment Event Guidelines

Follow these guidelines for consistent payment tracking:

  • Email: Always required for customer identification
  • Amount: Use cents (e.g., 2999 for $29.99) for precision
  • Currency: Supports USD, EUR, GBP, CAD, AUD, JPY
  • Order ID: Use unique identifiers for each transaction
  • Product ID: Include for inventory and sales analysis
// Complete payment event example
window?.versatailor("payment", {
  email: "customer@example.com",
  amnt: 4999, // $49.99 in cents
  currency: "USD",
  orderId: "ORD-2024-001234",
  productId: "PROD-PREMIUM-001",
  category: "software",
});

Custom Properties

Leverage custom properties for rich event context:

// Custom event with detailed properties
window?.versatailor("feature_used", {
  featureName: "advanced_filter",
  userPlan: "premium",
  filterType: "date_range",
  resultsCount: 42,
  timeSpent: 120, // seconds
  metadata: {
    version: "2.1.0",
    experiment: "new_ui",
  },
});

Tip: All custom properties you include will be displayed in the dashboard's expandable custom properties section, making it easy to analyze detailed event context and user behavior patterns.

Next Steps

Now that you understand event tracking:

Need help? Contact us for assistance.

Suggest features? We'd love your feedback