add react ga

package.json

@@ -84,6 +84,7 @@
         "@types/reach__router": "^1.3.7",
         "@types/react": "^17.0.1",
         "@types/react-dom": "^17.0.0",
+        "@types/react-ga": "^2.3.0",
         "@types/react-intl": "^3.0.0",
         "@types/react-leaflet": "^2.5.2",
         "@types/react-redux": "^7.1.16",
@@ -174,6 +175,7 @@
         "react-dnd-html5-backend": "^11.1.3",
         "react-dom": "^17.0.1",
         "react-dropzone": "^11.3.0",
+        "react-ga": "^3.3.0",
         "react-intl": "^5.12.2",
         "react-leaflet": "^2.8.0",
         "react-markdown": "^5.0.3",

src/components/organisms/Published/PublishedEarth/hooks.ts

@@ -1,4 +1,5 @@
 import { useState, useMemo, useEffect, useCallback } from "react";
+import ReactGA from "react-ga";
 import { EarthLayer, EarthWidget } from "@reearth/components/molecules/EarthEditor/Earth";
 import { Block } from "@reearth/components/molecules/EarthEditor/InfoBox/InfoBox";
 import { PublishedData } from "./types";
@@ -21,6 +22,20 @@ export default (alias?: string) => {
     changeSelectedLayerId(id);
   }, []);
 
+  const googleAnalitcsData: { enableGA: boolean; trackingId: string } = useMemo(
+    () => ({
+      enableGA: data?.property.googleAnalytics.enableGA,
+      trackingId: data?.property.googleAnalitcs.trackingId,
+    }),
+    [data?.property.googleAnalitcs.trackingId, data?.property.googleAnalytics.enableGA],
+  );
+
+  useEffect(() => {
+    if (!googleAnalitcsData.enableGA || !googleAnalitcsData.trackingId) return;
+    ReactGA.initialize(googleAnalitcsData.trackingId);
+    ReactGA.pageview(window.location.pathname);
+  }, [googleAnalitcsData]);
+
   const layers = useMemo<Layer[] | undefined>(
     () =>
       data?.layers.map(l => ({

yarn.lock

@@ -3660,6 +3660,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-ga@^2.3.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@types/react-ga/-/react-ga-2.3.0.tgz#dbd56dd622cabb5baebc896e3ee67dfdc29babc1"
+  integrity sha512-7Vkv6wH1Kem4vkjuJxRYxDgLfokm0shugDk0W5p9C28POrsPAXezLbgP5C2tyFZ7lKARdyrCxwkdRTC1UV0dHg==
+  dependencies:
+    react-ga "*"
+
 "@types/react-intl@^3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/react-intl/-/react-intl-3.0.0.tgz#a2cce0024b6cfe403be28ccf67f49d720fa810ec"
@@ -14469,6 +14476,11 @@ react-focus-lock@^2.1.0:
     use-callback-ref "^1.2.1"
     use-sidecar "^1.0.1"
 
+react-ga@*, react-ga@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-3.3.0.tgz#c91f407198adcb3b49e2bc5c12b3fe460039b3ca"
+  integrity sha512-o8RScHj6Lb8cwy3GMrVH6NJvL+y0zpJvKtc0+wmH7Bt23rszJmnqEQxRbyrqUzk9DTJIHoP42bfO5rswC9SWBQ==
+
 react-helmet-async@^1.0.2:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.0.7.tgz#b988fbc3abdc4b704982bb74b9cb4a08fcf062c1"