javascript - 如何使用 react-router-dom 跟踪 react-ga 事件

Question

我想在我的网络应用项目中使用 react-ga 跟踪事件。我使用 react-router-dom 进行路由，并且总是使用 Link 来重定向用户。我的标题中的一个示例 - 将用户引导至“探索”页面：

<Link to="/explore">
                <Icon
                  icon={pathname === "/explore" ? "compass" : "compass-outline"}
                />
              </Link>

如何准确地跟踪事件“用户去了 '/explore'” 我能找到的唯一指南向我展示了如何跟踪由按钮和 onClick() 引起的事件。我已经将我的应用程序连接到谷歌分析，它可以很好地检测到我当前的位置。

 useEffect(() => {
    ReactGa.initialize("UA-175518918-1");
    ReactGa.pageview(window.location.pathname + window.location.search);
  }, []);

Answer 1

您在这里有几个选择：

1. 您可以像这样使用 Link 组件：

<Link to="/explore" onClick={e=>ReactGa.pageview('explore')}>Explore</Link>

2. 您可以收听路由更改，具体取决于 react-router 的版本，如何执行此操作的代码会有所不同：

• 如果您使用 react-router-3，您可以使用listen以下方法history：

history.listen((location) => {
  ReactGa.pageview(location.pathname);
})

• 如果您使用 react-router-4，您可以在这里查看解决方案：How to listen to route changes in react router v4?