使用 GA4 跟踪路由变化

2 years ago · a4f794c3ab
parent 27c5369cd6
commit a4f794c3ab
2 changed files with 14 additions and 2 deletions
--- a/index.html
+++ b/index.html
@ -14,6 +14,13 @@
        100%{-webkit-transform:translate(150px)}
      }
    </style>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-7JN1HT1DY4"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'G-7JN1HT1DY4');
+    </script>
  </head>
  <body>
    <div id="root">
--- a/src/views/App.jsx
+++ b/src/views/App.jsx
@ -1,4 +1,4 @@
-import { Outlet, Link, useHref, useNavigate, NavLink } from "react-router-dom";
+import { Outlet, Link, useHref, useNavigate, useLocation, NavLink } from "react-router-dom";
 import { useEffect, useState } from 'react';
 import { observer } from "mobx-react";
 import { toJS } from "mobx";
@ -39,13 +39,18 @@ function App() {
 	const href = useHref();
  const loginToken = login.token;
  const navigate = useNavigate();
+  const location = useLocation();
+
 	useEffect(() => {
-		// console.info("href: " + href + '; login.token: ' + loginToken + '; timeout: ' + login.timeout);
    if (href !== '/login' && isEmpty(loginToken)) {
        navigate('/login');
    }
 	}, [href]);

+	useEffect(() => {
+    window.gtag('event', 'page_view', { page_location: window.location.href });
+  }, [location]);
+
  const onSubmit = () => {
    authStore.valdateUserPassword(login.username, password)
      .then(() => {