feat: support ga4 (#509)

reearth · Mar 12, 2023 · 39bfb06 · 39bfb06
1 parent 890daef
commit 39bfb06
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -152,6 +152,7 @@
         "react-dropzone": "14.2.3",
         "react-error-boundary": "3.1.4",
         "react-ga": "3.3.1",
+        "react-ga4": "2.0.0",
         "react-i18next": "12.1.4",
         "react-inlinesvg": "3.0.1",
         "react-leaflet": "4.2.0",

diff --git a/src/components/organisms/Published/core/ga.ts b/src/components/organisms/Published/core/ga.ts
@@ -0,0 +1,9 @@
+import ReactGA from "react-ga";
+
+export function initialize(trackingId: string) {
+  ReactGA.initialize(trackingId);
+}
+
+export function pageview(pathname: string) {
+  ReactGA.pageview(pathname);
+}
diff --git a/src/components/organisms/Published/core/ga4.ts b/src/components/organisms/Published/core/ga4.ts
@@ -0,0 +1,9 @@
+import ReactGA from "react-ga4";
+
+export function initialize(trackingId: string) {
+  ReactGA.initialize(trackingId);
+}
+
+export function pageview(pathname: string) {
+  ReactGA.send({ hitType: "pageview", page: pathname });
+}
diff --git a/src/components/organisms/Published/core/useGA.ts b/src/components/organisms/Published/core/useGA.ts
@@ -1,15 +1,20 @@
 import { useEffect } from "react";
-import { initialize, pageview } from "react-ga";
 
 import type { SceneProperty } from "@reearth/core/Map";
 
+const isGa4TrackingId = (trackingId: string) => trackingId.startsWith("G-");
 export const useGA = (sceneProperty: SceneProperty) => {
-  // GA
   const { enableGA, trackingId } = sceneProperty?.googleAnalytics || {};
 
   useEffect(() => {
     if (!enableGA || !trackingId) return;
-    initialize(trackingId);
-    pageview(window.location.pathname);
+
+    const loadGaModule = async () => {
+      const ga = isGa4TrackingId(trackingId) ? await import("./ga4") : await import("./ga");
+      ga.initialize(trackingId);
+      ga.pageview(window.location.pathname);
+    };
+
+    loadGaModule();
   }, [enableGA, trackingId]);
 };
diff --git a/yarn.lock b/yarn.lock
@@ -15991,6 +15991,11 @@ react-from-dom@^0.6.2:
   resolved "https://registry.yarnpkg.com/react-from-dom/-/react-from-dom-0.6.2.tgz#9da903a508c91c013b55afcd59348b8b0a39bdb4"
   integrity sha512-qvWWTL/4xw4k/Dywd41RBpLQUSq97csuv15qrxN+izNeLYlD9wn5W8LspbfYe5CWbaSdkZ72BsaYBPQf2x4VbQ==
 
+[email protected]:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/react-ga4/-/react-ga4-2.0.0.tgz#d125807cc30b087a6aa24401ec5f1f1c2d176fe9"
+  integrity sha512-WHi98hMunzh4ngRdNil8NN6Qly3ZZUkprhbgSqA+NFzovp8zqpYV3jcbKL9FnMdeBQHGhv8AVNCT2oFEE+EFXA==
+
 react-ga@*, [email protected]:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-3.3.1.tgz#d8e1f4e05ec55ed6ff944dcb14b99011dfaf9504"