Bytem Tracker SDK (React Native)

This is the official Bytem Tracker SDK for React Native applications.

Installation

Install the package using Yarn:

# need
yarn add @bytem/bytem-tracker-app
# if not
yarn add @react-native-async-storage/async-storage

iOS Setup

Don't forget to install pods for iOS:

cd ios && pod install

Usage

Initialization

Initialize the tracker in your app entry point (e.g., App.tsx or index.js). Note that init is asynchronous.

import React, { useEffect } from 'react';
import BytemTracker from '@bytem/bytem-tracker-app';

const App = () => {
  useEffect(() => {
    const initTracker = async () => {
      await BytemTracker.init({
        appKey: 'your-app-key',
        endpoint: 'https://api.bytem.com/track',
        debug: false, // Enable debug logs in development
      });
    };

    initTracker();
  }, []);

  return <YourApp />;
};

Tracking Events

Set User Details

Update user profile information.

// Signature: trackUser(userId: string, traits?: object)
await BytemTracker.trackUser('user_12345', {
  email: '[email protected]',
  name: 'John Doe',
  custom: {
    membership: 'gold'
  }
});

View Product

Track when a user views a product details page.

await BytemTracker.trackViewProduct({
  productId: 'prod_001',
  name: 'Awesome Gadget',
  price: 99.99,
  currency: 'USD',
  category: 'Electronics',
  url: 'https://example.com/products/prod-001'
}, {
  source: 'Home Page',
  position: 'Recommended'
});

Add To Cart

Track when a user adds a product to their shopping cart.

await BytemTracker.trackAddToCart({
  productId: 'prod_001',
  name: 'Awesome Gadget',
  price: 99.99,
  currency: 'USD',
  category: 'Electronics',
  url: 'https://example.com/products/prod-001',
  quantity: 1
}, {
  source: 'Product Detail',
  position: 'Bottom Bar'
});

Add To Wishlist

Track when a user adds a product to their wishlist.

await BytemTracker.trackAddWishlist({
  productId: 'prod_001',
  name: 'Awesome Gadget',
  price: 99.99,
  currency: 'USD',
  category: 'Electronics',
  url: 'https://example.com/products/prod-001'
}, {
  source: 'Product Detail',
  position: 'Top Right'
});

Goods Impression

Track when a list of products is displayed to the user.

const products = [
  { productId: 'prod_001', url: 'https://example.com/p/1' },
  { productId: 'prod_002', url: 'https://example.com/p/2' }
];

await BytemTracker.trackGoodsImpression(
  products,
  {
    source: 'Home Page',
    position: 'Recommended For You'
  }
);

Goods Click

Track when a user clicks on a product.

await BytemTracker.trackGoodsClick({
  gid: 'prod_001', // Product ID
  // url: 'https://example.com/p/1', // Optional
  source: 'Home Page',
  position: '1'
});

Checkout Order

Track when a user initiates checkout.

await BytemTracker.trackCheckOutOrder({
  orderId: 'order_abc123',
  total: 150.00,
  currency: 'USD',
  products: [
    { productId: 'prod_001', price: 99.99, quantity: 1 },
    { productId: 'prod_002', price: 50.01, quantity: 1 }
  ]
}, {
  source: 'Cart',
  position: 'Checkout Button'
});

Pay Order

Track when a user completes a payment.

await BytemTracker.trackPayOrder({
  orderId: 'order_abc123',
  total: 150.00,
  currency: 'USD',
  products: [
    { productId: 'prod_001', price: 99.99, quantity: 1 },
    { productId: 'prod_002', price: 50.01, quantity: 1 }
  ]
}, {
  source: 'Checkout',
  position: 'Pay Now'
});

Platform Compatibility

This SDK is designed for React Native and supports:

• iOS
• Android

It relies on:

• @react-native-async-storage/async-storage: For persisting session and visitor IDs.