diff --git a/app/lib/analytics.ts b/app/lib/analytics.ts new file mode 100644 index 0000000..f24490a --- /dev/null +++ b/app/lib/analytics.ts @@ -0,0 +1,26 @@ +const initTracking = (): void => { + const _paq: any[] = ((window as any)._paq = (window as any)._paq || []); + const scriptSource: string = + process.env.TRACKING_SCRIPT_URL || "//piwiki.lumeweb.com/"; + const siteId: string = process.env.TRACKING_SITE_ID || "4"; + + _paq.push(["trackPageView"]); + _paq.push(["enableLinkTracking"]); + _paq.push(["setTrackerUrl", scriptSource + "matomo.php"]); + _paq.push(["setSiteId", siteId]); + + const d: Document = document; + const g: HTMLScriptElement = d.createElement("script"); + const s: HTMLScriptElement = d.getElementsByTagName( + "script" + )[0] as HTMLScriptElement; + g.async = true; + g.src = scriptSource + "matomo.js"; + s.parentNode?.insertBefore(g, s); + + g.onerror = () => { + console.error("Error loading the tracking script."); + }; +}; + +export default initTracking; diff --git a/app/root.tsx b/app/root.tsx index 7d153d7..005c7fd 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -13,6 +13,8 @@ import "../styles/global.scss"; import { cssBundleHref } from "@remix-run/css-bundle"; // Adjust the import path as needed import "unfonts.css"; +import initTracking from "@/lib/analytics.js"; +import { useEffect } from "react"; export const links: LinksFunction = () => [ ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []), @@ -26,6 +28,12 @@ export const meta: MetaFunction = () => [ ]; export default function Root() { + useEffect(() => { + if (process.env.NODE_ENV === "production") { + initTracking(); + } + }, []); + return (