Add Matomo tracking

.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

.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

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 />

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

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}"
+MATOMO_DOMAIN = "{MATOMO_DOMAIN}"