Skip to main content

​
Tracking Events

Bily provides a powerful event tracking system that helps you monitor user interactions on your website.

​
Event Types

Bily supports various event types out of the box: 
type BilyEvent =
  | 'Pageview'
  | 'Product Added'
  | 'Product Viewed'
  | 'Category Viewed'
  | 'Checkout Started'
  | 'Order Completed'
  | 'Cart Viewed'
  | 'Remove from Cart'
  | 'Cart Updated'
  | 'Order Updated'
  | 'Order Cancelled'
  | 'Lead'
  | 'Login'
  | 'Logout'
  | 'Search'
  | 'Newsletter'
  // ... and more

​
Basic Event Tracking

To track an event, use the track function: 
import { track } from '@bilyai/browser';

// Track a simple page view
track('Pageview', {
  pageTitle: 'Home Page',
  sourceUrl: window.location.href
});

// Track a custom event
track('Button Clicked', {
  buttonId: 'signup-button',
  pageTitle: document.title
});

​
Event Payload

Each event can include additional data in its payload: 
type BilyPayload = {
  client?: {
    name?: string;
    email?: string;
    // ... other client properties
  };
  order?: {
    id?: string;
    total?: number;
    // ... other order properties
  };
  products?: Array<{
    id: string;
    name: string;
    price: number;
    // ... other product properties
  }>;
  pageTitle?: string;
  userAgent?: string;
  ip?: string;
  referrer?: string;
  sourceUrl?: string;
  source?: 'app' | 'web';
  category?: string;
  searchQuery?: string;
  eventAlias?: string;
};

​
Examples

​
Tracking Page Views

track('Pageview', {
  pageTitle: document.title,
  sourceUrl: window.location.href,
  referrer: document.referrer
});

​
Tracking User Actions

track('Newsletter', {
  client: {
    email: '[email protected]'
  },
  eventAlias: 'newsletter_subscription'
});

​
Tracking Search Events

track('Search', {
  searchQuery: 'example search',
  category: 'products'
});

​
Client Identification

Bily automatically manages client identification using the getBilyTrackingId() function: 
import { getBilyTrackingId } from '@bilyai/browser';

// Get the current client's tracking ID
const clientId = getBilyTrackingId();
The tracking ID is stored in localStorage and automatically included in event payloads.

​
Best Practices

  1. Always include relevant context in your event payloads
  2. Use consistent event names across your application
  3. Include client information when available
  4. Add custom properties that help analyze user behavior

​
Next Steps