ReactJS 与 Google 标签管理器

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.

Note:

React.PropTypes has moved into a different package since React v15.5. Please use the prop-types library instead. We provide a codemod script to automate the conversion.

Answer 2

React.PropTypes - 现在与 React 分开了，所以 PropTypes 有另一个包。

你需要

安装proptypes package
将道具类型导入您的文件： import PropTypes from 'prop-types';
将 PropTypes 用作独立库

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

或

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

ReactJS 与 Google 标签管理器

ReactJS with Google Tag Manager

javascript

google-tag-manager

reactjs