chore(analytics): completely scrub NEXT_PUBLIC prefix from umami website id across codebase and docs
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 1m14s
Build & Deploy / 🧪 QA (push) Successful in 3m20s
Build & Deploy / 🧪 Smoke Test (push) Failing after 49s
Build & Deploy / ⚡ Lighthouse (push) Successful in 3m24s
Build & Deploy / 🏗️ Build (push) Successful in 3m2s
Build & Deploy / 🚀 Deploy (push) Successful in 26s
Build & Deploy / 🔔 Notify (push) Successful in 2s
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 1m14s
Build & Deploy / 🧪 QA (push) Successful in 3m20s
Build & Deploy / 🧪 Smoke Test (push) Failing after 49s
Build & Deploy / ⚡ Lighthouse (push) Successful in 3m24s
Build & Deploy / 🏗️ Build (push) Successful in 3m2s
Build & Deploy / 🚀 Deploy (push) Successful in 26s
Build & Deploy / 🔔 Notify (push) Successful in 2s
This commit is contained in:
@@ -136,18 +136,14 @@ function AddToCartButton({ product, quantity = 1 }) {
|
||||
product_category: product.category,
|
||||
price: product.price,
|
||||
quantity: quantity,
|
||||
cart_total: 150.00, // Current cart total
|
||||
cart_total: 150.0, // Current cart total
|
||||
});
|
||||
|
||||
// Actual add to cart logic
|
||||
// addToCart(product, quantity);
|
||||
};
|
||||
|
||||
return (
|
||||
<button onClick={handleAddToCart}>
|
||||
Add to Cart
|
||||
</button>
|
||||
);
|
||||
return <button onClick={handleAddToCart}>Add to Cart</button>;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -171,7 +167,7 @@ function CheckoutComplete({ order }) {
|
||||
transaction_tax: order.tax,
|
||||
transaction_shipping: order.shipping,
|
||||
product_count: order.items.length,
|
||||
products: order.items.map(item => ({
|
||||
products: order.items.map((item) => ({
|
||||
product_id: item.product.id,
|
||||
product_name: item.product.name,
|
||||
quantity: item.quantity,
|
||||
@@ -198,27 +194,21 @@ function WishlistButton({ product }) {
|
||||
|
||||
const toggleWishlist = () => {
|
||||
const newState = !isInWishlist;
|
||||
|
||||
|
||||
trackEvent(
|
||||
newState
|
||||
? AnalyticsEvents.PRODUCT_WISHLIST_ADD
|
||||
: AnalyticsEvents.PRODUCT_WISHLIST_REMOVE,
|
||||
newState ? AnalyticsEvents.PRODUCT_WISHLIST_ADD : AnalyticsEvents.PRODUCT_WISHLIST_REMOVE,
|
||||
{
|
||||
product_id: product.id,
|
||||
product_name: product.name,
|
||||
product_category: product.category,
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
setIsInWishlist(newState);
|
||||
// Update wishlist in backend
|
||||
};
|
||||
|
||||
return (
|
||||
<button onClick={toggleWishlist}>
|
||||
{isInWishlist ? '❤️' : '🤍'}
|
||||
</button>
|
||||
);
|
||||
return <button onClick={toggleWishlist}>{isInWishlist ? '❤️' : '🤍'}</button>;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -268,7 +258,7 @@ function ContactForm() {
|
||||
};
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
setFormData(prev => ({
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[e.target.name]: e.target.value,
|
||||
}));
|
||||
@@ -310,9 +300,7 @@ function NewsletterSignup() {
|
||||
return (
|
||||
<div>
|
||||
<input placeholder="Enter email" />
|
||||
<button onClick={() => handleSubscribe('user@example.com')}>
|
||||
Subscribe
|
||||
</button>
|
||||
<button onClick={() => handleSubscribe('user@example.com')}>Subscribe</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -396,10 +384,12 @@ function LoginForm() {
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
handleLogin('user@example.com', 'password');
|
||||
}}>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
handleLogin('user@example.com', 'password');
|
||||
}}
|
||||
>
|
||||
{/* Form fields */}
|
||||
<button type="submit">Login</button>
|
||||
</form>
|
||||
@@ -418,11 +408,7 @@ import { AnalyticsEvents } from '@/components/analytics/analytics-events';
|
||||
function SignupForm() {
|
||||
const { trackEvent } = useAnalytics();
|
||||
|
||||
const handleSignup = (userData: {
|
||||
email: string;
|
||||
name: string;
|
||||
company?: string;
|
||||
}) => {
|
||||
const handleSignup = (userData: { email: string; name: string; company?: string }) => {
|
||||
trackEvent(AnalyticsEvents.USER_SIGNUP, {
|
||||
user_email: userData.email,
|
||||
user_name: userData.name,
|
||||
@@ -436,14 +422,16 @@ function SignupForm() {
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
handleSignup({
|
||||
email: 'user@example.com',
|
||||
name: 'John Doe',
|
||||
company: 'ACME Corp',
|
||||
});
|
||||
}}>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
handleSignup({
|
||||
email: 'user@example.com',
|
||||
name: 'John Doe',
|
||||
company: 'ACME Corp',
|
||||
});
|
||||
}}
|
||||
>
|
||||
{/* Form fields */}
|
||||
<button type="submit">Sign Up</button>
|
||||
</form>
|
||||
@@ -483,7 +471,7 @@ function SearchBar() {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<input
|
||||
<input
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="Search products..."
|
||||
@@ -549,7 +537,7 @@ function ProductFilters() {
|
||||
<option value="cables">Cables</option>
|
||||
<option value="connectors">Connectors</option>
|
||||
</select>
|
||||
|
||||
|
||||
<button onClick={handleClearFilters}>Clear Filters</button>
|
||||
</div>
|
||||
);
|
||||
@@ -631,11 +619,7 @@ function VideoPlayer({ videoId, videoTitle }) {
|
||||
};
|
||||
|
||||
return (
|
||||
<video
|
||||
onPlay={handlePlay}
|
||||
onPause={handlePause}
|
||||
onEnded={handleComplete}
|
||||
>
|
||||
<video onPlay={handlePlay} onPause={handlePause} onEnded={handleComplete}>
|
||||
<source src="/video.mp4" type="video/mp4" />
|
||||
</video>
|
||||
);
|
||||
@@ -665,11 +649,7 @@ function DownloadButton({ fileName, fileType, fileSize }) {
|
||||
// window.location.href = `/downloads/${fileName}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<button onClick={handleDownload}>
|
||||
Download {fileName}
|
||||
</button>
|
||||
);
|
||||
return <button onClick={handleDownload}>Download {fileName}</button>;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -700,7 +680,7 @@ class ErrorBoundary extends Component<ErrorBoundaryProps> {
|
||||
|
||||
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
||||
const { trackEvent } = useAnalytics();
|
||||
|
||||
|
||||
trackEvent(AnalyticsEvents.ERROR, {
|
||||
error_message: error.message,
|
||||
error_stack: error.stack,
|
||||
@@ -742,14 +722,14 @@ function ApiClient() {
|
||||
const fetchData = async (endpoint: string) => {
|
||||
try {
|
||||
const response = await fetch(endpoint);
|
||||
|
||||
|
||||
if (!response.ok) {
|
||||
trackEvent(AnalyticsEvents.API_ERROR, {
|
||||
endpoint: endpoint,
|
||||
status_code: response.status,
|
||||
error_message: response.statusText,
|
||||
});
|
||||
|
||||
|
||||
throw new Error(`HTTP ${response.status}`);
|
||||
}
|
||||
|
||||
@@ -765,7 +745,7 @@ function ApiClient() {
|
||||
error_message: error.message,
|
||||
error_type: error.name,
|
||||
});
|
||||
|
||||
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
@@ -963,15 +943,9 @@ function CableProductPage({ cable }) {
|
||||
return (
|
||||
<div>
|
||||
<h1>{cable.name}</h1>
|
||||
<button onClick={handleTechnicalSpecDownload}>
|
||||
Download Technical Specs
|
||||
</button>
|
||||
<button onClick={handleRequestQuote}>
|
||||
Request Quote
|
||||
</button>
|
||||
<button onClick={handleBrochureDownload}>
|
||||
Download Brochure
|
||||
</button>
|
||||
<button onClick={handleTechnicalSpecDownload}>Download Technical Specs</button>
|
||||
<button onClick={handleRequestQuote}>Request Quote</button>
|
||||
<button onClick={handleBrochureDownload}>Download Brochure</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1010,12 +984,8 @@ function WindFarmProjectPage({ project }) {
|
||||
return (
|
||||
<div>
|
||||
<h1>{project.name}</h1>
|
||||
<button onClick={handleProjectInquiry}>
|
||||
Request Project Consultation
|
||||
</button>
|
||||
<button onClick={handleCableCalculation}>
|
||||
Calculate Cable Requirements
|
||||
</button>
|
||||
<button onClick={handleProjectInquiry}>Request Project Consultation</button>
|
||||
<button onClick={handleCableCalculation}>Calculate Cable Requirements</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1066,7 +1036,7 @@ test('tracks button click', () => {
|
||||
// [Umami] Tracked pageview: /products/123
|
||||
|
||||
// To test without sending data to Umami:
|
||||
// 1. Remove NEXT_PUBLIC_UMAMI_WEBSITE_ID from .env
|
||||
// 1. Remove UMAMI_WEBSITE_ID from .env
|
||||
// 2. Or set it to an empty string
|
||||
// 3. Check console logs to verify events are being tracked
|
||||
```
|
||||
@@ -1169,7 +1139,9 @@ function WebVitalsTracker() {
|
||||
}
|
||||
});
|
||||
|
||||
observer.observe({ entryTypes: ['largest-contentful-paint', 'first-input-delay', 'layout-shift'] });
|
||||
observer.observe({
|
||||
entryTypes: ['largest-contentful-paint', 'first-input-delay', 'layout-shift'],
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
@@ -1194,6 +1166,7 @@ This examples file demonstrates how to implement comprehensive analytics trackin
|
||||
- ✅ **Business-specific events** (KLZ Cables, wind farms)
|
||||
|
||||
Remember to:
|
||||
|
||||
1. Use the `useAnalytics` hook for client-side tracking
|
||||
2. Import events from `AnalyticsEvents` for consistency
|
||||
3. Include relevant context in your events
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
## Setup Checklist
|
||||
|
||||
- [ ] Add `NEXT_PUBLIC_UMAMI_WEBSITE_ID` to `.env` file
|
||||
- [ ] Add `UMAMI_WEBSITE_ID` to `.env` file
|
||||
- [ ] Verify `UmamiScript` is in your layout
|
||||
- [ ] Verify `AnalyticsProvider` is in your layout
|
||||
- [ ] Test in development mode
|
||||
@@ -12,7 +12,7 @@
|
||||
|
||||
```bash
|
||||
# Required
|
||||
NEXT_PUBLIC_UMAMI_WEBSITE_ID=59a7db94-0100-4c7e-98ef-99f45b17f9c3
|
||||
UMAMI_WEBSITE_ID=59a7db94-0100-4c7e-98ef-99f45b17f9c3
|
||||
|
||||
# Optional (defaults to https://analytics.infra.mintel.me/script.js)
|
||||
NEXT_PUBLIC_UMAMI_SCRIPT_URL=https://analytics.infra.mintel.me/script.js
|
||||
@@ -86,16 +86,16 @@ function ProductCard({ product }) {
|
||||
|
||||
## Common Events
|
||||
|
||||
| Event | When to Use | Example Properties |
|
||||
|-------|-------------|-------------------|
|
||||
| `pageview` | Page loads | `{ url: '/products/123' }` |
|
||||
| `button_click` | Button clicked | `{ button_id: 'cta', page: 'homepage' }` |
|
||||
| `form_submit` | Form submitted | `{ form_id: 'contact', form_name: 'Contact Us' }` |
|
||||
| `product_view` | Product page viewed | `{ product_id: '123', price: 99.99 }` |
|
||||
| `product_add_to_cart` | Add to cart | `{ product_id: '123', quantity: 1 }` |
|
||||
| `search` | Search performed | `{ search_query: 'cable', results: 42 }` |
|
||||
| `user_login` | User logged in | `{ user_email: 'user@example.com' }` |
|
||||
| `error` | Error occurred | `{ error_message: 'Something went wrong' }` |
|
||||
| Event | When to Use | Example Properties |
|
||||
| --------------------- | ------------------- | ------------------------------------------------- |
|
||||
| `pageview` | Page loads | `{ url: '/products/123' }` |
|
||||
| `button_click` | Button clicked | `{ button_id: 'cta', page: 'homepage' }` |
|
||||
| `form_submit` | Form submitted | `{ form_id: 'contact', form_name: 'Contact Us' }` |
|
||||
| `product_view` | Product page viewed | `{ product_id: '123', price: 99.99 }` |
|
||||
| `product_add_to_cart` | Add to cart | `{ product_id: '123', quantity: 1 }` |
|
||||
| `search` | Search performed | `{ search_query: 'cable', results: 42 }` |
|
||||
| `user_login` | User logged in | `{ user_email: 'user@example.com' }` |
|
||||
| `error` | Error occurred | `{ error_message: 'Something went wrong' }` |
|
||||
|
||||
## Testing
|
||||
|
||||
@@ -112,7 +112,7 @@ In development, you'll see console logs:
|
||||
|
||||
```bash
|
||||
# .env.local
|
||||
# NEXT_PUBLIC_UMAMI_WEBSITE_ID=
|
||||
# UMAMI_WEBSITE_ID=
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
@@ -120,8 +120,9 @@ In development, you'll see console logs:
|
||||
### Analytics Not Working?
|
||||
|
||||
1. **Check environment variables:**
|
||||
|
||||
```bash
|
||||
echo $NEXT_PUBLIC_UMAMI_WEBSITE_ID
|
||||
echo $UMAMI_WEBSITE_ID
|
||||
```
|
||||
|
||||
2. **Verify script is loading:**
|
||||
@@ -136,12 +137,12 @@ In development, you'll see console logs:
|
||||
|
||||
### Common Issues
|
||||
|
||||
| Issue | Solution |
|
||||
|-------|----------|
|
||||
| No data in Umami | Check website ID and script URL |
|
||||
| Events not tracking | Verify `useAnalytics` hook is used |
|
||||
| Script not loading | Check network connection, CORS |
|
||||
| Wrong data | Verify event properties are correct |
|
||||
| Issue | Solution |
|
||||
| ------------------- | ----------------------------------- |
|
||||
| No data in Umami | Check website ID and script URL |
|
||||
| Events not tracking | Verify `useAnalytics` hook is used |
|
||||
| Script not loading | Check network connection, CORS |
|
||||
| Wrong data | Verify event properties are correct |
|
||||
|
||||
## Performance Tips
|
||||
|
||||
|
||||
@@ -20,7 +20,7 @@ Add these to your `.env` file:
|
||||
|
||||
```bash
|
||||
# Required: Your Umami website ID
|
||||
NEXT_PUBLIC_UMAMI_WEBSITE_ID=59a7db94-0100-4c7e-98ef-99f45b17f9c3
|
||||
UMAMI_WEBSITE_ID=59a7db94-0100-4c7e-98ef-99f45b17f9c3
|
||||
|
||||
# Optional: Custom Umami script URL (defaults to https://analytics.infra.mintel.me/script.js)
|
||||
NEXT_PUBLIC_UMAMI_SCRIPT_URL=https://analytics.infra.mintel.me/script.js
|
||||
@@ -32,7 +32,7 @@ The `docker-compose.yml` already includes the environment variables:
|
||||
|
||||
```yaml
|
||||
environment:
|
||||
- NEXT_PUBLIC_UMAMI_WEBSITE_ID=${NEXT_PUBLIC_UMAMI_WEBSITE_ID}
|
||||
- UMAMI_WEBSITE_ID=${UMAMI_WEBSITE_ID}
|
||||
- NEXT_PUBLIC_UMAMI_SCRIPT_URL=${NEXT_PUBLIC_UMAMI_SCRIPT_URL:-https://analytics.infra.mintel.me/script.js}
|
||||
```
|
||||
|
||||
@@ -75,11 +75,7 @@ function ProductCard({ product }) {
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<button onClick={handleAddToCart}>
|
||||
Add to Cart
|
||||
</button>
|
||||
);
|
||||
return <button onClick={handleAddToCart}>Add to Cart</button>;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -96,7 +92,7 @@ function CustomNavigation() {
|
||||
const navigateToCustomPage = () => {
|
||||
// Track a custom pageview
|
||||
trackPageview('/custom-path?param=value');
|
||||
|
||||
|
||||
// Then perform navigation
|
||||
window.location.href = '/custom-path?param=value';
|
||||
};
|
||||
@@ -277,11 +273,7 @@ function ErrorBoundary({ children }) {
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<ErrorBoundary onError={handleError}>
|
||||
{children}
|
||||
</ErrorBoundary>
|
||||
);
|
||||
return <ErrorBoundary onError={handleError}>{children}</ErrorBoundary>;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -289,20 +281,20 @@ function ErrorBoundary({ children }) {
|
||||
|
||||
### Common Events
|
||||
|
||||
| Event Name | Description | Example Properties |
|
||||
|------------|-------------|-------------------|
|
||||
| `pageview` | Page view | `{ url: '/products/123' }` |
|
||||
| `button_click` | Button clicked | `{ button_id: 'cta-primary', page: 'homepage' }` |
|
||||
| `link_click` | Link clicked | `{ link_url: '/products', link_text: 'View Products' }` |
|
||||
| `form_submit` | Form submitted | `{ form_id: 'contact-form', form_name: 'Contact Us' }` |
|
||||
| `product_view` | Product page viewed | `{ product_id: '123', product_name: 'Cable', price: 99.99 }` |
|
||||
| `product_add_to_cart` | Product added to cart | `{ product_id: '123', quantity: 1 }` |
|
||||
| `product_purchase` | Product purchased | `{ product_id: '123', transaction_id: 'TXN-123' }` |
|
||||
| `search` | Search performed | `{ search_query: 'cable', search_results_count: 42 }` |
|
||||
| `filter_apply` | Filter applied | `{ filter_type: 'category', filter_value: 'high-voltage' }` |
|
||||
| `user_login` | User logged in | `{ user_email: 'user@example.com' }` |
|
||||
| `user_signup` | User signed up | `{ user_email: 'user@example.com' }` |
|
||||
| `error` | Error occurred | `{ error_message: 'Something went wrong' }` |
|
||||
| Event Name | Description | Example Properties |
|
||||
| --------------------- | --------------------- | ------------------------------------------------------------ |
|
||||
| `pageview` | Page view | `{ url: '/products/123' }` |
|
||||
| `button_click` | Button clicked | `{ button_id: 'cta-primary', page: 'homepage' }` |
|
||||
| `link_click` | Link clicked | `{ link_url: '/products', link_text: 'View Products' }` |
|
||||
| `form_submit` | Form submitted | `{ form_id: 'contact-form', form_name: 'Contact Us' }` |
|
||||
| `product_view` | Product page viewed | `{ product_id: '123', product_name: 'Cable', price: 99.99 }` |
|
||||
| `product_add_to_cart` | Product added to cart | `{ product_id: '123', quantity: 1 }` |
|
||||
| `product_purchase` | Product purchased | `{ product_id: '123', transaction_id: 'TXN-123' }` |
|
||||
| `search` | Search performed | `{ search_query: 'cable', search_results_count: 42 }` |
|
||||
| `filter_apply` | Filter applied | `{ filter_type: 'category', filter_value: 'high-voltage' }` |
|
||||
| `user_login` | User logged in | `{ user_email: 'user@example.com' }` |
|
||||
| `user_signup` | User signed up | `{ user_email: 'user@example.com' }` |
|
||||
| `error` | Error occurred | `{ error_message: 'Something went wrong' }` |
|
||||
|
||||
### Custom Events
|
||||
|
||||
@@ -385,8 +377,9 @@ The analytics system includes development mode logging:
|
||||
### Analytics Not Working
|
||||
|
||||
1. **Check environment variables:**
|
||||
|
||||
```bash
|
||||
echo $NEXT_PUBLIC_UMAMI_WEBSITE_ID
|
||||
echo $UMAMI_WEBSITE_ID
|
||||
```
|
||||
|
||||
2. **Verify the script is loading:**
|
||||
@@ -405,11 +398,11 @@ In development mode, you'll see console logs for all tracked events. This helps
|
||||
|
||||
### Disabling Analytics
|
||||
|
||||
To disable analytics (e.g., for local development), simply remove the `NEXT_PUBLIC_UMAMI_WEBSITE_ID` environment variable:
|
||||
To disable analytics (e.g., for local development), simply remove the `UMAMI_WEBSITE_ID` environment variable:
|
||||
|
||||
```bash
|
||||
# .env.local (not committed to git)
|
||||
# NEXT_PUBLIC_UMAMI_WEBSITE_ID=
|
||||
# UMAMI_WEBSITE_ID=
|
||||
```
|
||||
|
||||
## Performance
|
||||
@@ -438,6 +431,7 @@ The analytics implementation is optimized for performance:
|
||||
## Support
|
||||
|
||||
For issues or questions about the analytics implementation, check:
|
||||
|
||||
1. This README for usage examples
|
||||
2. The component source code for implementation details
|
||||
3. The Umami documentation for platform-specific questions
|
||||
|
||||
@@ -16,6 +16,7 @@ The project already had a solid foundation:
|
||||
## What Was Enhanced
|
||||
|
||||
### 1. **Enhanced UmamiScript** (`components/analytics/UmamiScript.tsx`)
|
||||
|
||||
- ✅ Added TypeScript props interface for customization
|
||||
- ✅ Added JSDoc documentation with usage examples
|
||||
- ✅ Added error handling for script loading failures
|
||||
@@ -23,11 +24,13 @@ The project already had a solid foundation:
|
||||
- ✅ Improved type safety and comments
|
||||
|
||||
### 2. **Enhanced AnalyticsProvider** (`components/analytics/AnalyticsProvider.tsx`)
|
||||
|
||||
- ✅ Added comprehensive JSDoc documentation
|
||||
- ✅ Added development mode logging
|
||||
- ✅ Improved code comments
|
||||
|
||||
### 3. **New Custom Hook** (`components/analytics/useAnalytics.ts`)
|
||||
|
||||
- ✅ Type-safe `useAnalytics` hook for easy event tracking
|
||||
- ✅ `trackEvent()` method for custom events
|
||||
- ✅ `trackPageview()` method for manual pageview tracking
|
||||
@@ -35,12 +38,14 @@ The project already had a solid foundation:
|
||||
- ✅ Development mode logging
|
||||
|
||||
### 4. **Event Definitions** (`components/analytics/analytics-events.ts`)
|
||||
|
||||
- ✅ Centralized event constants for consistency
|
||||
- ✅ Type-safe event names
|
||||
- ✅ Helper functions for common event properties
|
||||
- ✅ 30+ predefined events for various use cases
|
||||
|
||||
### 5. **Comprehensive Documentation**
|
||||
|
||||
- ✅ **README.md** - Full documentation with setup, usage, and best practices
|
||||
- ✅ **EXAMPLES.md** - 20+ practical examples for different scenarios
|
||||
- ✅ **QUICK_REFERENCE.md** - Quick start guide and troubleshooting
|
||||
@@ -63,12 +68,14 @@ components/analytics/
|
||||
## Key Features
|
||||
|
||||
### 🚀 Modern Implementation
|
||||
|
||||
- Uses Next.js `Script` component (not old-school `<script>` tags)
|
||||
- TypeScript for type safety
|
||||
- React hooks for clean API
|
||||
- Environment variable configuration
|
||||
|
||||
### 📊 Comprehensive Tracking
|
||||
|
||||
- Automatic pageview tracking on route changes
|
||||
- Custom event tracking with properties
|
||||
- E-commerce events (products, cart, purchases)
|
||||
@@ -77,6 +84,7 @@ components/analytics/
|
||||
- Error and performance tracking
|
||||
|
||||
### 🎯 Developer Experience
|
||||
|
||||
- Type-safe event tracking
|
||||
- Centralized event definitions
|
||||
- Development mode logging
|
||||
@@ -84,6 +92,7 @@ components/analytics/
|
||||
- 20+ practical examples
|
||||
|
||||
### 🔒 Privacy & Performance
|
||||
|
||||
- No PII tracking by default
|
||||
- Script loads after page is interactive
|
||||
- Minimal performance impact
|
||||
@@ -95,7 +104,7 @@ The project is already configured in `docker-compose.yml`:
|
||||
|
||||
```yaml
|
||||
environment:
|
||||
- NEXT_PUBLIC_UMAMI_WEBSITE_ID=${NEXT_PUBLIC_UMAMI_WEBSITE_ID}
|
||||
- UMAMI_WEBSITE_ID=${UMAMI_WEBSITE_ID}
|
||||
- NEXT_PUBLIC_UMAMI_SCRIPT_URL=${NEXT_PUBLIC_UMAMI_SCRIPT_URL:-https://analytics.infra.mintel.me/script.js}
|
||||
```
|
||||
|
||||
@@ -104,7 +113,7 @@ environment:
|
||||
Add to your `.env` file:
|
||||
|
||||
```bash
|
||||
NEXT_PUBLIC_UMAMI_WEBSITE_ID=59a7db94-0100-4c7e-98ef-99f45b17f9c3
|
||||
UMAMI_WEBSITE_ID=59a7db94-0100-4c7e-98ef-99f45b17f9c3
|
||||
```
|
||||
|
||||
## Usage Examples
|
||||
@@ -188,7 +197,7 @@ In development, you'll see console logs:
|
||||
|
||||
```bash
|
||||
# .env.local
|
||||
# NEXT_PUBLIC_UMAMI_WEBSITE_ID=
|
||||
# UMAMI_WEBSITE_ID=
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
@@ -196,8 +205,9 @@ In development, you'll see console logs:
|
||||
### Analytics Not Working?
|
||||
|
||||
1. **Check environment variables:**
|
||||
|
||||
```bash
|
||||
echo $NEXT_PUBLIC_UMAMI_WEBSITE_ID
|
||||
echo $UMAMI_WEBSITE_ID
|
||||
```
|
||||
|
||||
2. **Verify script is loading:**
|
||||
@@ -212,12 +222,12 @@ In development, you'll see console logs:
|
||||
|
||||
### Common Issues
|
||||
|
||||
| Issue | Solution |
|
||||
|-------|----------|
|
||||
| No data in Umami | Check website ID and script URL |
|
||||
| Events not tracking | Verify `useAnalytics` hook is used |
|
||||
| Script not loading | Check network connection, CORS |
|
||||
| Wrong data | Verify event properties are correct |
|
||||
| Issue | Solution |
|
||||
| ------------------- | ----------------------------------- |
|
||||
| No data in Umami | Check website ID and script URL |
|
||||
| Events not tracking | Verify `useAnalytics` hook is used |
|
||||
| Script not loading | Check network connection, CORS |
|
||||
| Wrong data | Verify event properties are correct |
|
||||
|
||||
## Performance Tips
|
||||
|
||||
@@ -239,13 +249,13 @@ In development, you'll see console logs:
|
||||
1. ✅ **Setup complete** - All files are in place
|
||||
2. ✅ **Documentation complete** - README, EXAMPLES, QUICK_REFERENCE
|
||||
3. ✅ **Code enhanced** - Better TypeScript, error handling, docs
|
||||
4. 📝 **Add to .env** - Set `NEXT_PUBLIC_UMAMI_WEBSITE_ID`
|
||||
4. 📝 **Add to .env** - Set `UMAMI_WEBSITE_ID`
|
||||
5. 🧪 **Test in development** - Verify events are tracked
|
||||
6. 🚀 **Deploy** - Analytics will work in production
|
||||
|
||||
## Quick Start Checklist
|
||||
|
||||
- [ ] Add `NEXT_PUBLIC_UMAMI_WEBSITE_ID` to `.env` file
|
||||
- [ ] Add `UMAMI_WEBSITE_ID` to `.env` file
|
||||
- [ ] Verify `UmamiScript` is in `app/[locale]/layout.tsx`
|
||||
- [ ] Verify `AnalyticsProvider` is in `app/[locale]/layout.tsx`
|
||||
- [ ] Test in development mode (check console logs)
|
||||
|
||||
Reference in New Issue
Block a user