javascript - 在 React SPA 中实现 gtag 时遇到问题
问题描述
我试图在 React SPA 中实现 GTag。
我有以下代码:
索引.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
每当我导航到一个页面时,它都会从语句中记录到控制台。但是,我在分析控制台中没有看到任何活动。
我检查了缩小的代码,并且在生产版本中正确替换了 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);
}
推荐阅读
- html - 表格外的输入和文本框
- reactjs - 如何在渐变上进行过渡以及为什么我的过渡会延迟?
- c++ - 无法使用文件存储和读取输入数据
- node.js - LoopbackJS/Oracle 可以使用 REST API 检索多少行是否有限制?
- escaping - 为什么 '\SO' 的行为与 Agda 中的其他转义码不同?
- ios - 不同域的同一设备/浏览器上的不同用户代理?
- javascript - 使用量角器将字符串粘贴到文本字段中
- angular - 提供通用类型作为材料表数据源实现中的众多类型之一
- python - 如何规范化 URL 并忽略斜线后的任何内容?
- swift - UIApplication.shared.open 仅适用于 https