From ed400944dbde47692081dd98c9a6680f7750d8dc Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <mail@rithviknishad.dev>
Date: Fri, 7 Apr 2023 16:47:46 +0530
Subject: [PATCH] Adds `Script` component, load plausible analytics from
 useConfig instead of env, redact IDs in URLs (#5229)

* fixes #5228

* Adds a `Script` component

* include Plausible script in App

* remove script from index.html

* redact numeric sequences and uuids from plausible analytics (#5240)

* this should work now :)

* updated script component that fixes issue in firefox

* remove empty query params and redacts if non-empty

* fix special char issues and redact uuids before numeric ids

* fix empty qparams not being removed and blacklist some qparams
---
 .env                                |  2 --
 index.html                          | 12 +++++---
 public/config.json                  |  2 ++
 src/App.tsx                         | 16 +++++-----
 src/Common/hooks/useConfig.ts       |  2 ++
 src/Components/Common/Plausible.tsx | 47 +++++++++++++++++++++++++++++
 src/Components/Common/Script.tsx    | 33 ++++++++++++++++++++
 7 files changed, 98 insertions(+), 16 deletions(-)
 create mode 100644 src/Components/Common/Plausible.tsx
 create mode 100644 src/Components/Common/Script.tsx

diff --git a/.env b/.env
index 1362a1cf450..fcabed6db34 100644
--- a/.env
+++ b/.env
@@ -6,8 +6,6 @@ REACT_APP_COVER_IMAGE=https://cdn.coronasafe.network/care_logo.svg
 REACT_APP_COVER_IMAGE_ALT=https://cdn.coronasafe.network/care_logo.svg
 REACT_APP_CONFIG=""
 REACT_PUBLIC_URL="https://care.coronasafe.in"
-REACT_APP_SITE_URL=care.coronasafe.in
-REACT_APP_ANALYTICS_SERVER_URL=https://plausible.10bedicu.in
 
 # Dev envs
 ESLINT_NO_DEV_ERRORS=true
diff --git a/index.html b/index.html
index 58628e34dd3..9e55883f205 100644
--- a/index.html
+++ b/index.html
@@ -43,10 +43,12 @@
       src="https://kit.fontawesome.com/d69454c2e7.js"
       crossorigin="anonymous"
     ></script>
-    <script
-      defer
-      data-domain="%REACT_APP_SITE_URL%"
-      src="%REACT_APP_ANALYTICS_SERVER_URL%/js/script.js"
-    ></script>
+    <script>
+      window.plausible =
+        window.plausible ||
+        function () {
+          (window.plausible.q = window.plausible.q || []).push(arguments);
+        };
+    </script>
   </body>
 </html>
diff --git a/public/config.json b/public/config.json
index 24d861a8013..b49199a3857 100644
--- a/public/config.json
+++ b/public/config.json
@@ -2,6 +2,8 @@
     "dashboard_url": "https://dashboard.coronasafe.in",
     "github_url": "https://github.com/coronasafe",
     "coronasafe_url": "https://coronasafe.network?ref=care",
+    "site_url": "care.coronasafe.in",
+    "analytics_server_url": "https://plausible.10bedicu.in",
     "static_header_logo": "https://cdn.coronasafe.network/header_logo.png",
     "static_light_logo": "https://cdn.coronasafe.network/light-logo.svg",
     "static_black_logo": "https://cdn.coronasafe.network/black-logo.svg",
diff --git a/src/App.tsx b/src/App.tsx
index c1cd6992db7..9d5ab453e08 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,6 +10,7 @@ import { HistoryAPIProvider } from "./CAREUI/misc/HistoryAPIProvider";
 import * as Sentry from "@sentry/browser";
 import { IConfig } from "./Common/hooks/useConfig";
 import { LocalStorageKeys } from "./Common/constants";
+import Plausible from "./Components/Common/Plausible";
 
 const Loading = loadable(() => import("./Components/Common/Loading"));
 
@@ -90,15 +91,12 @@ const App: React.FC = () => {
     return <Loading />;
   }
 
-  if (currentUser?.data) {
-    return (
-      <HistoryAPIProvider>
-        <AppRouter />
-      </HistoryAPIProvider>
-    );
-  } else {
-    return <SessionRouter />;
-  }
+  return (
+    <HistoryAPIProvider>
+      {currentUser?.data ? <AppRouter /> : <SessionRouter />}
+      <Plausible />
+    </HistoryAPIProvider>
+  );
 };
 
 export default App;
