在 React SPA 中实现 gtag 时遇到问题

Question

我尝试在 React SPA 中实现 GTag。

我有以下代码：

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <base href="/" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans" />
  </head>

  <body>
    <div id="app"></div>
    <% if (process.env.GA_TRACKING_ID) { %>
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=${process.env.GA_TRACKING_ID}"
    ></script>
    <% } %>
  </body>
</html>

gtag.jsx

window.dataLayer = window.dataLayer || [];

export default function gtag(...args) {
  window.dataLayer.push(args);
}

GTag.jsx

import PropTypes from 'prop-types';
import React from 'react';

import gtag from '../../utils/gtag';

export default class GTag extends React.Component {
  static propTypes = {
    children: PropTypes.node.isRequired,
    history: PropTypes.shape().isRequired,
  };

  componentWillMount() {
    const { history } = this.props;
    history.listen(location => {
      console.log(location);
      gtag('config', process.env.GA_TRACKING_ID, { page_path: location.pathname });
    });
  }

  render() {
    const { children } = this.props;

    return children;
  }
}

index.jsx（Webpack 入口点）

import gtag from './utils/gtag';
// ...
gtag('js', new Date());
gtag('config', process.env.GA_TRACKING_ID);

每当我导航到一个页面时，都会从 console.log 语句记录到控制台。但是，我在分析控制台中没有看到任何 activity。

我检查了压缩代码，GA_TRACKING_ID 变量在生产版本中被正确替换。

我错过了什么？

Answer 1

原来 Arguments 应该被推送到 dataLayer，而不是数组。这意味着不支持 gtag 函数的传播语法。

已更新gtag.jsx:

window.dataLayer = window.dataLayer || [];

export default function gtag() {
  // The gtag dataLayer requires an actual Arguments object to be pushed.
  // eslint-disable-next-line prefer-rest-params
  window.dataLayer.push(arguments);
}

在 React SPA 中实现 gtag 时遇到问题

Trouble implementing gtag in React SPA

javascript

reactjs

gtag.js