Library not working.
Opened this issue · 1 comments
What is the proper way of using this library. i followed the documentation on the read me, its not working. page view wasn't firing.
import React from 'react';
import gtmParts from 'react-google-tag-manager';
class GoogleTagManager extends React.Component {
componentDidMount() {
const dataLayerName = this.props.dataLayerName || 'dataLayer';
const scriptId = this.props.scriptId || 'react-google-tag-manager-gtm';
if (!window[dataLayerName]) {
const gtmScriptNode = document.getElementById(scriptId);
eval(gtmScriptNode.textContent);
}
}
render() {
const gtm = gtmParts({
id: this.props.gtmId,
dataLayerName: this.props.dataLayerName || 'dataLayer',
additionalEvents: this.props.additionalEvents || {},
previewVariables: this.props.previewVariables || false,
scheme: this.props.scheme || 'https:',
});
return (
<div>
<div>{gtm.noScriptAsReact()}</div>
<div id={this.props.scriptId || 'react-google-tag-manager-gtm'}>
{gtm.scriptAsReact()}
</div>
</div>
);
}
}
GoogleTagManager.propTypes = {
gtmId: React.PropTypes.string.isRequired,
dataLayerName: React.PropTypes.string,
additionalEvents: React.PropTypes.object,
previewVariables: React.PropTypes.string,
scriptId: React.PropTypes.string,
scheme: React.PropTypes.string,
};
export default GoogleTagManager;
gtm.noScriptAsReact() and gtm.scriptAsReact() appears in the body of the document and no event was firing.
Please has anyone successfully implemented this library using react?
CONFIGURATION
"react-google-tag-manager": "^2.2.1",
"react": "^16.2.0",
"@babel/runtime": "^7.0.0-beta.56",
"react-scripts": "^2.1.3"
In the docs, it says that's one way of using: "To use it in your project run npm i react-google-tag-manager. It could be used like the following example".
So, the way I did it was just installed via npm and added the GTM tag in the area where i wanted it to render like: <GoogleTagManger gtmId='GTM-XXXX />'