diff --git a/src/Common/hooks/useConfig.ts b/src/Common/hooks/useConfig.ts
index eb168c7c4f5..a2ba010909c 100644
--- a/src/Common/hooks/useConfig.ts
+++ b/src/Common/hooks/useConfig.ts
@@ -5,6 +5,8 @@ export interface IConfig {
   github_url: string;
   coronasafe_url: string;
   dpg_url: string;
+  site_url: string;
+  analytics_server_url: string;
   static_header_logo: string;
   static_light_logo: string;
   static_black_logo: string;
diff --git a/src/Components/Common/Plausible.tsx b/src/Components/Common/Plausible.tsx
new file mode 100644
index 00000000000..38204a11863
--- /dev/null
+++ b/src/Components/Common/Plausible.tsx
@@ -0,0 +1,47 @@
+import { useLocationChange } from "raviger";
+import useConfig from "../../Common/hooks/useConfig";
+import Script from "./Script";
+import { useEffect } from "react";
+
+export default function Plausible() {
+  const { site_url, analytics_server_url } = useConfig();
+
+  useLocationChange(() => triggerPageView());
+  useEffect(() => triggerPageView(), []);
+
+  return (
+    <Script
+      defer
+      data-domain={site_url}
+      src={`${analytics_server_url}/js/script.manual.js`}
+    />
+  );
+}
+
+const BLACKLISTED_QUERY_PARAMS = ["page", "limit"];
+
+const triggerPageView = () => {
+  const plausible = (window as any).plausible;
+
+  const url = new URL(window.location.href);
+
+  // Remove all blacklisted and empty query parameters
+  [...url.searchParams.entries()].map(([key, value]) => {
+    if (value === "" || BLACKLISTED_QUERY_PARAMS.includes(key)) {
+      url.searchParams.delete(key);
+    }
+  });
+
+  const redactedUrl = url
+    .toString()
+    // Replace all uuids in the URL with "ID_REDACTED"
+    .replace(
+      /[a-f\d]{8}-[a-f\d]{4}-[a-f\d]{4}-[a-f\d]{4}-[a-f\d]{12}/gi,
+      "ID_REDACTED"
+    )
+    // Replace all numbers in the URL's path params with "ID_REDACTED"
+    .replace(/\/\d+/g, "/ID_REDACTED");
+
+  // Send the pageview event to Plausible
+  plausible("pageview", { u: redactedUrl });
+};
diff --git a/src/Components/Common/Script.tsx b/src/Components/Common/Script.tsx
new file mode 100644
index 00000000000..fcfd7838815
--- /dev/null
+++ b/src/Components/Common/Script.tsx
@@ -0,0 +1,33 @@
+import { useEffect } from "react";
+
+interface Props {
+  id?: string;
+  defer?: boolean;
+  src: string;
+  [key: string]: any;
+}
+
+/**
+ * Dynamically load a script into the page.
+ * To refresh the script, change the `key` prop.
+ */
+export default function Script({ id, defer = false, src, ...attrs }: Props) {
+  useEffect(() => {
+    const script = document.createElement("script");
+
+    if (id) script.id = id;
+    script.src = src;
+    script.async = true;
+    script.defer = defer;
+
+    Object.entries(attrs).forEach((e) => script.setAttribute(...e));
+
+    document.body.appendChild(script);
+
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, [id, defer, src]);
+
+  return null;
+}