A complete e-commerce demo application built with Express.js and Node.js, showcasing server-side tracking integration with ServerTrack.io.
- 🛍️ Product listing and detail pages
- 🛒 Shopping cart functionality
- 💳 Checkout flow
- 📊 Complete e-commerce event tracking:
ViewContent- Product view trackingAddToCart- Add to cart eventsInitiateCheckout- Checkout initiationPurchase- Transaction completion
- Express.js - Node.js web framework
- Node.js - JavaScript runtime
- Vanilla JS - Frontend (no framework)
- LocalStorage - Client-side cart management
- ServerTrack.io - Server-side tracking
- Clone this repository
- Install dependencies:
npm install- Configure ServerTrack in
public/js/servertrack.js:
const AUTH_KEY = 'YOUR_AUTH_KEY'
const SERVER_DOMAIN = 'some.website.com'npm run devnpm startExpress.js-ServerTrack-Demo/
├── views/
│ ├── index.html # Product listing page
│ ├── product.html # Product detail page
│ ├── checkout.html # Checkout page
│ └── success.html # Order confirmation
├── public/
│ ├── css/
│ │ └── style.css # Global styles
│ └── js/
│ ├── servertrack.js # ServerTrack integration
│ ├── products.js # Product listing logic
│ └── checkout.js # Checkout logic
└── server.js # Express server
The demo uses the ServerTrack.io SDK and tracks the following e-commerce events:
The SDK is initialized in public/js/servertrack.js and included in every page:
const AUTH_KEY = 'YOUR_AUTH_KEY'
const SERVER_DOMAIN = 'some.website.com'Triggered when a user clicks on a product image:
window.st('track', 'ViewContent', {
content_ids: [product.id],
content_type: 'product',
content_name: product.name,
value: product.price,
currency: 'USD'
})Triggered when a user adds a product to cart:
window.st('track', 'AddToCart', {
content_ids: [product.id],
content_type: 'product',
content_name: product.name,
value: product.price,
currency: 'USD'
})Triggered automatically when the checkout page loads:
window.st('track', 'InitiateCheckout', {
value: total,
currency: 'USD',
content_type: 'product',
num_items: cart.length,
content_ids: cart.map(item => item.id),
contents: cart.map(item => ({
id: item.id,
quantity: 1,
item_price: item.price
}))
})Triggered on form submit with user data for advanced matching:
const userData = {
em: email, // Email
ph: phone, // Phone
fn: firstName, // First Name
ln: lastName // Last Name
}
window.st('track', 'Purchase', {
transaction_id: 'ORD-' + Date.now(),
value: total,
currency: 'USD',
content_type: 'product',
num_items: cart.length,
content_ids: cart.map(item => item.id),
contents: cart.map(item => ({
id: item.id,
quantity: 1,
item_price: item.price
}))
}, userData)- Modify products in
public/js/products.js - Adjust styling in
public/css/style.css - Add more tracking events in
public/js/servertrack.js
MIT