migrate to gtag

stargately/onefx#163
stargately · Jul 19, 2021 · 9274916 · 9274916
1 parent a885d6f
commit 9274916
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 87 deletions.
diff --git a/config/default.js b/config/default.js
@@ -50,6 +50,6 @@ module.exports = {
     "img-src": ["*", "data:"],
     "media-src": ["self"],
     "object-src": ["self"],
-    "script-src": ["self", "https://www.google-analytics.com/"],
+    "script-src": ["self", "https://www.googletagmanager.com/"],
   },
 };
diff --git a/package.json b/package.json
@@ -182,7 +182,6 @@
     "polished": "4.1.3",
     "process": "0.11.10",
     "react": "17.0.2",
-    "react-apollo": "4.0.0-beta.1",
     "react-dom": "17.0.2",
     "react-helmet": "6.1.0",
     "react-outside-click-handler": "1.3.0",

diff --git a/src/server/generate-static-html.ts b/src/server/generate-static-html.ts
diff --git a/src/shared/app.tsx b/src/shared/app.tsx
@@ -1,25 +1,18 @@
 import { Switch } from "onefx/lib/react-router";
 import { Route } from "onefx/lib/react-router-dom";
 import { styled } from "onefx/lib/styletron-react";
-import React, { useEffect } from "react";
-import { FOOTER_ABOVE, Footer } from "@/shared/common/footer";
+import React from "react";
+import { Footer, FOOTER_ABOVE } from "@/shared/common/footer";
 import { Head } from "@/shared/common/head";
 import { NotFound } from "@/shared/common/not-found";
 import { ScrollToTop } from "@/shared/common/scroll-top";
 import { fonts } from "@/shared/common/styles/style-font";
 import { TopBar } from "@/shared/common/top-bar";
 import { Home } from "@/shared/home/home";
+import { useGtag } from "@/shared/common/use-gtag";
 
-const initGoogleAnalytics = require("./common/google-analytics");
-
-type Props = {
-  googleTid: string;
-};
-
-export function App(props: Props): JSX.Element {
-  useEffect(() => {
-    initGoogleAnalytics({ tid: props.googleTid });
-  }, []);
+export function App(): JSX.Element {
+  useGtag();
   return (
     <RootStyle>
       <Head />

diff --git a/src/shared/common/google-analytics.js b/src/shared/common/google-analytics.js
diff --git a/src/shared/common/head.tsx b/src/shared/common/head.tsx
@@ -5,15 +5,17 @@ import { mobileViewPortContent } from "onefx/lib/iso-react-render/root/mobile-vi
 import { Helmet } from "onefx/lib/react-helmet";
 import { noFlashColorMode } from "onefx/lib/styletron-react";
 import React from "react";
-import { connect } from "react-redux";
+import { useSelector } from "react-redux";
 import { colors } from "./styles/style-color";
 
 function HeadInner({
   locale,
   nonce,
+  gaMeasurementId,
 }: {
   locale: string;
   nonce: string;
+  gaMeasurementId: string;
 }): JSX.Element {
   return (
     <Helmet
@@ -63,13 +65,34 @@ function HeadInner({
       <script type="text/javascript" nonce={nonce}>
         {noFlashColorMode({ defaultMode: "light" })}
       </script>
+      <script
+        async
+        src={`https://www.googletagmanager.com/gtag/js?id=${gaMeasurementId}`}
+      />
+      <script nonce={nonce}>
+        {`window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', '${gaMeasurementId}');`}
+      </script>
     </Helmet>
   );
 }
 
-export const Head = connect(
-  (state: { base: { locale: string; nonce: string } }) => ({
-    locale: state.base.locale,
-    nonce: state.base.nonce,
-  })
-)(HeadInner);
+export const Head: React.FC = () => {
+  const props = useSelector(
+    (state: {
+      base: {
+        locale: string;
+        nonce: string;
+        analytics: { gaMeasurementId: string };
+      };
+    }) => ({
+      locale: state.base.locale,
+      nonce: state.base.nonce,
+      gaMeasurementId: state.base.analytics.gaMeasurementId,
+    })
+  );
+
+  return <HeadInner {...props} />;
+};
diff --git a/src/shared/common/use-gtag.ts b/src/shared/common/use-gtag.ts
@@ -0,0 +1,39 @@
+import { useEffect } from "react";
+import { useHistory } from "react-router-dom";
+import { useSelector } from "react-redux";
+
+declare global {
+  interface Window {
+    gtag?: (
+      key: string,
+      trackingId: string,
+      // eslint-disable-next-line camelcase
+      config: { page_path: string }
+    ) => void;
+  }
+}
+
+export const useGtag = () => {
+  const { listen } = useHistory();
+  const gaMeasurementId = useSelector(
+    (state: {
+      base: {
+        analytics: { gaMeasurementId: string };
+      };
+    }) => state.base.analytics.gaMeasurementId
+  );
+
+  useEffect(() => {
+    return listen((location) => {
+      if (!window.gtag) {
+        return;
+      }
+      if (!gaMeasurementId) {
+        console.warn("please specify your gaMeasurementId");
+        return;
+      }
+
+      window.gtag("config", gaMeasurementId, { page_path: location.pathname });
+    });
+  }, [gaMeasurementId, listen]);
+};
diff --git a/src/shared/onefx-auth-provider/email-password-identity-provider/view/identity-app.tsx b/src/shared/onefx-auth-provider/email-password-identity-provider/view/identity-app.tsx
@@ -1,7 +1,7 @@
 import { t } from "onefx/lib/iso-i18n";
 import { Link, Route, Switch } from "onefx/lib/react-router-dom";
 import { styled } from "onefx/lib/styletron-react";
-import React, { useEffect } from "react";
+import React from "react";
 import { Flex } from "@/shared/common/flex";
 import { FOOTER_ABOVE, Footer } from "@/shared/common/footer";
 import { Head } from "@/shared/common/head";
@@ -10,23 +10,14 @@ import { colors } from "@/shared/common/styles/style-color";
 import { fonts } from "@/shared/common/styles/style-font";
 import { ContentPadding } from "@/shared/common/styles/style-padding";
 import { TopBar } from "@/shared/common/top-bar";
+import { useGtag } from "@/shared/common/use-gtag";
 import { ForgotPassword } from "./forgot-password";
 import { ResetPasswordContainer } from "./reset-password";
 import { SignIn } from "./sign-in";
 import { SignUp } from "./sign-up";
 
-const initGoogleAnalytics = require("../../../common/google-analytics");
-
-type Props = {
-  googleTid?: string;
-};
-
-export const IdentityApp = ({ googleTid }: Props): JSX.Element => {
-  useEffect(() => {
-    if (googleTid) {
-      initGoogleAnalytics({ tid: googleTid });
-    }
-  }, [googleTid]);
+export const IdentityApp = (): JSX.Element => {
+  useGtag();
   return (
     <RootStyle>
       <Head />