React SPA - GTM Analytics React-Helmet 上一页标题

Question

我正在使用 Google 跟踪代码管理器将页面浏览事件推送到数据层以进行分析跟踪。这种情况发生在componentDidMount()中（如果我正在使用 withRouter 监听 location 属性的查询字符串参数更改，有时会发生在 componentWillReceiveProps()中）。

我正在使用React-helmet在组件更改时动态更新我的标题和其他标签。

我注意到一个问题，即我在 Analytics 中获得的页面标题不正确。它经常显示上一页的页面标题，而不是我当前所在的页面标题。看来react-helmet直到componentDidMount()之后才更新标签之后才更新标签。

页面查看事件函数示例

每次将此事件推送到数据层时，我在 GTM 中的分析标记都会被调用

const firePageViewEvent = () => {
      console.log("Pageview event fired (from tracking script)");

      if (window && window.dataLayer) {
          console.log("window and dataLayer exist, pushing pageview event.");
          let dataLayer = window.dataLayer || [];
          dataLayer.push({
              'event': 'reactPageViewEvent'
          });
      } else {
          console.log("window or dataLater does not exist, cannot push pageview event.");
      }
};

Answer 1

我可以确认，将函数包装在具有 0 毫秒延迟的 setTimeOut() 函数中确实可以确保仅在 React-helmet 有机会执行其操作后才推送事件。

这使我能够始终如一地获取Analytics 中的当前页面标题。

查看github问题评论

更新功能

const firePageViewEvent = () => {
    setTimeout(() => {
        console.log("Pageview event fired (from tracking script)");

        if (window && window.dataLayer) {
            console.log("window and dataLayer exist, pushing pageview event.");
            let dataLayer = window.dataLayer || [];
            dataLayer.push({
                'event': 'reactPageViewEvent'
            });
        } else {
            console.log("window or dataLater does not exist, cannot push pageview event.");
        }
    }, 0);
};