文章/答案/技术大牛

发布

社区首页 >问答首页 >react 4多次发送视图

问react 4多次发送视图
EN

Stack Overflow用户

提问于 2022-01-12 13:53:27

回答 1查看 1.4K关注 0票数 0

我已经建立了一个谷歌分析帐户，并创建了一个新的财产。取出跟踪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;

它发送正确的路径和专辑标题给谷歌分析，但点击一次发送7个视图。有办法让它在第一时间最大限度地发挥出来吗？

google-analytics-4

javascript

reactjs

react-hooks

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-01-12 14:22:10

您需要将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>
    </>
  );
};

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70682761

复制

相似问题

问react 4多次发送视图
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问react 4多次发送视图EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问react 4多次发送视图
EN