WebSight

Track Custom User Interactions

Learn how to track specific user interactions and events that matter most to your business using WebSight's custom events API.

Basic Event Tracking

Track custom events by calling the websight.track() function. This function accepts an event name and optional properties.

// JavaScript Example
websight.track('button_click', {
  buttonId: 'signup',
  location: 'header'
});

// TypeScript Example
interface EventData {
  name: string;
  domain: string;
  description?: string;
}

const eventData: EventData = {
  name: "user_signup",    // required: event name
  domain: "example.com",  // required: your domain
  description: "User completed signup", // optional: event details
};

// Send the event
await fetch("https://websight.srexrg.me/api/events", {
  method: 'POST',
  headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer YOUR_API_KEY"
  },
  body: JSON.stringify(eventData)
});

Common Use Cases

Form Submissions

// JavaScript Example
form.addEventListener('submit', (e) => {
  websight.track('form_submit', {
    formId: 'contact_form',
    formType: 'contact',
    success: true
  });
});

// React Example with TypeScript
import { useState } from 'react';

interface FormData {
  name: string;
  email: string;
}

const ContactForm = () => {
  const [formData, setFormData] = useState<FormData>({ name: '', email: '' });
  
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    // Process form submission...
    
    // Track the event
    const eventData = {
      name: "form_submit",
      domain: "example.com",
      description: "Contact form submitted successfully"
    };
    
    await fetch("https://websight.srexrg.me/api/events", {
      method: 'POST',
      headers: {
        "Content-Type": "application/json",
        "Authorization": "Bearer YOUR_API_KEY"
      },
      body: JSON.stringify(eventData)
    });
  };
  
  return (
    <form onSubmit={handleSubmit}>
      {/* Form fields */}
    </form>
  );
};

User Actions

// JavaScript Example
// Track user interactions
websight.track('video_play', {
  videoId: 'intro-video',
  duration: 120,
  position: 0
});
websight.track('product_view', {
  productId: 'prod_123',
  category: 'electronics',
  price: 299.99
});

// React Example with TypeScript
import { useEffect } from 'react';

interface VideoPlayerProps {
  videoId: string;
  src: string;
}

const VideoPlayer = ({ videoId, src }: VideoPlayerProps) => {
  useEffect(() => {
    // Track video view event
    const trackVideoView = async () => {
      const eventData = {
        name: "video_play",
        domain: "example.com",
        description: "User started playing video"
      };
      
      await fetch("https://websight.srexrg.me/api/events", {
        method: 'POST',
        headers: {
          "Content-Type": "application/json",
          "Authorization": "Bearer YOUR_API_KEY"
        },
        body: JSON.stringify(eventData)
      });
    };
    
    trackVideoView();
  }, [videoId]);
  
  return (
    <video src={src} controls />
  );
};

Best Practices

Use consistent event names across your application
Keep property names clear and descriptive
Include relevant contextual data with each event
Validate event tracking in development before deploying

Viewing Event Data

Custom events data can be viewed in your WebSight dashboard under the Events section. You can:

Filter events by name, date range, and properties
View event trends and patterns
Export event data for further analysis
Set up custom alerts based on event triggers