javascript - 在初始应用程序加载 Reactjs 时推送到数据层

Question

我有一个具有 GTM 跟踪功能的应用程序。我目前正在检查路线何时发生并将 page_view 事件推送到 dataLayer。

我遇到的问题是让 dataLayer 在应用最初加载时推送。我有一个后退按钮，单击它会返回主屏幕并触发一个事件，但我无法在应用程序最初加载时触发它。我可以在 home 组件挂载时显式地将 push 事件添加到它，这会起作用，但是当我单击返回按钮时，它会触发两次。

这是我的代码，有谁知道如何在应用最初加载而不重复推送时让它工作吗？

componentDidUpdate(prevProps) {
    if (this.props.path !== prevProps.path) 
    {
        this.routeChange();
    }
}
routeChange(){
   window.dataLayer.push({
        event: "page_view",
        url: this.props.path
    });
}

Answer 1

您可以在 Router 之外手动创建您的 history 对象并监听其变化，并在文件加载时直接发送事件。

示例

import createBrowserHistory from "history/createBrowserHistory";

const history = createBrowserHistory();

history.listen(location => {
  const { pathname } = location;

  window.dataLayer.push({
    event: "page_view",
    url: pathname
  });
});

window.dataLayer.push({
  event: "page_view",
  url: window.location.pathname
});

function App() {
  return (
    <Router history={history}>
      {/* ... */}
    </Router>
  );
}