react-ga4 多次发送视图

Question

我已经设置了一个 google 分析帐户并创建了一个新的属性。取出tracking id然后像这样用react-ga4添加。

例如在我的专辑 ItemPage

const ItemPage = () => {
    const {user} = useContext(AuthContext);
    let { item } = useParams();
    const [album, setAlbum] = useState({});


    useEffect(() => {
        const getAlbum = async () => {
            try {
                const res = await axios.get("/albums/find/" + item, {
                });
                setAlbum(res.data);
            } catch (err) {
                console.log(err);
            }
        };

        getAlbum();

    }, []);


    let location = useLocation();
    ReactGA.initialize("G-XXXXXXXXX");
    ReactGA.send({hitType: "pageview", page: location.pathname})

    return (
        <>
        <div className={"itemPage"} style={{background: "linear-gradient(to bottom," + color + " -130%,black 90%), url(https://preview.redd.it/o0aq46bb2w111.jpg?width=640&crop=smart&auto=webp&s=6a9216cd0c400677ad95dc66d7cc10e0854aa980)"}}>
            <Navbar/>
            <Cover/>
            <Footer style={{marginTop: "10%"}}/>
        </div>
            </>
    );
}

export default ItemPage;

它向 google 分析发送正确的路径和相册标题，但一次点击发送七次浏览。有没有办法让它一次性达到最大？

Answer 1

您需要将 ReactGA 代码移动到您的 useEffect 块中，以便它只在页面加载时运行一次：

const ItemPage = () => {
  const { user } = useContext(AuthContext);
  let { item } = useParams();
  const [album, setAlbum] = useState({});

  useEffect(() => {
    const getAlbum = async () => {
      try {
        const res = await axios.get("/albums/find/" + item, {});
        setAlbum(res.data);
      } catch (err) {
        console.log(err);
      }
    };

    getAlbum();
    let location = useLocation();
    ReactGA.initialize("G-XXXXXXXXX");
    ReactGA.send({ hitType: "pageview", page: location.pathname });
  }, []);

  return (
    <>
      <div
        className={"itemPage"}
        style={{
          background:
            "linear-gradient(to bottom," +
            color +
            " -130%,black 90%), url(https://preview.redd.it/o0aq46bb2w111.jpg?width=640&crop=smart&auto=webp&s=6a9216cd0c400677ad95dc66d7cc10e0854aa980)",
        }}
      >
        <Navbar />
        <Cover />
        <Footer style={{ marginTop: "10%" }} />
      </div>
    </>
  );
};

react-ga4 多次发送视图

react-ga4 sends view multiple times

javascript

reactjs

react-hooks

google-analytics-4