add matomo tracking (#148)

achen2401 · Amy Chen · Amy Chen · web-flow · commit 5360d12e7cc9 · 2024-12-04T13:02:25.000-08:00
* add matomo tracking

* fix based on feedback

* use user info from access token

* add comment

* fix typo per feedback

* fix typo per feedback

---------

Co-authored-by: Amy Chen &lt;amysbubble@Amys-MacBook-Pro-3.local&gt;
Co-authored-by: Amy Chen &lt;amysbubble@MacBook-Pro-137.local&gt;
diff --git a/public/index.html b/public/index.html
@@ -1,19 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <!-- Use Internet Explorer Edge Standards mode -->
-    <meta http-equiv="x-ua-compatible" content="IE=edge" >
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <meta http-equiv="x-ua-compatible" content="IE=edge" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
     <title>Washington Opioid Clinical Assessment</title>
   </head>
   <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
     <div id="root"></div>
   </body>
 </html>
diff --git a/src/components/Landing/index.js b/src/components/Landing/index.js
@@ -6,6 +6,7 @@ import executeElm from "../../utils/executeELM";
 import * as landingUtils from "./utility";
 import { datishFormat } from "../../helpers/formatit";
 import {
+  addMatomoTracking,
   getEnvSystemType,
   getEPICPatientIdFromSource,
   getPatientNameFromSource,
@@ -98,6 +99,8 @@ export default class Landing extends Component {
           });
           return;
         }
+        // add PIWIK tracking
+        addMatomoTracking();
         writeToLog("application loaded", "info", this.getPatientLogParams());
         //set FHIR results
         let result = {};
diff --git a/src/helpers/utility.js b/src/helpers/utility.js
@@ -2,6 +2,7 @@ import moment from "moment";
 import { toBlob, toJpeg } from "html-to-image";
 import { getEnv, ENV_VAR_PREFIX } from "../utils/envConfig";
 import reportSummarySections from "../config/report_config";
+import { getTokenInfoFromStorage } from "./timeout";
 
 /*
  * return number of days between two dates
@@ -707,3 +708,45 @@ export function dedupArrObjects(arr, key) {
     return acc;
   }, []);
 }
+
+export function getMatomoTrackingSiteId() {
+  return getEnv(`${ENV_VAR_PREFIX}_MATOMO_SITE_ID`);
+}
+
+export function getUserIdFromAccessToken() {
+  const accessToken = getTokenInfoFromStorage();
+  if (!accessToken) return null;
+  if (accessToken.profile) return accessToken.profile;
+  if (accessToken.fhirUser) return accessToken.fhirUser;
+  return accessToken["preferred_username"];
+}
+
+export function addMatomoTracking() {
+  // already generated script, return
+  if (document.querySelector("#matomoScript")) return;
+  const userId = getUserIdFromAccessToken();
+  // no user Id return
+  if (!userId) return;
+  const siteId = getMatomoTrackingSiteId();
+  // no site Id return
+  if (!siteId) return;
+  // init global piwik tracking object
+  window._paq = [];
+  window._paq.push(["trackPageView"]);
+  window._paq.push(["enableLinkTracking"]);
+  window._paq.push(["setSiteId", siteId]);
+  window._paq.push(["setUserId", userId]);
+
+  let u = "https://piwik.cirg.washington.edu/";
+  window._paq.push(["setTrackerUrl", u + "matomo.php"]);
+  let d = document,
+    g = d.createElement("script"),
+    headElement = document.querySelector("head");
+  g.type = "text/javascript";
+  g.async = true;
+  g.defer = true;
+  g.setAttribute("src", u + "matomo.js");
+  g.setAttribute("id", "matomoScript");
+  headElement.appendChild(g);
+}
+
