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

This commit is contained in:
2026-02-20 15:29:50 +01:00
parent 23bf327670
commit c646815a3a
10 changed files with 147 additions and 157 deletions

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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)