Custom Events

Track any custom action on your website - from button clicks to purchases.

Basic Usage

Use the global Trackveil.track() function to track custom events:

Trackveil.track(eventName, properties);

Parameters:

• eventName (string, required) - Name of the event
• properties (object, optional) - Additional data about the event

Examples

1. Button Clicks

// Track CTA button click
document.querySelector('#cta-button').addEventListener('click', function() {
  Trackveil.track('CTA Clicked', {
    button_text: 'Start Free Trial',
    location: 'hero'
  });
});

2. Newsletter Signup

// After successful form submission
Trackveil.track('Newsletter Signup', {
  source: 'footer',
  email_provided: true
});

3. E-commerce Purchase

// Track completed purchase
Trackveil.track('Purchase', {
  value: 49.99,
  currency: 'EUR',
  product_id: '12345',
  product_name: 'Premium Plan',
  quantity: 1,
  payment_method: 'stripe'
});

4. Video Play

// Track video engagement
document.querySelector('video').addEventListener('play', function() {
  Trackveil.track('Video Played', {
    video_id: 'intro-video',
    duration: 120,
    title: 'Product Demo'
  });
});

5. File Download

// Track PDF download
document.querySelector('a[href$=".pdf"]').addEventListener('click', function(e) {
  Trackveil.track('File Downloaded', {
    filename: e.target.getAttribute('href'),
    type: 'PDF',
    size: '2.4MB'
  });
});

6. Add to Cart

// E-commerce: add to cart
function addToCart(productId, price) {
  Trackveil.track('Add to Cart', {
    product_id: productId,
    price: price,
    currency: 'EUR'
  });
}

7. Form Submission

// Contact form
document.querySelector('#contact-form').addEventListener('submit', function() {
  Trackveil.track('Contact Form Submitted', {
    form_name: 'Contact',
    fields_filled: 5
  });
});

8. Feature Usage

// Track feature usage
Trackveil.track('Feature Used', {
  feature_name: 'Dark Mode Toggle',
  enabled: true
});

9. Search Query

// Track internal search
Trackveil.track('Search', {
  query: searchTerm,
  results_count: results.length
});

10. Account Creation

// After successful signup
Trackveil.track('Account Created', {
  plan: 'free',
  method: 'email'
});

Viewing Event Data

View all tracked events in your dashboard at /app/events. You'll see:

• Event name breakdown
• Total events and unique visitors
• Event properties (if provided)
• Event timeline

Best Practices

• Use descriptive names: "Purchase" not "event1"
• Be consistent: Always use same event names
• Include relevant properties: Add context like value, product, etc.
• Don't track PII: Avoid emails, names, addresses
• Keep it simple: Don't track too many properties

Common Use Cases

Next Steps