diff --git a/index.html b/index.html index 0eb65e3..c078683 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,19 @@ + + +
diff --git a/src/App.tsx b/src/App.tsx index 7e174f3..3cb8230 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -10,8 +10,12 @@ import { Users } from './pages/Users' import { ChangePassword } from './pages/ChangePassword' import { PublicQuestionnaire } from './pages/PublicQuestionnaire' import { NotFound } from './pages/NotFound' +import { useMatomo } from './hooks/useMatomo' function App() { + // Track page views for Matomo analytics + useMatomo() + return ( diff --git a/src/hooks/useMatomo.ts b/src/hooks/useMatomo.ts new file mode 100644 index 0000000..96ebf04 --- /dev/null +++ b/src/hooks/useMatomo.ts @@ -0,0 +1,39 @@ +import { useEffect } from 'react' +import { useLocation } from 'react-router-dom' + +// Declare Matomo's _paq array on window +declare global { + interface Window { + _paq?: Array> + } +} + +/** + * Hook to track page views in Matomo for React SPA + * Automatically tracks route changes + */ +export function useMatomo() { + const location = useLocation() + + useEffect(() => { + // Track page view when route changes + if (window._paq) { + // Set custom URL (for SPA routing) + window._paq.push(['setCustomUrl', window.location.href]) + // Set document title + window._paq.push(['setDocumentTitle', document.title]) + // Track the page view + window._paq.push(['trackPageView']) + } + }, [location.pathname, location.search]) +} + +/** + * Track a custom event in Matomo + */ +export function trackEvent(category: string, action: string, name?: string, value?: number) { + if (window._paq) { + window._paq.push(['trackEvent', category, action, name || '', value || 0]) + } +} +