holidaycheck / react-google-tag-manager

This repository contains a react based implementation for Google's Tag Manager snippet.
MIT License
192 stars 31 forks source link

Library not working. #84

Open abbeyseto opened 5 years ago

abbeyseto commented 5 years ago

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"

royHinojosa commented 5 years ago

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 />'