Add Matomo analytics tracking with Suspense fix

- Created MatomoAnalytics component with page view and event tracking
- Fixed Next.js build issue by wrapping useSearchParams in Suspense
- Added tracking for user interactions:
  - Search functionality
  - Table sorting
  - Filter changes (material, finish, color)
  - Dark mode toggles
  - Admin login success/failure
  - Admin filament create/update actions
- Updated Amplify environment variables via AWS CLI
- Analytics URL: https://analytics.demirix.dev (Site ID: 7)
- Only loads when environment variables are set

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
DaX
2025-06-30 23:01:01 +02:00
parent 966d253a7e
commit a2ec640ecc
8 changed files with 129 additions and 10 deletions

View File

@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
import { FilamentTableV2 } from '../src/components/FilamentTableV2';
import { Filament } from '../src/types/filament';
import { filamentService } from '../src/services/api';
import { trackEvent } from '../src/components/MatomoAnalytics';
export default function Home() {
const [filaments, setFilaments] = useState<Filament[]>([]);
@@ -103,7 +104,10 @@ export default function Home() {
<div className="flex-shrink-0 ml-4">
{mounted ? (
<button
onClick={() => setDarkMode(!darkMode)}
onClick={() => {
setDarkMode(!darkMode);
trackEvent('UI', 'Dark Mode Toggle', darkMode ? 'Light' : 'Dark');
}}
className="p-2 bg-white/50 dark:bg-gray-700/50 backdrop-blur text-gray-800 dark:text-gray-200 rounded-full hover:bg-white/80 dark:hover:bg-gray-600/80 transition-all duration-200 shadow-md"
title={darkMode ? 'Svetla tema' : 'Tamna tema'}
>