Merge pull request #166 from movie-web/feature-react-ga

setup GA properly
2 years ago · 0625719a4d
6 changed files with 2419 additions and 2418 deletions
--- a/index.html
+++ b/index.html
@ -1,21 +1,6 @@
				@@ -1,21 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script
-      async
-      src="https://www.googletagmanager.com/gtag/js?id=G-44YVXRL61C"
-    ></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag() {
-        dataLayer.push(arguments);
-      }
-      gtag("js", new Date());
-
-      gtag("config", "G-44YVXRL61C");
-    </script>
-
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
--- a/package.json
+++ b/package.json
@ -20,6 +20,7 @@
				@@ -20,6 +20,7 @@
    "pako": "^2.1.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
+    "react-ga4": "^2.0.0",
    "react-helmet": "^6.1.0",
    "react-i18next": "^12.1.1",
    "react-router-dom": "^5.2.0",
--- a/src/index.tsx
+++ b/src/index.tsx
@ -5,6 +5,7 @@ import { ErrorBoundary } from "@/components/layout/ErrorBoundary";
				@@ -5,6 +5,7 @@ import { ErrorBoundary } from "@/components/layout/ErrorBoundary";
 import { conf } from "@/setup/config";

 import App from "@/setup/App";
+import "@/setup/ga";
 import "@/setup/i18n";
 import "@/setup/index.css";
 import "@/backend";
--- a/src/setup/constants.ts
+++ b/src/setup/constants.ts
@ -1,3 +1,4 @@
				@@ -1,3 +1,4 @@
 export const DISCORD_LINK = "https://discord.gg/Jhqt4Xzpfb";
 export const GITHUB_LINK = "https://github.com/movie-web/movie-web";
 export const APP_VERSION = "3.0.2";
+export const GA_ID = "G-44YVXRL61C";
--- a/src/setup/ga.ts
+++ b/src/setup/ga.ts
@ -0,0 +1,8 @@
				@@ -0,0 +1,8 @@
+import ReactGA from "react-ga4";
+import { GA_ID } from "@/setup/constants";
+
+ReactGA.initialize([
+  {
+    trackingId: GA_ID,
+  },
+]);
--- a/yarn.lock
+++ b/yarn.lock