bert.hausmans/questionnaire
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Matomo analytics tracking with SPA route tracking

Browse Source
This commit is contained in:
Bert Hausmans
2026-01-06 08:50:26 +01:00
parent 799a6b1dea
commit 60a3159996
3 changed files with 56 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
index.html
View File

@@ -8,6 +8,19 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<!-- Matomo Analytics -->
<script>
var _paq = window._paq = window._paq || [];
_paq.push(['enableLinkTracking']);
(function() {
var u="//analytics.hausdesign.nl/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '12']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo -->
</head>
<body>
<div id="root"></div>

4
src/App.tsx
View File

@@ -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 (
<AuthProvider>
<Routes>

39
src/hooks/useMatomo.ts Normal file
View File

@@ -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<Array<string | number>>
}
}
/**
* 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])
}
}