Javascript 与谷歌标签管理器的互动

我正在尝试使用Google Tag Manager跟踪我的应用程序。我在这里发现了一个软件包：它似乎很流行，但我不确定如何正确配置它，尽管有说明

我从网站上取了这个例子，创建了一个名为google-tag-manager.js的新脚本

然后，我将此内容包含在我想要跟踪的一个页面上：

import GoogleTagManager from'../components/GoogleTagManager'

然后，我简单地将标记添加到我的render（）函数中

我猜我不完全理解，因为我现在得到了一个错误：

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

---

您所指的模块使用了

react

中的

PropTypes

，而

PropTypes

现在是一个不同的包

注意：

---

React.PropTypes

自React以来已移动到另一个包中 v15.5。请改用图书馆。我们提供 自动转换

---

React.PropTypes

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

你需要

安装

将PropType导入到您的文件：

从“道具类型”导入道具类型

使用PropTypes作为独立库

GoogleTagManager.propTypes={
gtmId:PropTypes.string.isRequired，
dataLayerName:PropTypes.string，
其他事件：PropTypes.object，
scriptId:PropTypes.string
};

或

---

您可以删除整个proptypes代码块，但我不建议这样做，您的reactjs版本是什么？我尝试添加proptypes，然后导入，但没有任何区别？我在终端中也看到了这一点：“第3行：定义了PropTypes，但从未使用过”抱歉，错过了对PropTypes声明的更改！但是我现在在控制台中有两个错误，任何想法：1。js:54警告：无法为无状态函数组件提供引用。尝试访问此ref将失败。null 2。VM8827:6 GET net:：ERR_Aborted解决了其中一个错误，这是因为标记未发布，但我仍然存在此问题：proxyConsole.js:54警告：无法为无状态函数组件提供引用。尝试访问此引用将失败。Null我认为新错误与proptypes无关，因此我需要更多上下文。也许这会有帮助