diff --git a/.gitignore b/.gitignore index 9020744..554e44b 100644 --- a/.gitignore +++ b/.gitignore @@ -9,3 +9,4 @@ node_modules /blob-report/ /playwright/.cache/ .vscode +.DS_Store \ No newline at end of file diff --git a/app/components/AdminDropdown/DistrictTypeDropdown.tsx b/app/components/AdminDropdown/DistrictTypeDropdown.tsx index e43bcba..905256f 100644 --- a/app/components/AdminDropdown/DistrictTypeDropdown.tsx +++ b/app/components/AdminDropdown/DistrictTypeDropdown.tsx @@ -1,4 +1,5 @@ import { AdminDropdownProps, AdminDropdown } from "."; +import { analytics } from "../../utils/analytics"; export interface DistrictTypeDropdownProps extends Pick { @@ -12,6 +13,11 @@ export function DistrictTypeDropdown({ const updateDistrictType = (nextDistrictType: string | null) => { const nextSearchParams: Record = nextDistrictType === null ? {} : { districtType: nextDistrictType }; + analytics({ + category: "Dropdown Menu", + action: "Change District Type", + name: nextDistrictType, + }); updateSearchParams(nextSearchParams); }; diff --git a/app/root.tsx b/app/root.tsx index eb4fb58..29bb5f3 100644 --- a/app/root.tsx +++ b/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(); diff --git a/app/utils/analytics.js b/app/utils/analytics.js new file mode 100644 index 0000000..78790de --- /dev/null +++ b/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); +} diff --git a/setup-test.ts b/setup-test.ts index 7d5da1b..5b3bf3f 100644 --- a/setup-test.ts +++ b/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 */