A complete e-commerce demo application built with Angular 17, 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
- Angular 17 - Frontend framework
- TypeScript - Strongly typed JavaScript
- Standalone Components - No NgModule required
- ServerTrack.io - Server-side tracking
- Clone this repository
- Install dependencies:
npm install- Configure ServerTrack in
src/index.html:
const AUTH_KEY = 'YOUR_AUTH_KEY' // Replace with your authentication key
const SERVER_DOMAIN = 'some.website.com' // Replace with your ServerTrack endpointnpm startnpm run buildAngular-ServerTrack-Demo/
├── src/
│ ├── app/
│ │ ├── components/
│ │ │ ├── product-list/
│ │ │ │ └── product-list.component.ts # Product grid display
│ │ │ ├── product-view/
│ │ │ │ └── product-view.component.ts # Single product detail
│ │ │ ├── checkout/
│ │ │ │ └── checkout.component.ts # Checkout page
│ │ │ └── success/
│ │ │ └── success.component.ts # Order confirmation
│ │ ├── models/
│ │ │ └── product.model.ts # Product interface
│ │ └── app.component.ts # Root component
│ ├── index.html # ServerTrack SDK init
│ ├── main.ts # App entry point
│ └── styles.css # Global styles
├── angular.json
├── tsconfig.json
└── package.json
The demo uses the ServerTrack.io SDK and tracks the following e-commerce events:
The SDK is initialized in src/index.html before the app loads:
const AUTH_KEY = 'YOUR_AUTH_KEY' // Replace with your authentication key
const SERVER_DOMAIN = 'some.website.com' // Replace with your ServerTrack endpointTriggered when a user clicks on a product:
(window as any).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 as any).st('track', 'AddToCart', {
content_ids: [product.id],
content_type: 'product',
value: product.price,
currency: 'USD'
});Triggered automatically when the checkout component initializes using ngOnInit:
ngOnInit(): void {
(window as any).st('track', 'InitiateCheckout', {
value: this.getTotal(),
currency: 'USD',
content_type: 'product',
num_items: this.cart.length,
content_ids: this.cart.map(item => item.id),
contents: this.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: this.formData.email, // Email
ph: this.formData.phone, // Phone
fn: this.formData.firstName, // First Name
ln: this.formData.lastName // Last Name
};
(window as any).st('track', 'Purchase', {
transaction_id: 'ORD-' + Date.now(),
value: this.getTotal(),
currency: 'USD',
content_type: 'product',
num_items: this.cart.length,
content_ids: this.cart.map(item => item.id),
contents: this.cart.map(item => ({
id: item.id,
quantity: 1,
item_price: item.price
}))
}, userData);- Modify products in
src/app/components/product-list/product-list.component.ts - Adjust styling in
src/styles.css - Add more tracking events directly via
(window as any).st('track', ...)
MIT