Implement Matomo tracking

- Track navigation to external websites
- Track navigation to interal pages
- Track changing of district type

closes #38

.gitignore

@@ -9,3 +9,4 @@ node_modules
 /blob-report/
 /playwright/.cache/
  .vscode 
+.DS_Store

app/components/AdminDropdown/DistrictTypeDropdown.tsx

@@ -1,4 +1,5 @@
 import { AdminDropdownProps, AdminDropdown } from ".";
+import { analytics } from "../../utils/analytics";
 
 export interface DistrictTypeDropdownProps
   extends Pick<AdminDropdownProps, "selectValue"> {
@@ -12,6 +13,11 @@ export function DistrictTypeDropdown({
   const updateDistrictType = (nextDistrictType: string | null) => {
     const nextSearchParams: Record<string, string> =
       nextDistrictType === null ? {} : { districtType: nextDistrictType };
+    analytics({
+      category: "Dropdown Menu",
+      action: "Change District Type",
+      name: nextDistrictType,
+    });
     updateSearchParams(nextSearchParams);
   };
 

app/root.tsx

@@ -44,6 +44,8 @@ import {
 } from "./components/GoToDistrictBtn";
 import { GoToCommunityDistrictBtn } from "./components/GoToDistrictBtn/GoToCommunityDistrictBtn";
 import { WelcomePanel } from "./components/WelcomePanel";
+import { useEffect } from "react";
+import { initializeMatomoTagManager } from "./utils/analytics";
 
 export type BoroughId = null | string;
 export type DistrictType = null | "cd" | "ccd";
@@ -142,6 +144,9 @@ function Document({
 }
 
 export default function App() {
+  useEffect(() => {
+    initializeMatomoTagManager("SmoWWpiD");
+  }, []);
   const navigate = useNavigate();
   const { pathname } = useLocation();
   const [searchParams, setSearchParams] = useSearchParams();

app/utils/analytics.js

@@ -0,0 +1,44 @@
+export function analytics(eventData) {
+  if (eventData.value) {
+    window._paq.push([
+      "trackEvent",
+      eventData.category,
+      eventData.action,
+      eventData.name,
+      eventData.value,
+    ]);
+  } else {
+    window._paq.push([
+      "trackEvent",
+      eventData.category,
+      eventData.action,
+      eventData.name,
+    ]);
+  }
+}
+
+export function initializeMatomoTagManager(containerID) {
+  // From the initial script they provide for setup
+  var _mtm = (window._mtm = window._mtm || []);
+  _mtm.push({ "mtm.startTime": new Date().getTime(), event: "mtm.Start" });
+  var d = document,
+    g = d.createElement("script"),
+    s = d.getElementsByTagName("script")[0];
+  g.type = "text/javascript";
+  g.id = "matomo-tag-manager";
+  g.async = true;
+  g.src = `https://cdn.matomo.cloud/nycplanning.matomo.cloud/container_${containerID}.js`;
+  s.parentNode.insertBefore(g, s);
+
+  // To track pageviews, watching for changes to location.pathname
+  let previousUrlPath = location.pathname;
+  const observer = new MutationObserver(function () {
+    if (location.pathname !== previousUrlPath) {
+      previousUrlPath = location.pathname;
+      window._paq.push(["setCustomUrl", location.href]);
+      window._paq.push(["trackPageView"]);
+    }
+  });
+  const config = { subtree: true, childList: true };
+  observer.observe(document, config);
+}

setup-test.ts

@@ -25,6 +25,11 @@ Object.defineProperty(window, "scrollTo", {
   value: vi.fn(),
 });
 
+Object.defineProperty(window, "_paq", {
+  writable: true,
+  value: [],
+});
+
 /**
  * Mock Service Worker can be configured once the Handlers are generated
  */