Merge pull request #21 from janbaykara/feature/analytics

Add Posthog analytics and cookie banner
LMacPhail · Dec 29, 2023 · 03f014b · 03f014b
2 parents d4cc907 + 9d2a08c
commit 03f014b
Show file tree

Hide file tree

Showing 9 changed files with 125 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -14,13 +14,15 @@
     "@types/node": "^16.7.13",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "posthog-js": "^1.95.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.1.3",
     "react-scripts": "5.0.1",
     "rippleui": "^1.12.1",
     "styled-components": "^6.1.1",
     "typescript": "^4.4.2",
+    "vanilla-cookieconsent": "^3.0.0-rc.17",
     "web-vitals": "^2.1.0"
   },
   "scripts": {

diff --git a/src/App.tsx b/src/App.tsx
@@ -9,6 +9,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { fetchMPs } from "./data/utils/utils";
 import { DataStatus, MP } from "./data/types";
 import { SET_DATA_ACTION } from "./state/actions";
+import { useAnalytics } from "./analytics";
 
 function App() {
   const view = useSelector((state: AppState) => state.view);
@@ -23,6 +24,7 @@ function App() {
     [dispatch]
   );
   fetchMPs(updateData);
+  useAnalytics()
 
   return (
     <div className="">

diff --git a/src/analytics.ts b/src/analytics.ts
@@ -0,0 +1,87 @@
+import posthog from 'posthog-js'
+import "vanilla-cookieconsent/dist/cookieconsent.css";
+import * as CookieConsent from "vanilla-cookieconsent";
+import { useEffect } from 'react';
+
+export async function enablePosthog() {
+  if (!process.env.REACT_APP_POSTHOG_API_KEY || !process.env.REACT_APP_POSTHOG_API_URL) {
+    return
+  }
+  posthog.init(process.env.REACT_APP_POSTHOG_API_KEY!, {
+    api_host: process.env.REACT_APP_POSTHOG_API_URL
+  })
+  posthog.opt_in_capturing()
+}
+
+export async function disablePosthog() {
+  posthog.opt_out_capturing()
+}
+
+export function showPrivacyPreferences () {
+  CookieConsent.show();
+}
+
+export function captureAnalyticsEvent (event: string, properties: any) {
+  posthog.capture(event, properties)
+}
+
+export function captureAnalyticsPageView (page: string) {
+  posthog.capture('change tab', { page })
+}
+
+export function useAnalytics () {
+  useEffect(() => {
+    CookieConsent.run({
+        revision: 1,
+        categories: {
+          analytics: {
+            enabled: true,
+            readOnly: false,
+            services: {
+              posthog: {
+                label: 'PostHog',
+                onAccept: () => {
+                  enablePosthog()
+                },
+                onReject: () => {
+                  disablePosthog()
+                }
+              }
+            }
+          }
+        },
+        language: {
+          default: 'en',
+          translations: {
+            en: {
+              consentModal: {
+                title: 'Can we use cookies to track usage?',
+                description: "You'll help us learn how to improve the tool for others",
+                acceptAllBtn: 'Accept',
+                acceptNecessaryBtn: 'Reject',
+                showPreferencesBtn: 'Manage privacy preferences'
+              },
+              preferencesModal: {
+                title: 'Manage privacy preferences',
+                acceptAllBtn: 'Accept',
+                acceptNecessaryBtn: 'Reject',
+                savePreferencesBtn: 'Save preferences',
+                closeIconLabel: 'Close',
+                sections: [
+                  {
+                    title: 'Usage analytics',
+                    description: 'Tracks how the tool is used to help us improve it',
+                    linkedCategory: 'analytics'
+                  }
+                ]
+              }
+            }
+          }
+        }
+    });
+  }, []);
+}
+
+// TODO:
+// - enable PII filter
+// - show cookies CookieConsent.show();
diff --git a/src/components/content/Accordion.tsx b/src/components/content/Accordion.tsx
@@ -15,7 +15,8 @@ export const Accordion: React.FC<{ mps: MP[] }> = ({ mps }) => {
             />
             <label
               htmlFor={`accordion-${i}`}
-              className="accordion-title bg-gray-50 dark:bg-slate-900 px-4"
+              className="mp-card accordion-title bg-gray-50 dark:bg-slate-900 px-4"
+              data-ph-capture-attribute-mp-name={mp.name}
             >
               <ProfileHeader
                 name={mp.name}

diff --git a/src/components/filters/PolicyStance.tsx b/src/components/filters/PolicyStance.tsx
@@ -60,6 +60,7 @@ const FilterCheckbox: React.FC<{
         className="checkbox"
         onClick={() => handleCheck()}
         onChange={(_e) => handleCheck()}
+        data-ph-capture-attribute-filter-category={category}
       />
     </div>
   );

diff --git a/src/components/filters/SearchInput.tsx b/src/components/filters/SearchInput.tsx
@@ -32,6 +32,7 @@ export const SearchInput: React.FC = () => {
           className="py-2 px-4 pl-11 block w-full border-gray-200 shadow-sm rounded-md text-sm focus:z-10 focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400"
           placeholder="Search by name or constituency"
           onChange={(e) => handleSearchChange(e.currentTarget.value)}
+          data-testid="search-input"
         />
       </div>
     </div>

diff --git a/src/components/sidebar/Footer.tsx b/src/components/sidebar/Footer.tsx
@@ -1,10 +1,11 @@
 import React from "react";
 import TextLink from "../atoms/Link";
 import { GithubLogo } from "@phosphor-icons/react";
+import { showPrivacyPreferences } from "../../analytics";
 
 export const Footer: React.FC = () => {
   return (
-    <div className="text-sm flex flex-col gap-2">
+    <div className="text-sm flex flex-col gap-2 pb-4">
       <div className="divider"></div>
       <p>
         Built by volunteers at the{" "}
@@ -18,6 +19,9 @@ export const Footer: React.FC = () => {
         Support our work
       </TextLink>
       <TextLink link="https://go.mvmtresearch.org/join">Get involved</TextLink>
+      <span className="text-link cursor-pointer" onClick={showPrivacyPreferences}>
+        Cookies &amp; privacy settings
+      </span>
       <TextLink link="https://github.com/LMacPhail/labour-mru">
         <span className="flex flex-row gap-2 items-center">
           Contribute on Github{" "}

diff --git a/src/state/reducer.ts b/src/state/reducer.ts
@@ -1,3 +1,4 @@
+import { captureAnalyticsEvent, captureAnalyticsPageView } from "../analytics";
 import {
   Action,
   SET_POLICY_STANCE_ACTION,
@@ -27,6 +28,7 @@ export default function appReducer(
       };
     }
     case SET_VIEW_ACTION: {
+      captureAnalyticsPageView(action.payload.view);
       return {
         ...state,
         view: action.payload.view,
@@ -35,11 +37,15 @@ export default function appReducer(
     case SET_POLICY_STANCE_ACTION: {
       const { category, positive } = action.payload;
       const { policies } = state.activeFilters;
+      captureAnalyticsEvent("filter changed", { category, positive });
+      const policyStances = { ...policies, [category]: { positive } }
+      const activeFilters = Object.entries(policyStances).filter(([key, p]) => p.positive).map(([policy, _]) => policy)
+      captureAnalyticsEvent("set active filters", activeFilters);
       return {
         ...state,
         activeFilters: {
           ...state.activeFilters,
-          policies: { ...policies, [category]: { positive } },
+          policies: policyStances,
         },
       };
     }
@@ -55,6 +61,7 @@ export default function appReducer(
     }
     case SET_SORTBY_ACTION: {
       const { descending } = action.payload;
+      captureAnalyticsEvent("sort list", { descending });
       return {
         ...state,
         activeFilters: {

diff --git a/yarn.lock b/yarn.lock
@@ -4961,6 +4961,11 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "2.1.1"
 
+fflate@^0.4.1:
+  version "0.4.8"
+  resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.4.8.tgz#f90b82aefbd8ac174213abb338bd7ef848f0f5ae"
+  integrity sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==
+
 file-entry-cache@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
@@ -7982,6 +7987,13 @@ postcss@^8.3.5, postcss@^8.4.21, postcss@^8.4.23, postcss@^8.4.31, postcss@^8.4.
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+posthog-js@^1.95.1:
+  version "1.95.1"
+  resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.95.1.tgz#e39d721355b732dcb49c83384b0e31f5d235531e"
+  integrity sha512-79HPLoBqENBEEGFhn+hueKliYH66Qbu4WcRTEd8WaqtvqHrK9qAQkcrShZNkg1V5vM4kHp0iMIkJYBXg1sq06Q==
+  dependencies:
+    fflate "^0.4.1"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -9711,6 +9723,11 @@ v8-to-istanbul@^8.1.0:
     convert-source-map "^1.6.0"
     source-map "^0.7.3"
 
+vanilla-cookieconsent@^3.0.0-rc.17:
+  version "3.0.0-rc.17"
+  resolved "https://registry.yarnpkg.com/vanilla-cookieconsent/-/vanilla-cookieconsent-3.0.0-rc.17.tgz#85c738e2dc92a42dee94d2be06ffe208306b6dc0"
+  integrity sha512-YmyI+VJ+oAFxsNwWkU+DbDcVxRpttOpGzgjlAdpfELC0lF3sJiBHzrQ09WiRXdzB1nd2A1G6vYns2Niqx7wLlA==
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"