react-gtm icon indicating copy to clipboard operation
react-gtm copied to clipboard

DataLayer isn't being updated in internal navigation

Open mttetc opened this issue 5 years ago • 2 comments

Hello, I can't get this lib to work really good. I'm using react helmet by the way. Only thing that I can do is generating a random string for dataLayerName and it'll create another dataLayer, which is not what I want. I want the current dataLayer to be updated with new pages inside, like the result you get from window.dataLayer.push.

I'm not sure what I'm doing wrong, here is my code : App.js

        const tagManagerArgs = {
		gtmId: 'GTM-MPF7T3P'
	}

	useEffect(() => {
		loaded && TagManager.initialize(tagManagerArgs);
	}, [loaded]);

Metatags.js

const Metatags = ({pageTitle} ) => {
    const pageChanged = () => {
        TagManager.dataLayer({
            dataLayerName: 'pageDataLayer',
            dataLayer: {
                title: pageTitle
            }
        })
    }

    return (
        <Helmet
            onChangeClientState={() => pageChanged()}>
            TAGS HERE
        </Helmet>
    )
}

Data layer is changed if I navigate through but not through <Link> Anyone stumbled upon this ?

mttetc avatar Dec 02 '20 11:12 mttetc

I went with vanilla js, will use this again if it's fixed

mttetc avatar Dec 03 '20 13:12 mttetc

It was the adblocker for me causing the issue

I used

TagManager.dataLayer({dataLayer:{
        event: {}
}
}

qnxdev avatar Sep 10 '21 18:09 qnxdev