Google Analytics ga('set') 等同于 Google 跟踪代码管理器

Question

引自https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications

When your application loads content dynamically and updates the URL in the address bar, the data stored on your tracker should be updated as well.

ga('set', 'page', '/new-page.html');

如果我将 Google 跟踪代码管理器与 Google 分析一起使用，我如何运行做到这一点？

下面是我如何使用高阶组件跟踪 React 路由器上的路由更改时的网页浏览量的片段

 componentDidMount() {
      const { history } = this.props;
      this.history = history.listen(location => {
        if (history.action === 'PUSH') {
          // location change
          if (window && window.dataLayer) {
            const dataLayer = window.dataLayer || [];
            const { pathname, search } = location;
            // how to achieve this with Google Tag Manager?
            // ga.set('page', `${pathname}${search}`);
            setTimeout(() => {
              dataLayer.push({
                event: 'Pageview',
              });
            }, 1000);
          }
        }
      });
    }

Answer 1

如果您使用的是 GTM，那么我可以推荐两个选项。

选项 1， 如果您的应用在路由更改时实际更新 URL：

创建一个自定义事件触发器来跟踪您已推送到数据层的 Pageview 事件。
进入“变量”并确保选择了“页面路径”。
创建一个新的 GA 标签并确保选中“在此标签中启用覆盖设置”，然后在底部有“更多设置”的下拉菜单，您会看到“用于Set”，点击“Add Field”，可以添加“page”，并将值设置为{{Page Path}}。然后在步骤1中创建的触发器中添加

保存并运行，您应该通过此事件将综合浏览量数据发送到 GA。该路径将是浏览器 url 栏中的任何内容。

如果你想要一个更个性化的路径，那么你可以修改你的代码如下，我们在数据层添加了“page-path”变量。

componentDidMount() {
          const { history } = this.props;
          this.history = history.listen(location => {
            if (history.action === 'PUSH') {
              // location change
              if (window && window.dataLayer) {
                const dataLayer = window.dataLayer || [];
                const { pathname, search } = location;
                // how to achieve this with Google Tag Manager?
                // ga.set('page', `${pathname}${search}`);
                setTimeout(() => {
                  dataLayer.push({
                    page-path: ${pathname}${search},
                    event: 'Pageview'
                  });
                }, 1000);
              }
            }
          });
        }

然后您需要设置一个新的数据层变量以在 GTM 中捕获它：

然后回到之前创建的GA标签，将“page”字段值修改为这个新变量：

Google Analytics ga('set') 等同于 Google 跟踪代码管理器

Google Analytics ga('set') equivalant on Google Tag Manager

google-analytics

google-tag-manager

reactjs

react-router