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

问题描述

我想在我的Web应用程序项目中使用react-ga跟踪事件。我使用react-router-dom进行路由，并且始终使用Link来重定向用户。我的标题中的一个示例-将用户引导至“浏览”页面：

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

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

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

解决方法

您在这里有几种选择：

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

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

1. 您可以收听路由更改，具体取决于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?