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

Posted 2023-03-17

【中文标题】React SPA - GTM Analytics React-Helmet 上一页标题

【英文标题】：React SPA - GTM Analytics React-Helmet Previous Page Title

【发布时间】：2018-03-16 13:47:47

【问题描述】：

我正在使用 Google 跟踪代码管理器将网页浏览事件推送到数据层以进行分析跟踪。这发生在 componentDidMount() 中（如果我正在使用 withRouter 侦听查询字符串参数随位置属性的变化，有时是 componentWillReceiveProps()）。

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

我注意到一个问题，即我在 Google 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.");
      
;

【参考方案1】：

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

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

See github issue comment

更新功能

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

【讨论】：

现在可能有更好的解决方案，但一年多以前，这是唯一能找到的解决方法。

那个问题仍然存在...github.com/nfl/react-helmet/issues/189！让我们有一个 dataLayer.push('event':'pageTitleUpdated' 完成时发生或推送可用的 GA 使用的值，并配置 GA 使用这些而不是默认的 DOM 值

10x Matthew，这些 React / GTAG 和头盔快把我逼疯了！！！