105 lines
2.3 KiB
Markdown
105 lines
2.3 KiB
Markdown
|
# E-commerce Analytics Examples
|
||
|
|
|
||
|
|
Product analytics, cart tracking, and purchase funnel examples.
|
||
|
|
|
||
|
|
## Features
|
||
|
|
|
||
|
|
- Product view and impression tracking
|
||
|
|
- Cart add/remove/update events
|
||
|
|
- Checkout funnel with step tracking
|
||
|
|
- Purchase conversion tracking
|
||
|
|
- Revenue attribution
|
||
|
|
- Product recommendation tracking
|
||
|
|
|
||
|
|
## Files
|
||
|
|
|
||
|
|
| File | Description |
|
||
|
|
|------|-------------|
|
||
|
|
| `product-analytics.ts` | Product view, impression, and interaction tracking |
|
||
|
|
| `cart-analytics.ts` | Shopping cart event tracking |
|
||
|
|
| `checkout-analytics.ts` | Multi-step checkout funnel tracking |
|
||
|
|
| `use-product-tracking.ts` | React hook for product pages |
|
||
|
|
| `use-cart-tracking.ts` | React hook for cart integration |
|
||
|
|
|
||
|
|
## Quick Start
|
||
|
|
|
||
|
|
### Product Tracking
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
import { useProductTracking } from './use-product-tracking';
|
||
|
|
|
||
|
|
function ProductPage({ product }) {
|
||
|
|
const { trackView, trackAddToCart, trackWishlist } = useProductTracking(product);
|
||
|
|
|
||
|
|
// Track view on mount
|
||
|
|
useEffect(() => {
|
||
|
|
trackView();
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<h1>{product.name}</h1>
|
||
|
|
<button onClick={() => trackAddToCart(1)}>Add to Cart</button>
|
||
|
|
<button onClick={() => trackWishlist()}>Add to Wishlist</button>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
### Cart Tracking
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
import { useCartTracking } from './use-cart-tracking';
|
||
|
|
|
||
|
|
function CartProvider({ children }) {
|
||
|
|
const { trackAdd, trackRemove, trackUpdate, trackCheckoutStart } = useCartTracking();
|
||
|
|
|
||
|
|
const addToCart = (product, quantity) => {
|
||
|
|
// Your cart logic
|
||
|
|
cart.add(product, quantity);
|
||
|
|
// Track the event
|
||
|
|
trackAdd(product, quantity);
|
||
|
|
};
|
||
|
|
|
||
|
|
// ...
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
### Checkout Funnel
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
import { useCheckoutFunnel } from './checkout-analytics';
|
||
|
|
|
||
|
|
function CheckoutPage() {
|
||
|
|
const funnel = useCheckoutFunnel(cart);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<CheckoutWizard
|
||
|
|
onStepComplete={(step) => funnel.trackStep(step)}
|
||
|
|
onPurchase={(order) => funnel.trackPurchase(order)}
|
||
|
|
onAbandonment={(step) => funnel.trackAbandonment(step)}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## Metrics Tracked
|
||
|
|
|
||
|
|
### Product Metrics
|
||
|
|
- Product views
|
||
|
|
- Product impressions (in lists)
|
||
|
|
- Add to cart rate
|
||
|
|
- Wishlist additions
|
||
|
|
|
||
|
|
### Cart Metrics
|
||
|
|
- Cart additions/removals
|
||
|
|
- Average cart value
|
||
|
|
- Cart abandonment
|
||
|
|
|
||
|
|
### Checkout Metrics
|
||
|
|
- Checkout initiation rate
|
||
|
|
- Step completion rates
|
||
|
|
- Drop-off analysis
|
||
|
|
- Purchase conversion
|
||
|
|
- Revenue per session
|