Skip to main content

E-Commerce Tracking

The Joryio SDKs include built-in e-commerce tracking for product engagement, cart activity, and purchase transactions. The tracker works the same way across every platform: the same methods, the same standard event names, and the same property semantics - only the language syntax differs.

Pick your platform in any code example below; the choice syncs across the whole page. For installation and configuration, see the platform guides: Web SDK, iOS SDK, Android SDK, React Native SDK. React Native has no dedicated tracker - its tab shows the equivalent Joryio.track() calls (see React Native below).

ID Naming Convention​

Joryio uses a clear naming convention for identifiers:

Your IDDescriptionExample
productIdYour product identifier (SKU, product ID from your e-commerce platform)"SKU-12345"
orderIdYour order identifier (order number from your platform)"ORD-2024-001"
userIdYour user identifier (passed to identify())"user-123"

Use your own identifiers naturally - no special prefixes needed.

Initialize the E-Commerce Tracker​

// Get the e-commerce tracker from your SDK instance
// (joryio is the instance created with `new JoryioSDK({ sdkKey: ... })`)
const ecommerce = joryio.ecommerce({
  currency: 'USD' // Default currency for all events
});

Track Product Views & Search​

// When user views a product page
ecommerce.viewProduct({
  productId: 'SKU-12345',
  name: 'Classic Blue T-Shirt',
  price: 29.99,
  category: 'Clothing/T-Shirts',
  brand: 'Acme Apparel',
  imageUrl: 'https://example.com/images/blue-tshirt.jpg',
  url: 'https://example.com/products/blue-tshirt'
});

// When user views a category page
ecommerce.viewCategory('tshirts', 'T-Shirts');

// When user searches
ecommerce.search('blue shirts', 42); // query, result count

Track Cart Activity​

// Add item to cart
ecommerce.addToCart({
  productId: 'SKU-12345',
  name: 'Classic Blue T-Shirt',
  price: 29.99,
  quantity: 1,
  variantId: 'var-medium',
  sku: 'BTS-001-M'
}, 59.98); // Optional: current cart value

// Remove item from cart
ecommerce.removeFromCart({
  productId: 'SKU-12345',
  name: 'Classic Blue T-Shirt',
  price: 29.99
}, 1); // quantity to remove

// Update entire cart
ecommerce.updateCart([
  { productId: 'SKU-12345', name: 'Blue T-Shirt', price: 29.99, quantity: 2 },
  { productId: 'SKU-67890', name: 'Black Jeans', price: 49.99, quantity: 1 }
], 109.97); // items array, total cart value

Track Checkout Flow​

// When user starts checkout
ecommerce.startCheckout([
  { productId: 'SKU-12345', name: 'Blue T-Shirt', price: 29.99, quantity: 2 },
  { productId: 'SKU-67890', name: 'Black Jeans', price: 49.99, quantity: 1 }
], 109.97); // items, cart value

// When user adds payment info
ecommerce.addPaymentInfo('credit_card');

Track Purchases​

// When order is completed
ecommerce.purchase({
  orderId: 'ORD-2024-001',
  items: [
    {
      productId: 'SKU-12345',
      name: 'Classic Blue T-Shirt',
      price: 29.99,
      quantity: 2,
      category: 'Clothing',
      brand: 'Acme'
    },
    {
      productId: 'SKU-67890',
      name: 'Black Jeans',
      price: 49.99,
      quantity: 1
    }
  ],
  value: 109.97,
  currency: 'USD',
  shipping: 5.99,
  tax: 8.80,
  discount: 10.00,
  coupon: 'SAVE10'
});
Items Must Be Provided

The purchase() method requires you to pass the order items explicitly. The SDK does not store cart state client-side and does not pull items from the tracked cart or the server automatically. This ensures accuracy, since the order confirmation page or screen knows the exact items that were purchased.

Track Order Status Changes​

// Order shipped
ecommerce.orderFulfilled('ORD-2024-001', '1Z999AA10123456784', 'UPS');

// Order delivered
ecommerce.orderDelivered('ORD-2024-001');

// Order cancelled
ecommerce.orderCancelled('ORD-2024-001', 'Customer requested');

// Order refunded
ecommerce.orderRefunded('ORD-2024-001', 29.99, 'Product defective');

Track Wishlist & Sharing​

// Add to wishlist
ecommerce.addToWishlist({
  productId: 'SKU-12345',
  name: 'Classic Blue T-Shirt',
  price: 29.99
});

// Share product
ecommerce.shareProduct({
  productId: 'SKU-12345',
  name: 'Classic Blue T-Shirt'
}, 'facebook'); // share method

Track Coupons​

// Coupon applied
ecommerce.applyCoupon('SAVE10', 10.00, 'percentage');

// Coupon removed
ecommerce.removeCoupon('SAVE10');

Track Reviews​

// Product review submitted
ecommerce.submitReview('SKU-12345', 5, 'Great quality shirt!');

Standard E-Commerce Events​

The e-commerce tracker sends the same standard events on every platform:

Event NameDescription
Product ViewedUser views a product page
Product List ViewedUser views a category page
Products SearchedUser searches for products
Product AddedItem added to cart
Product RemovedItem removed from cart
Cart UpdatedCart contents changed
Checkout StartedUser begins checkout
Payment Info EnteredUser adds payment method
Order CompletedOrder completed
Order FulfilledOrder shipped
Order DeliveredOrder delivered
Order CancelledOrder cancelled
Order RefundedOrder refunded
Product Added to WishlistProduct added to wishlist
Product Removed from WishlistProduct removed from wishlist
Product SharedProduct shared
Coupon AppliedCoupon code applied
Coupon RemovedCoupon code removed
Product ReviewedProduct review submitted

React Native​

The React Native SDK does not include a dedicated e-commerce tracker. React Native apps send the exact same standard events with Joryio.track(), using the same event names and the same wire property names the other SDKs' trackers emit (the trackers convert their camelCase inputs to snake_case event properties on the wire). The React Native tab in each section above shows the equivalent Joryio.track() call for every tracker method.

Next Steps​