Adds Script component, load plausible analytics from useConfig inst…

…ead 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

@@ -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

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>

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",

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;

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;

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 });
+};

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;
+}