Official Bily SDK for React

Don't already have an account and store added ? Head over to Bily, then return to this page.

☕ Install package

npm install @bilyai/react

yarn add @bilyai/react

🚦 Configurations

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

import { BilyProvider } from '@bilyai/react';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BilyProvider domainTracking="https://b.magnetor.net">
      <App />
    </BilyProvider>
  </React.StrictMode>,
);

Once implemented, Bily's React SDK will automatically track all pageviews. You can now begin tracking all other events as well.

🚀 Start tracking events

import { useBily } from '@bilyai/react';
import { useEffect } from 'react';

function ProductPage() {
  const { track } = useBily();

  useEffect(() => {
    track('Product Viewed', {
      client: {
        firstname: 'John',
        lastname: 'Doe',
        // ... other attributes here
      },
      products: [
        {
          id: '123',
          name: 'Product 1',
          price: 100,
          quantity: 1,
          currency: 'USD',
          sku: '123',
          category: 'Category 1',
          brand: 'Brand 1',
        },
      ],
      // ...other attributes here
    });
  }, [track]);

  return <div className="product">Product page</div>;
}

export default ProductPage;

import { useBily } from '@bilyai/react';
import { useCallback } from 'react';

function ProductPage() {
  const { track } = useBily();

  const addToCart = useCallback(() => {
    track('Product Added', {
      client: {
        firstname: 'John',
        lastname: 'Doe',
        // ... other attributes here
      },
      products: [
        {
          id: '123',
          name: 'Product 1',
          price: 100,
          quantity: 1,
          currency: 'USD',
          sku: '123',
          category: 'Category 1',
          brand: 'Brand 1',
        },
      ],
      // ...other attributes here
    });
  }, [track]);

  return (
    <div className="product">
      Product page
      <button onClick={addToCart}>Add to cart</button>
    </div>
  );
}

export default ProductPage;

import { useBily } from '@bilyai/react';
import { useCallback } from 'react';

function CartPage() {
  const { track } = useBily();

  const startCheckout = useCallback(() => {
    track('Checkout Started', {
      client: {
        firstname: 'John',
        lastname: 'Doe',
        // ... other attributes here
      },
      products: [
        {
          id: '123',
          name: 'Product 1',
          price: 100,
          quantity: 1,
          currency: 'USD',
          sku: '123',
          category: 'Category 1',
          brand: 'Brand 1',
        },
      ],
      // ...other attributes here
    });
    // start checkout logic
  }, [track]);

  return (
    <div className="cart">
      Cart page
      <button onClick={startCheckout}>Add to cart</button>
    </div>
  );
}

export default CartPage;

import { useBily } from '@bilyai/react';
import { useCallback } from 'react';

function CheckoutPage() {
  const { track } = useBily();

  const startCheckout = useCallback(() => {
    // ... checkout logic
    track('Order Completed', {
      client: {
        firstname: 'John',
        lastname: 'Doe',
        email: '[email protected]',
        phone: '1234567890',
        gender: 'male',
        dateOfBirth: '1990-01-01',
        address: {
          city: 'New York',
          state: 'NY',
          country: 'US',
          zip: '10002',
        },
        // ... other attributes here
      },
      order: {
        id: '123',
        currency: 'USD',
        total: 100,
        products: [
          {
            id: '123',
            name: 'Product 1',
            price: 100,
            quantity: 1,
            currency: 'USD',
            sku: '123',
            category: 'Category 1',
            brand: 'Brand 1',
          },
        ],
      },
      // ...other attributes here
    });
  }, [track]);

  return (
    <div>
      Checkout page
      <button onClick={startCheckout}>Add to cart</button>
    </div>
  );
}

export default CheckoutPage;

💬 We're here to help!

If you get stuck, shoot us an email or use the Intercom widget on the bottom right of any page.

We're excited you're here! :blue-heart: