在 React SPA 中实现 gtag 时遇到问题
Trouble implementing gtag in React SPA
我尝试在 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 变量在生产版本中被正确替换。
我错过了什么?
原来 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。
我有以下代码:
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 变量在生产版本中被正确替换。
我错过了什么?
原来 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);
}