1

I am trying to track my application with Google Tag Manager. I found a package here: https://www.npmjs.com/package/react-google-tag-manager which seems to be popular but I am unsure how to configure it properly despite the instructions!!

I took the example from the website and created a new script called google-tag-manager.js.

I have then included this on one of the pages I want to track: import GoogleTagManager from '../components/google-tag-manager'

I then simply added the tag to within my render() function <GoogleTagManager gtmId='GTM-XXXXX' />.

I am guessing I don't fully understand as I am now getting an error of:

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,

Have I missed something or am I doing something wrong?

Thanks

Side issue:

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
Elliot Reeve
  • 901
  • 4
  • 21
  • 39

2 Answers2

1

React.PropTypes - is now separated from react so there's another package for PropTypes.

You will need to

  1. Install proptypes package
  2. Import proptypes to your file: import PropTypes from 'prop-types';

  3. Use PropTypes as standalone library

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

OR

You can just remove whole proptypes code block, but I wouldn't recommend this

Andrey
  • 4,020
  • 21
  • 35
  • I tried adding proptypes then importing but it hasn't made any difference? I get this in the terminal as well: "Line 3: 'PropTypes' is defined but never used " – Elliot Reeve Oct 12 '17 at 11:09
  • Sorry, missed the change to the PropTypes declaration! – Elliot Reeve Oct 12 '17 at 11:11
  • But i do have two errors in the console now, any ideas: 1. proxyConsole.js:54 Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.null 2. VM8827:6 GET http://www.googletagmanager.com/gtm.js?id=GTM-XXXXX net::ERR_ABORTED – Elliot Reeve Oct 12 '17 at 11:12
  • Resolved one of the errors, it was because the tag wasn't published but I still have this issue: proxyConsole.js:54 Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.null – Elliot Reeve Oct 12 '17 at 11:18
  • I believe new error isn't related to proptypes, so I need more context. Maybe this will help https://stackoverflow.com/questions/35952607/what-does-stateless-function-components-cannot-be-given-refs-mean – Andrey Oct 12 '17 at 11:29
  • I have added the full error into the question shown in the console, but I have no idea where its derived from. – Elliot Reeve Oct 12 '17 at 11:33
  • OK I See, it's only a warning, everything should work. You should lookup for ref to component to avoid this warning. More info here: https://stackoverflow.com/questions/38619265/stateless-function-components-cannot-be-given-refs – Andrey Oct 12 '17 at 11:39
  • I don't really understand what that means so I will just ignore it :) – Elliot Reeve Oct 12 '17 at 11:49
0

The module you are referring to uses PropTypes from react and PropTypes is a different package now. 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.

bennygenel
  • 23,896
  • 6
  • 65
  • 78