ReactJS 与谷歌标签管理器

Question

我正在尝试使用 Google 跟踪代码管理器跟踪我的应用程序。我在这里找到了一个包：https://www.npmjs.com/package/react-google-tag-manager，它似乎很受欢迎，但我不确定如何正确配置它，尽管有说明！！

我从网站上获取示例并创建了一个名为 google-tag-manager.js 的新脚本。

然后我将其包含在我要跟踪的页面之一中：import GoogleTagManager from '../components/google-tag-manager'

然后我简单地将标签添加到我的 render() 函数 <GoogleTagManager gtmId='GTM-XXXXX' />。

我猜我不完全理解，因为我现在收到以下错误：

TypeError: Cannot read property 'string' of undefined
./src/components/google-tag-manager.js
src/components/google-tag-manager.js:36
  33 | }
  34 | 
  35 | GoogleTagManager.propTypes = {
> 36 |     gtmId: React.PropTypes.string.isRequired,
  37 |     dataLayerName: React.PropTypes.string,
  38 |     additionalEvents: React.PropTypes.object,
  39 |     previewVariables: React.PropTypes.string,

我错过了什么还是我做错了什么？

谢谢

附带问题：

proxyConsole.js:54 Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.null
__stack_frame_overlay_proxy_console__ @ proxyConsole.js:54
printWarning @ warning.js:33
warning @ warning.js:57
mountIndeterminateComponent @ react-dom.development.js:10439
beginWork @ react-dom.development.js:10601
performUnitOfWork @ react-dom.development.js:12573
workLoop @ react-dom.development.js:12682
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
performWork @ react-dom.development.js:12800
scheduleUpdateImpl @ react-dom.development.js:13185
scheduleUpdate @ react-dom.development.js:13124
enqueueSetState @ react-dom.development.js:9646
./node_modules/react/cjs/react.development.js.ReactComponent.setState @ react.development.js:218
(anonymous) @ base.js:29
Promise resolved (async)
componentDidMount @ base.js:23
commitLifeCycles @ react-dom.development.js:11505
commitAllLifeCycles @ react-dom.development.js:12294
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
commitAllWork @ react-dom.development.js:12415
workLoop @ react-dom.development.js:12687
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
performWork @ react-dom.development.js:12800
scheduleUpdateImpl @ react-dom.development.js:13185
scheduleUpdate @ react-dom.development.js:13124
scheduleTopLevelUpdate @ react-dom.development.js:13395
updateContainer @ react-dom.development.js:13425
(anonymous) @ react-dom.development.js:17105
unbatchedUpdates @ react-dom.development.js:13256
renderSubtreeIntoContainer @ react-dom.development.js:17104
render @ react-dom.development.js:17129
./src/index.js @ index.js:20
__webpack_require__ @ bootstrap 6f791d33f885679fccb8:669
fn @ bootstrap 6f791d33f885679fccb8:87
0 @ registerServiceWorker.js:108
__webpack_require__ @ bootstrap 6f791d33f885679fccb8:669
./node_modules/add-dom-event-listener/lib/EventBaseObject.js.Object.defineProperty.value @ bootstrap 6f791d33f885679fccb8:715
(anonymous) @ bundle.js:719

Answer 1

您所指的模块使用来自react 的PropTypes 和PropTypes 现在是不同的包。 More info here.

注意：

React.PropTypes 自 React 以来已移入不同的包 v15.5。请改用prop-types 库。我们提供一个 codemod script 自动转换。

Answer 2

React.PropTypes - 现在已与 react 分离，因此有另一个 PropTypes 包。

你需要

1. 安装proptypes package
2. 将 proptypes 导入您的文件： import PropTypes from 'prop-types';

3. 使用 PropTypes 作为独立库

   GoogleTagManager.propTypes = { gtmId: PropTypes.string.isRequired, dataLayerName: PropTypes.string, additionalEvents: PropTypes.object, scriptId: PropTypes.string };

或

您可以删除整个 proptypes 代码块，但我不建议这样做