logo标签列表

谷歌分析在React中无法使用

javascriptreactjsgoogle-analytics
16

我在我的React项目中使用Google Analytics，即使我在线，它也没有显示任何活跃用户。我尝试了在网上找到的不同方法，但似乎都不起作用。我只在本地主机上尝试过，而没有在部署的网站上尝试，但我认为它仍然应该工作。

这是我的代码。

我的app.js

import React, { Suspense, useEffect } from "react";
import "./App.css";
import IntroPage from "./containers/IntroPage/IntroPage";
import Layout from "./containers/Layout/Layout";
import { Switch, Route, Redirect, withRouter } from "react-router-dom";
import Spinner from "./Components/UI/Spinner/Spinner";
import ReactGA from "react-ga";

const Contact = React.lazy(() => import("./Components/Contact/Contact"));

const trackingId = "UA-171033255-1";
ReactGA.initialize(trackingId);


function App() {
  useEffect(() => {
    ReactGA.pageview(window.location.pathname + window.location.search);
  }, []);

  return (
    <div className="App">
      <Layout>
        <Switch>
          <Route
            path="/contact"
            render={() => (
              <Suspense
                fallback={
                  <div className="Fallback">
                    <Spinner />
                  </div>
                }
              >
                <Contact />
              </Suspense>
            )}
          />
          <Route path="/" component={IntroPage} />
          <Redirect to="/" />
        </Switch>
      </Layout>
    </div>
  );
}

export default withRouter(App);

我在这里做错了什么？

5个回答
6

将 react-ga 更新为 react-ga4 对我很有效。

更改导入为 react-ga4，并使用 ReactGA.send("pageview") 替代 ReactGA.pageview(...)。

1
太好了！你帮我省了不少时间。 - undefined
1
由于您在useEffect中使用了空的依赖项数组，因此您的代码仅在渲染<App/>时执行一次。因此，您在路由更改时不会发送页面浏览量。
您需要在ReactGA初始化后立即将与页面浏览量相关的代码放置在App组件之前。这是来自docs的用法示例。
1
您是否尝试将跟踪代码添加到index.html文件中的标签内（管理 -> 属性 -> 跟踪代码）？
我认为在React中不需要这个。 - excurbia
不确定你在这里的意思——这似乎是将 GA 属性与你的应用关联的最简单方法。这也可能是必需的——React 的入口点在 <body> 中，你需要将跟踪片段放入 <head> 中... - BigMugOfCoffee
1

我曾经遇到过类似的问题，如果你启用了广告拦截器，请尝试禁用它，并将ReactGA.initialize放在useEffect中。

0

import ReactGA from "react-ga4";

ReactGA.initialize("您的测量ID"); ReactGA.send("页面浏览");

1
你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接