Question

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

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

这是我的代码，没有人知道如何在应用程序最初加载时使其工作而无需重复推送？

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

Answer 1

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

示例

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>
  );
}

在初始应用加载React时推送到dataLayer

1 个答案: