Bily-ai-tracking NPM

Bily Module

Bily module for customer tracking outide shopify.

Demo

Installation

Install bily-ai-tracking with npm

  npm install bily-ai-tracking

Usage/Examples

React

import { initTracking, getBily, BilyEventTypes, IBily } from 'bily-external-tracking';

function App() {
const [bily, setBily] = useState<IBily>();

  useEffect(() => {
    initTracking({
      shopUrl: '<STORE_URL>',
      bilyCustomHost: '<BILY_CUSTOM_HOSTNAME>',
    });
    getBily().then((bily) => {
      bily.track(BilyEventTypes.pageview, {});
      setBily(bily);
    });
  }, []);

  return (
    <div className="App">
        <button
            style={{ marginTop: 10 }}
            onClick={() => {
                bily?.track(BilyEventTypes.product_added_to_cart, {
                    products: [
                        {
                        product_id: '1235655',
                        sku: 'example',
                        name: 'Example',
                        variant: 'Example',
                        quantity: '1',
                        price: '99.99',
                        },
                    ],
                    currency: 'USD',
                    total: '99.99',
                });
            }}>
            Add To Cart Example
        </button>
        <button
            style={{ marginTop: 10 }}
            onClick={() => {
                bily?.track(BilyEventTypes.checkout_started, {
                    products: [
                        {
                        product_id: '1235655',
                        sku: 'example',
                        name: 'Example',
                        variant: 'Example',
                        quantity: '1',
                        price: '99.99',
                        },
                        {
                        product_id: '35235655',
                        sku: 'example 2',
                        name: 'Example 2',
                        variant: 'Example 2',
                        quantity: '2',
                        price: '100',
                        },
                    ],
                    currency: 'USD',
                    total: '299.99',
                    ph: '+33 3 33 33 33 3',
                    em: 'customer@example.example',
                    fn: 'Valaye',
                    ln: 'Valaye',
                    zp: '000000',
                    country: 'FR',
                    ct: 'Roissy-en-France',
                });
            }}>
            Checkout Start Example
        </button>
    </div>
  )
}

Methods Reference

Initialize tracking

initTracking

Parameter	Type	Description
`shopUrl`	`string`	Required. Your Shop url. Get the value from Bily Setting page on tracking section Here
`bilyCustomHost`	`string`	Required. Your bily custom hostname. Get the value from Bily Setting page on tracking section. Here

Get Bily tracking object

async getBily

Return	Type	Description
`bily`	`Promise<IBily>`	Return bily object for sending tracking events

Track event

await getBily().track

Parameter	Type	Description
`eventType`	`BilyEventTypes`	Required. The tracked event type
`payload`	`Record<string, BilyPayload>`	Required. Tracked event info

Types

BilyEventTypes

enum BilyEventTypes {
  pageview = 'pageview',
  checkout_completed = 'Order Completed',
  checkout_started = 'Checkout Started',
  payment_info_submitted = 'Payment Info Entered',
  product_added_to_cart = 'Product Added',
  product_viewed = 'Product Viewed',
  search_submitted = 'Products Searched',
  collection_viewed = 'ViewCategory',
  payment_contact_info_submitted = 'AddContactInfo',
  shipping_info_submitted = 'AddShippingInfo',
  contact_form_submitted = 'Contact',
  newsletter_registered = 'Newsletter',
  cart_viewed = 'CartViewed',
}

Return	Description
`pageview`	Page viewed
`checkout_completed`	Checkout completed
`checkout_started`	Checkout Started
`payment_info_submitted`	User payment info submitted on checkout process
`product_added_to_cart`	Product added to cart
`product_viewed`	Product viewed
`search_submitted`	Search submitted
`collection_viewed`	Catalog page viewed
`search_submitted`	Search submitted
`payment_contact_info_submitted`	User contact info submitted on checkout process
`shipping_info_submitted`	User shipping info submitted on checkout process
`contact_form_submitted`	Contact us form submitted
`newsletter_registered`	Newsletter registered
`cart_viewed`	Cart viewed

IBily

interface IBily {
  track: TrackFunction;
}

TrackFunction

type TrackFunction = (eventType: BilyEventTypes, payload: BilyPayload) => void;

BilyPayload

interface BilyPayload {
  checkoutToken?: string;
  ph?: string;
  em?: string;
  fn?: string;
  ln?: string;
  zp?: string;
  country?: string;
  ct?: string;
  total?: string;
  currency?: string;
  tax?: string;
  order_id?: string;
  products?: Array<IProduct>;
}

Attribute	Type	Description
`checkoutToken`	`string`	*Optionnal* Current checkout token
`ph`	`string`	*Optionnal* Customer phone number
`em`	`string`	*Optionnal* Customer email address
`fn`	`string`	*Optionnal* Customer first name
`ln`	`string`	*Optionnal* Customer last name
`zp`	`string`	*Optionnal* Customer zip code
`country`	`string`	*Optionnal* Customer country code
`ct`	`string`	*Optionnal* Customer City Code
`total`	`string`	*Optionnal* Current purchase total amount
`currency`	`string`	*Optionnal* Used Currency
`tax`	`string`	*Optionnal* Purchase tax amount
`order_id`	`string`	*Optionnal* Order id
`products`	`IProduct`	*Optionnal* List of products

IProduct

{
    sku?: string;
    variant?: string;
    product_id: string;
    name: string;
    quantity: string;
    price: string;
}

Attribute	Type	Description
`sku`	`string`	*Optionnal* Product SKU
`variant`	`string`	*Optionnal* Product variant
`product_id`	`string`	*Required* Product ID
`name`	`string`	*Required* Product name
`quantity`	`string`	*Required* Product quantity
`price`	`string`	*Required* Product price