React JS + Google Tag Manager

The project was bootstraped using CoreUI (:atom_symbol: React JS Version 3);

We are trying to implement Google Tag Manager on it. I’ve made tests with “react-gtm-module”, “react-google-tag-manager” and with the snipet provided by Google to be inserted at the HTML document;

Only “react-gtm-module” works, but it’s parcially. The lib initializes the GTM correctly, but then it can not make any “dataLayer” push. The only moment that TagManager.dataLayer() works is in the same view that TagManager.initialize() is called.

What I mean is that nothing happen when I try to dataLayer.push(data) after the user login. In the console I’m able to see the global varibale dataLayer and interact with it, but throug JSX seems to be unreachble, even by the lib or with Document or Window APIs.

I would apreciate any link with demonstration of a implementation of “dataLayer.push(data)” in different views of a React application that uses Router-DOM or any sugestions of what would be causing us this trouble.

Initialization WORKS and I’m able to push data to dataLayer at this file and visualize it on GTM Debbuger

const tagManagerArgs = {
    gtmId: `GTM-${process.env.REACT_APP_GTM}`
}

TagManager.initialize(tagManagerArgs)

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

But in other files (application views/routes) it DOESN’T WORK and nothing happens when data is pushed.

Methods I’ve tried to send data to GTM:

window.dataLayer.push({
  userName: this.state.userName,
  email: this.state.email,
  message: "Usuário cadastrou conta nova (não confirmada)."
});

 TagManager.dataLayer({
   dataLayer: {
     userName: this.state.userName,
     email: this.state.email,
     message: "Usuário cadastrou conta nova (não confirmada)."
   },
   dataLayerName: "testDataLayer"
});

Usefull links: