feat: Add GA integration, support for GA4 (#4626)

* GA integration settings

* trackingId -> measurementId
Hook up script

* Public page GA tracking
Correct layout of settings

* Remove multiple codepaths for loading GA measurementID, add missing db index

* Remove unneccessary changes, tsc

* test

app/components/Analytics.tsx

@@ -1,8 +1,11 @@
 /* global ga */
+import { escape } from "lodash";
 import * as React from "react";
+import { IntegrationService } from "@shared/types";
 import env from "~/env";
 
 const Analytics: React.FC = ({ children }) => {
+  // Google Analytics 3
   React.useEffect(() => {
     if (!env.GOOGLE_ANALYTICS_ID) {
       return;
@@ -17,9 +20,6 @@ const Analytics: React.FC = ({ children }) => {
 
     ga.l = +new Date();
     ga("create", env.GOOGLE_ANALYTICS_ID, "auto");
-    ga("set", {
-      dimension1: "true",
-    });
     ga("send", "pageview");
     const script = document.createElement("script");
     script.src = "https://www.google-analytics.com/analytics.js";
@@ -30,9 +30,28 @@ const Analytics: React.FC = ({ children }) => {
       ga("send", "event", "pwa", "install");
     });
 
-    if (document.body) {
-      document.body.appendChild(script);
+    document.body?.appendChild(script);
+  }, []);
+
+  // Google Analytics 4
+  React.useEffect(() => {
+    if (env.analytics.service !== IntegrationService.GoogleAnalytics) {
+      return;
     }
+
+    const measurementId = escape(env.analytics.settings?.measurementId);
+
+    window.dataLayer = window.dataLayer || [];
+    function gtag(...args: any[]) {
+      window.dataLayer.push(args);
+    }
+    gtag("js", new Date());
+    gtag("config", measurementId);
+
+    const script = document.createElement("script");
+    script.src = `https://www.googletagmanager.com/gtag/js?id=${measurementId}`;
+    script.async = true;
+    document.body?.appendChild(script);
   }, []);
 
   return <>{children}</>;

app/components/CommandBar.tsx

@@ -11,7 +11,7 @@ import CommandBarResults from "~/components/CommandBarResults";
 import SearchActions from "~/components/SearchActions";
 import rootActions from "~/actions/root";
 import useCommandBarActions from "~/hooks/useCommandBarActions";
-import useSettingsActions from "~/hooks/useSettingsAction";
+import useSettingsActions from "~/hooks/useSettingsActions";
 import useStores from "~/hooks/useStores";
 import { CommandBarAction } from "~/types";
 import { metaDisplay } from "~/utils/keyboard";

app/components/Icons/GoogleIcon.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+
+type Props = {
+  /** The size of the icon, 24px is default to match standard icons */
+  size?: number;
+  /** The color of the icon, defaults to the current text color */
+  color?: string;
+};
+
+export default function GoogleIcon({
+  size = 24,
+  color = "currentColor",
+}: Props) {
+  return (
+    <svg
+      fill={color}
+      width={size}
+      height={size}
+      viewBox="-8 -8 48 48"
+      version="1.1"
+    >
+      <path d="M32.6162791,13.9090909 L16.8837209,13.9090909 L16.8837209,20.4772727 L25.9395349,20.4772727 C25.0953488,24.65 21.5651163,27.0454545 16.8837209,27.0454545 C11.3581395,27.0454545 6.90697674,22.5636364 6.90697674,17 C6.90697674,11.4363636 11.3581395,6.95454545 16.8837209,6.95454545 C19.2627907,6.95454545 21.4116279,7.80454545 23.1,9.19545455 L28.0116279,4.25 C25.0186047,1.62272727 21.1813953,0 16.8837209,0 C7.52093023,0 0,7.57272727 0,17 C0,26.4272727 7.52093023,34 16.8837209,34 C25.3255814,34 33,27.8181818 33,17 C33,15.9954545 32.8465116,14.9136364 32.6162791,13.9090909 Z" />
+    </svg>
+  );
+}

app/components/Sidebar/Settings.tsx

@@ -7,7 +7,7 @@ import { useHistory } from "react-router-dom";
 import styled from "styled-components";
 import Flex from "~/components/Flex";
 import Scrollable from "~/components/Scrollable";
-import useAuthorizedSettingsConfig from "~/hooks/useAuthorizedSettingsConfig";
+import useSettingsConfig from "~/hooks/useSettingsConfig";
 import Desktop from "~/utils/Desktop";
 import isCloudHosted from "~/utils/isCloudHosted";
 import Sidebar from "./Sidebar";
@@ -21,7 +21,7 @@ import Version from "./components/Version";
 function SettingsSidebar() {
   const { t } = useTranslation();
   const history = useHistory();
-  const configs = useAuthorizedSettingsConfig();
+  const configs = useSettingsConfig();
   const groupedConfig = groupBy(configs, "group");
 
   const returnToApp = React.useCallback(() => {