3 min read

Custom Events

Track custom events and user interactions to understand how visitors engage with your website.

Overview

Custom events allow you to track specific user actions that matter to your business:

Button clicks
Form submissions
Video plays
File downloads
External link clicks
Scroll depth
Time spent on page

Basic Event Tracking

Use the track() function to send custom events:

Basic Event TrackingJavaScript

// Track a simple event
zenovay('track', 'button_click');

// Track an event with properties
zenovay('track', 'video_play', {
video_id: 'intro-video',
video_title: 'Getting Started with Zenovay',
video_duration: 120
});

Event Properties

Include additional context with your events using properties:

Event with PropertiesJavaScript

zenovay('track', 'purchase', {
product_id: 'pro-plan',
product_name: 'Pro Plan',
price: 29.99,
currency: 'USD',
category: 'subscription'
});

Common Event Patterns

Form Submissions

Track Form SubmissionsJavaScript

document.getElementById('contact-form').addEventListener('submit', function(e) {
zenovay('track', 'form_submit', {
  form_name: 'contact_form',
  form_type: 'lead_generation'
});
});

File Downloads

Track DownloadsJavaScript

document.querySelectorAll('a[href$=".pdf"]').forEach(link => {
link.addEventListener('click', function(e) {
  zenovay('track', 'file_download', {
    file_name: this.href.split('/').pop(),
    file_type: 'pdf',
    file_url: this.href
  });
});
});

Video Interactions

Track Video EventsJavaScript

const video = document.querySelector('video');

video.addEventListener('play', () => {
zenovay('track', 'video_play', {
  video_title: video.title,
  video_duration: video.duration
});
});

video.addEventListener('ended', () => {
zenovay('track', 'video_complete', {
  video_title: video.title,
  watch_time: video.currentTime
});
});

React Integration

For React applications, use the global zenovay object from the tracking script:

React ExampleJavaScript

function ProductCard({ product }) {
const handleAddToCart = () => {
  // Use the global zenovay object from the tracking script
  zenovay('track', 'add_to_cart', {
    product_id: product.id,
    product_name: product.name,
    price: product.price
  });
};

return (
  <button onClick={handleAddToCart}>
    Add to Cart
  </button>
);
}

Event Naming Conventions

Follow these conventions for consistent event tracking:

Use lowercase letters and underscores for event names: button_click, form_submit, video_play

Recommended Event Names

Event Type	Event Name	Description
Navigation	`page_view`	Page viewed
Engagement	`button_click`	Button clicked
Forms	`form_submit`	Form submitted
Media	`video_play`	Video started
Commerce	`add_to_cart`	Item added to cart
Search	`search_query`	Search performed

Property Guidelines

Keep property names descriptive and consistent
Use snake_case for property names
Include relevant context (IDs, names, categories)
Avoid personally identifiable information (PII)

Never track sensitive information like passwords, credit card numbers, or personal data in event properties.

Viewing Custom Events

Custom events appear in your domain dashboard. Open Domains, click your site, then use the relevant tab:

Analytics tab — see event counts alongside pageviews and other behavioral metrics
Revenue tab — build conversion funnels and track goal completions from custom events

Debugging Events

Use the browser console to debug event tracking:

Debug ModeJavaScript

// Enable debug mode
zenovay('debug');

// Track an event (will log to console)
zenovay('track', 'test_event', { debug: true });