Skip to main content

Quickstart Guide

Get started with Bily in minutes. This guide provides essential setup instructions and your first tracking implementation.

Installation

Install the required package:
# For basic websites
npm install @bilyai/browser

# For React applications
npm install @bilyai/react

Basic Setup

import { init, track } from '@bilyai/browser';

// Initialize Bily with your domain tracking ID
init('your-domain-tracking-id', {
  verbose: true,     // Enable logging in development
  persistQueue: true // Enable reliable event delivery
});

// Track a page view
track('Pageview', {
  pageTitle: document.title,
  sourceUrl: window.location.href
});
import { BilyProvider } from '@bilyai/react';
import { useBily } from '@bilyai/react';

// Wrap your app with BilyProvider
function App() {
  return (
    <BilyProvider 
      domainTracking="your-domain-tracking-id"
      options={{ 
        verbose: true,
        persistQueue: true 
      }}
    >
      <YourApp />
    </BilyProvider>
  );
}

// Use the hook in your components
function TrackingComponent() {
  const bily = useBily();
  
  const handleClick = () => {
    bily.track('Button Clicked', {
      buttonId: 'example-button'
    });
  };

  return <button onClick={handleClick}>Track Click</button>;
}
import { track } from '@bilyai/browser';

// Track product view
track('Product Viewed', {
  products: [{
    id: 'prod_123',
    name: 'Example Product',
    price: 99.99,
    category: 'Electronics'
  }]
});

// Track order completion
track('Order Completed', {
  order: {
    id: 'order_456',
    total: 99.99,
    currency: 'USD'
  },
  products: [{
    id: 'prod_123',
    name: 'Example Product',
    price: 99.99,
    quantity: 1
  }]
});

Essential Functions

Next Steps