From 666f71a2ed2949988a3441f90a630d57f9f0ba4e Mon Sep 17 00:00:00 2001 From: Steven Khong Date: Thu, 16 Feb 2023 12:12:43 +0800 Subject: [PATCH] Add GA4 tagging --- .circleci/config.yml | 2 ++ package.json | 2 ++ .../GoogleAnalytics/GoogleAnalytics.tsx | 31 +++++++++++++++++++ .../components/GoogleAnalytics/index.ts | 1 + src/@demex-info/components/index.ts | 1 + src/index.tsx | 3 +- yarn.lock | 27 ++++++++++++++++ 7 files changed, 66 insertions(+), 1 deletion(-) create mode 100644 src/@demex-info/components/GoogleAnalytics/GoogleAnalytics.tsx create mode 100755 src/@demex-info/components/GoogleAnalytics/index.ts diff --git a/.circleci/config.yml b/.circleci/config.yml index af20c3e8..a8fb5097 100644 --- a/.circleci/config.yml +++ b/.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 diff --git a/package.json b/package.json index ca26ce37..9be01ed7 100644 --- a/package.json +++ b/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", diff --git a/src/@demex-info/components/GoogleAnalytics/GoogleAnalytics.tsx b/src/@demex-info/components/GoogleAnalytics/GoogleAnalytics.tsx new file mode 100644 index 00000000..c0e50830 --- /dev/null +++ b/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 ( + + + + + ); +}; + +export default GoogleAnalytics diff --git a/src/@demex-info/components/GoogleAnalytics/index.ts b/src/@demex-info/components/GoogleAnalytics/index.ts new file mode 100755 index 00000000..ed0982bf --- /dev/null +++ b/src/@demex-info/components/GoogleAnalytics/index.ts @@ -0,0 +1 @@ +export { default as GoogleAnalytics } from "./GoogleAnalytics"; diff --git a/src/@demex-info/components/index.ts b/src/@demex-info/components/index.ts index 8ca2492e..87f4be21 100644 --- a/src/@demex-info/components/index.ts +++ b/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"; diff --git a/src/index.tsx b/src/index.tsx index 76113719..c3e0c298 100644 --- a/src/index.tsx +++ b/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( + diff --git a/yarn.lock b/yarn.lock index 974e82ea..8fe0bcbb 100644 --- a/yarn.lock +++ b/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"