DaX/Filamenteka
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Matomo analytics tracking with Suspense fix

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

7
app/layout.tsx
View File

@@ -1,6 +1,7 @@
import type { Metadata } from 'next'
import '../src/styles/index.css'
import { BackToTop } from '../src/components/BackToTop'
import { MatomoAnalytics } from '../src/components/MatomoAnalytics'
export const metadata: Metadata = {
title: 'Filamenteka',
@@ -46,6 +47,12 @@ export default function RootLayout({
<body suppressHydrationWarning>
{children}
<BackToTop />
{process.env.NEXT_PUBLIC_MATOMO_URL && process.env.NEXT_PUBLIC_MATOMO_SITE_ID && (
<MatomoAnalytics
matomoUrl={process.env.NEXT_PUBLIC_MATOMO_URL}
siteId={process.env.NEXT_PUBLIC_MATOMO_SITE_ID}
/>
)}
</body>
</html>
)

6
app/page.tsx
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'}
>

3
app/upadaj/dashboard/page.tsx
View File

@@ -4,6 +4,7 @@ import { useState, useEffect, useMemo } from 'react';
import { useRouter } from 'next/navigation';
import { filamentService, colorService } from '@/src/services/api';
import { Filament } from '@/src/types/filament';
import { trackEvent } from '@/src/components/MatomoAnalytics';
// Removed unused imports for Bambu Lab color categorization
import '@/src/styles/select.css';
@@ -191,8 +192,10 @@ export default function AdminDashboard() {
if (id) {
await filamentService.update(id, cleanData);
trackEvent('Admin', 'Update Filament', `${cleanData.tip} ${cleanData.finish} ${cleanData.boja}`);
} else {
await filamentService.create(cleanData);
trackEvent('Admin', 'Create Filament', `${cleanData.tip} ${cleanData.finish} ${cleanData.boja}`);
}
setEditingFilament(null);

5
app/upadaj/page.tsx
View File

@@ -3,6 +3,7 @@
import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { authService } from '@/src/services/api';
import { trackEvent } from '@/src/components/MatomoAnalytics';
export default function AdminLogin() {
const router = useRouter();
@@ -28,11 +29,15 @@ export default function AdminLogin() {
localStorage.setItem('authToken', response.token);
localStorage.setItem('tokenExpiry', String(Date.now() + 24 * 60 * 60 * 1000)); // 24 hours
// Track successful login
trackEvent('Admin', 'Login', 'Success');
// Redirect to admin dashboard
router.push('/upadaj/dashboard');
} catch (err: any) {
setError('Neispravno korisničko ime ili lozinka');
console.error('Login error:', err);
trackEvent('Admin', 'Login', 'Failed');
} finally {
setLoading(false);
}