From 00c62600351c00482708855f5ab5516651f4a674 Mon Sep 17 00:00:00 2001
From: Daniel O'Connell <github@ahiru.pl>
Date: Sat, 18 May 2024 13:13:13 +0200
Subject: [PATCH] Add Matomo tracking

---
 .github/workflows/deploy-dev.yml |  2 +-
 .github/workflows/deploy.yml     |  2 +-
 app/root.tsx                     | 46 ++++++++++++++++----------------
 remix.env.d.ts                   |  2 +-
 wrangler.toml.template           |  2 +-
 5 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/.github/workflows/deploy-dev.yml b/.github/workflows/deploy-dev.yml
index 54943c2a..0c9ff155 100644
--- a/.github/workflows/deploy-dev.yml
+++ b/.github/workflows/deploy-dev.yml
@@ -24,7 +24,7 @@ jobs:
             | sed s/{CODA_TOKEN}/${{ secrets.CODA_TOKEN }}/ \
             | sed s/{CODA_INCOMING_TOKEN}/${{ secrets.CODA_INCOMING_TOKEN }}/ \
             | sed s/{CODA_WRITES_TOKEN}/${{ secrets.CODA_WRITES_TOKEN }}/ \
-            | sed s/{GOOGLE_ANALYTICS_ID}/${{ secrets.GOOGLE_ANALYTICS_ID }}/ \
+            | sed s/{MATOMO_DOMAIN}/${{ secrets.MATOMO_DOMAIN }}/ \
             > wrangler.toml
           npm ci
           npm run deploy
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index dfd10a8b..37702d54 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -23,7 +23,7 @@ jobs:
             | sed s/{CODA_TOKEN}/${{ secrets.CODA_TOKEN }}/ \
             | sed s/{CODA_INCOMING_TOKEN}/${{ secrets.CODA_INCOMING_TOKEN }}/ \
             | sed s/{CODA_WRITES_TOKEN}/${{ secrets.CODA_WRITES_TOKEN }}/ \
-            | sed s/{GOOGLE_ANALYTICS_ID}/${{ secrets.GOOGLE_ANALYTICS_ID }}/ \
+            | sed s/{MATOMO_DOMAIN}/${{ secrets.MATOMO_DOMAIN }}/ \
             > wrangler.toml
           npm ci
           npm run deploy
diff --git a/app/root.tsx b/app/root.tsx
index e44a1d36..a073ff84 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -101,31 +101,31 @@ export const loader = async ({request}: Parameters<LoaderFunction>[0]) => {
     url: request.url,
     embed,
     showSearch,
-    gaTrackingId: GOOGLE_ANALYTICS_ID,
+    matomoDomain: MATOMO_DOMAIN,
   }
 }
 
-const GoogleAnalytics = ({gaTrackingId}: {gaTrackingId?: string}) => {
-  if (!gaTrackingId) return null
+const AnaliticsTag = ({matomoDomain}: {matomoDomain?: string}) => {
+  if (!matomoDomain) return null
   return (
-    <>
-      <script async src={`https://www.googletagmanager.com/gtag/js?id=${gaTrackingId}`} />
-      <script
-        async
-        id="gtag-init"
-        dangerouslySetInnerHTML={{
-          __html: `
-                window.dataLayer = window.dataLayer || [];
-                function gtag(){dataLayer.push(arguments);}
-                gtag('js', new Date());
-
-                gtag('config', '${gaTrackingId}', {
-                  page_path: window.location.pathname,
-                });
-        `,
-        }}
-      />
-    </>
+    <script
+      async
+      dangerouslySetInnerHTML={{
+        __html: `
+                        var _paq = window._paq = window._paq || [];
+                        /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+                        _paq.push(["disableCookies"]);
+                        _paq.push(['trackPageView']);
+                        _paq.push(['enableLinkTracking']);
+                        (function() {
+                            var u="https://${matomoDomain}.matomo.cloud/";
+                            _paq.push(['setTrackerUrl', u+'matomo.php']);
+                            _paq.push(['setSiteId', '3']);
+                            var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+                            g.async=true; g.src='https://cdn.matomo.cloud/${matomoDomain}.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g,s);
+                        })();`,
+      }}
+    />
   )
 }
 
@@ -182,7 +182,7 @@ type Loader = Awaited<ReturnType<typeof loader>>
 export type Context = Pick<Loader, 'embed' | 'showSearch'>
 
 export default function App() {
-  const {embed, showSearch, gaTrackingId} = useLoaderData<Loader>()
+  const {embed, showSearch, matomoDomain} = useLoaderData<Loader>()
   const {savedTheme} = useTheme()
   const context: Context = {embed, showSearch}
 
@@ -208,7 +208,7 @@ export default function App() {
 
   return (
     <BasePage embed={embed} savedTheme={savedTheme}>
-      <GoogleAnalytics gaTrackingId={gaTrackingId} />
+      <AnaliticsTag matomoDomain={matomoDomain} />
       <Outlet context={context} />
       <ScrollRestoration />
       <Scripts />
diff --git a/remix.env.d.ts b/remix.env.d.ts
index 00459893..adf4ee5a 100644
--- a/remix.env.d.ts
+++ b/remix.env.d.ts
@@ -9,4 +9,4 @@ declare const CODA_INCOMING_TOKEN: string
 declare const CODA_WRITES_TOKEN: string
 declare const NLP_SEARCH_ENDPOINT: string
 declare const ALLOW_ORIGINS: string
-declare const GOOGLE_ANALYTICS_ID: string
+declare const MATOMO_DOMAIN: string
diff --git a/wrangler.toml.template b/wrangler.toml.template
index 8bf8fab9..44213334 100644
--- a/wrangler.toml.template
+++ b/wrangler.toml.template
@@ -21,4 +21,4 @@ CODA_INCOMING_TOKEN = "{CODA_INCOMING_TOKEN}"
 CODA_WRITES_TOKEN = "{CODA_WRITES_TOKEN}"
 NLP_SEARCH_ENDPOINT = "https://stampy-nlp-t6p37v2uia-uw.a.run.app/"
 ALLOW_ORIGINS = "https://chat.aisafety.info"
-GOOGLE_ANALYTICS_ID = "{GOOGLE_ANALYTICS_ID}"
\ No newline at end of file
+MATOMO_DOMAIN = "{MATOMO_DOMAIN}"
\ No newline at end of file