Add GA4 tagging

.circleci/config.yml

@@ -41,9 +41,11 @@ jobs:
           command: |
             aws configure set preview.cloudfront true
             if [ "${CIRCLE_BRANCH}" = "staging" ]; then
+              echo 'REACT_APP_GA_MEASUREMENT_ID=G-R664T0KJ8Y' >> .env
               aws s3 sync build s3://demex-site/staging/ --delete
               aws cloudfront create-invalidation --distribution-id="E1BX9CZRIQU7CR" --paths=/*
             elif [ "${CIRCLE_BRANCH}" = "master" ]; then
+              echo 'REACT_APP_GA_MEASUREMENT_ID=G-687E0E3ZG7' >> .env
               aws s3 sync build s3://demex-site/prod/ --delete
               aws cloudfront create-invalidation --distribution-id="E25DL70OEAKNPX" --paths=/*
             fi

package.json

@@ -18,6 +18,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@types/react-helmet": "^6.1.6",
     "@types/react-redux": "^7.1.16",
     "@types/react-router": "^5.1.12",
     "@types/react-router-dom": "^5.1.7",
@@ -39,6 +40,7 @@
     "react-dom": "^17.0.1",
     "react-fast-marquee": "^1.3.5",
     "react-gsap": "^3.1.0",
+    "react-helmet": "^6.1.0",
     "react-intersection-observer": "^8.31.0",
     "react-redux": "^7.2.2",
     "react-responsive-carousel": "^3.2.18",

src/@demex-info/components/GoogleAnalytics/GoogleAnalytics.tsx

@@ -0,0 +1,31 @@
+/* eslint-disable semi */
+/* eslint-disable prefer-destructuring */
+/* eslint-disable react/self-closing-comp */
+
+import React from "react"
+import Helmet from "react-helmet"
+
+const GA_MEASUREMENT_ID = process.env.REACT_APP_GA_MEASUREMENT_ID
+
+const GoogleAnalytics: React.FC<{}> = () => {
+  if (!GA_MEASUREMENT_ID) {
+    return null
+  }
+
+  return (
+    <Helmet>
+      <script async src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}></script>
+      <script>
+        {`
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+
+          gtag('config', '${GA_MEASUREMENT_ID}');
+        `}
+      </script>
+    </Helmet>
+  );
+};
+
+export default GoogleAnalytics

src/@demex-info/components/GoogleAnalytics/index.ts

@@ -0,0 +1 @@
+export { default as GoogleAnalytics } from "./GoogleAnalytics";

src/@demex-info/components/index.ts

@@ -2,6 +2,7 @@ export * from "./AssetIcon";
 export * from "./BackgroundAnimation";
 export * from "./Cards";
 export * from "./CoinIcon";
+export * from "./GoogleAnalytics";
 export * from "./PaperBox";
 export * from "./PreferenceThemeProvider";
 export * from "./RenderGuard";

src/index.tsx

@@ -1,4 +1,4 @@
-import { PreferenceThemeProvider } from "@demex-info/components";
+import { GoogleAnalytics, PreferenceThemeProvider } from "@demex-info/components";
 import { MainLayout } from "@demex-info/layout";
 import { store } from "@demex-info/store";
 import HeroSection from "@demex-info/views/HeroSection/HeroSection";
@@ -26,6 +26,7 @@ const Footer = lazy(() => import("@demex-info/layout/MainLayout/components/Foote
 render(
   <Provider store={store}>
     <PreferenceThemeProvider>
+      <GoogleAnalytics />
       <MainLayout>
         <HeroSection />
         <Suspense fallback={null}>

yarn.lock

@@ -3680,6 +3680,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-helmet@^6.1.6":
+  version "6.1.6"
+  resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.1.6.tgz#7d1afd8cbf099616894e8240e9ef70e3c6d7506d"
+  integrity sha512-ZKcoOdW/Tg+kiUbkFCBtvDw0k3nD4HJ/h/B9yWxN4uDO8OkRksWTO+EL+z/Qu3aHTeTll3Ro0Cc/8UhwBCMG5A==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-redux@^7.1.16":
   version "7.1.16"
   resolved "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.16.tgz"
@@ -13041,6 +13048,11 @@ react-fast-compare@2.0.4:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
+react-fast-compare@^3.1.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+
 react-fast-marquee@^1.3.5:
   version "1.3.5"
   resolved "https://registry.npmjs.org/react-fast-marquee/-/react-fast-marquee-1.3.5.tgz"
@@ -13053,6 +13065,16 @@ react-gsap@^3.1.0:
   dependencies:
     react-is "^16.13.1"
 
+react-helmet@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
+  integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.1.1"
+    react-side-effect "^2.1.0"
+
 react-icons@4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.4.0.tgz#a13a8a20c254854e1ec9aecef28a95cdf24ef703"
@@ -13173,6 +13195,11 @@ react-scripts@4.0.3:
   optionalDependencies:
     fsevents "^2.1.3"
 
+react-side-effect@^2.1.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.2.tgz#dc6345b9e8f9906dc2eeb68700b615e0b4fe752a"
+  integrity sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==
+
 react-sparklines@^1.7.0:
   version "1.7.0"
   resolved "https://registry.npmjs.org/react-sparklines/-/react-sparklines-1.7.0.tgz"