diff --git a/.env.example b/.env.example index 51609fd..8719053 100644 --- a/.env.example +++ b/.env.example @@ -14,4 +14,7 @@ HCAPTCHA_SECRET= NEXT_PUBLIC_SANITY_PROJECT_ID= SANITY_AUTH_TOKEN= NEXT_PUBLIC_SANITY_DATASET= -SANITY_WEBHOOK_SECRET= \ No newline at end of file +SANITY_WEBHOOK_SECRET= + +NEXT_PUBLIC_MATOMO_URL= +NEXT_PUBLIC_MATOMO_SITE_ID= \ No newline at end of file diff --git a/app/layout.jsx b/app/layout.jsx index 922cdaf..2e5dc4b 100644 --- a/app/layout.jsx +++ b/app/layout.jsx @@ -1,5 +1,6 @@ import { Inter } from "next/font/google"; import { ThemeProvider } from "next-themes"; +import Analytics from "@/components/Analytics"; import "./globals.css"; const inter = Inter({ @@ -49,6 +50,7 @@ export default function RootLayout({ children }) { disableTransitionOnChange={true} > {children} + diff --git a/components/Analytics.jsx b/components/Analytics.jsx new file mode 100644 index 0000000..1ded51b --- /dev/null +++ b/components/Analytics.jsx @@ -0,0 +1,65 @@ +"use client"; +import { useEffect, Suspense } from "react"; +import { usePathname, useSearchParams } from "next/navigation"; +import PropTypes from "prop-types"; +const MATOMO_URL = `${process.env.NEXT_PUBLIC_MATOMO_URL}`; +const MATOMO_SITE_ID = `${process.env.NEXT_PUBLIC_MATOMO_SITE_ID}`; +let firstUseEffect = true; +let firstUseEffect2 = true; + +function AnalyticsInternal(props) { + const pathname = usePathname(); + const searchParams = useSearchParams(); + + useEffect(() => { + if (firstUseEffect) { + firstUseEffect = false; + } else { + if (firstUseEffect2) { + firstUseEffect2 = false; + if (props.pagesRouter) return; + } + + // Track page view + const _paq = (window._paq = window._paq || []); + _paq.push(["setDocumentTitle", document.title]); + _paq.push(["setCustomUrl", document.location]); + _paq.push(["trackPageView"]); + return; + } + + // Matomo tracking code + const _paq = (window._paq = window._paq || []); + /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ + _paq.push(["disableCookies"]); + _paq.push(["trackPageView"]); + _paq.push(["enableLinkTracking"]); + (function () { + const u = MATOMO_URL + "/"; + _paq.push(["setTrackerUrl", u + "matomo.php"]); + _paq.push(["setSiteId", MATOMO_SITE_ID]); + const d = document, + g = d.createElement("script"), + s = d.getElementsByTagName("script")[0]; + g.async = true; + g.src = u + "matomo.js"; + s.parentNode.insertBefore(g, s); + })(); + }, [pathname, searchParams, props.pagesRouter]); + + return null; +} + +function Analytics(props) { + return ( + + + + ); +} + +Analytics.propTypes = { + pagesRouter: PropTypes.bool +}; + +export default Analytics;