A complete e-commerce demo application built with React and Vite, showcasing server-side tracking integration with ServerTrack.io.
- 🛍️ Product listing and detail pages
- 🛒 Shopping cart functionality
- 💳 Checkout flow
- 📊 Complete e-commerce event tracking:
view_item- Product view trackingadd_to_cart- Add to cart eventsbegin_checkout- Checkout initiationpurchase- Transaction completion
- React 18 - UI library
- Vite - Build tool and dev server
- ServerTrack.io - Server-side tracking
- Clone this repository
- Install dependencies:
npm install- Configure ServerTrack in
src/utils/servertrack.js:
const SERVERTRACK_CONFIG = {
endpoint: 'some.website.com', // Replace with your ServerTrack endpoint
authKey: 'AUTHENTICATION_KEY' // Replace with your authentication key
}npm run devnpm run buildnpm run previewReact-ServerTrack-Demo/
├── src/
│ ├── components/
│ │ ├── ProductList.jsx # Product grid display
│ │ ├── ProductView.jsx # Single product detail
│ │ ├── Checkout.jsx # Checkout page
│ │ └── Success.jsx # Order confirmation
│ ├── utils/
│ │ └── servertrack.js # ServerTrack integration
│ ├── App.jsx # Main app component
│ ├── main.jsx # App entry point
│ └── index.css # Global styles
├── index.html
├── vite.config.js
└── package.json
The demo uses the ServerTrack.io SDK and tracks the following e-commerce events:
The SDK is initialized on app load using the standard ServerTrack snippet:
initServerTrack()Triggered when a user clicks on a product:
trackEvent('ViewContent', {
content_ids: [product.id],
content_type: 'product',
content_name: product.name,
content_category: product.category,
value: product.price,
currency: 'USD',
price: product.originalPrice,
discount: product.originalPrice - product.price,
content_list: 'Product Catalog'
})Triggered when a user adds a product to cart:
trackEvent('AddToCart', {
content_ids: [product.id],
content_type: 'product',
content_name: product.name,
value: product.price,
currency: 'USD',
content_list: 'Shopping Cart',
num_items: 1,
price: product.originalPrice,
discount: product.originalPrice - product.price
})Triggered when checkout is initiated:
trackEvent('InitiateCheckout', {
value: total,
currency: 'USD',
content_type: 'product',
num_items: cart.length,
content_list: 'Shopping Cart',
content_ids: cart.map(item => item.id),
contents: cart.map(item => ({
id: item.id,
quantity: 1,
item_price: item.price
}))
})Triggered on successful purchase with user data:
const userData = {
em: email, // Email
ph: phone, // Phone
fn: firstName, // First Name
ln: lastName, // Last Name
ct: city, // City
st: state, // State
zp: zip, // ZIP Code
country: 'US' // Country
}
trackEvent('Purchase', {
transaction_id: transactionId,
currency: 'USD',
value: total,
shipping: 10,
content_type: 'product',
content_ids: cart.map(item => item.id),
contents: cart.map(item => ({
id: item.id,
quantity: 1,
item_price: item.price
})),
items: cart.map(item => ({
item_id: item.id,
item_name: item.name,
item_category: item.category,
price: item.price,
quantity: 1,
discount: item.originalPrice - item.price
}))
}, userData)- Modify products in
src/components/ProductList.jsx - Adjust styling in
src/index.css - Add more tracking events in
src/utils/servertrack.js
MIT