Agregar Google Tag Manager a React

Se trata de algo sencillo si es en Wordpress o si es directamente en un sitio PHP o HTML pero ya con React se complica un poco (pero solo un poco).

Esta problemática la comparto pues en una agencia de publicidad que envió el código para métricas comentó que lo habían hecho varias veces y que era muy fácil, al darles acceso no pudieron y resultó no ser tan fácil pero la verdad es que si lo es, siempre y cuando sepas un poco de JS, de librerías y de React.

Existe un módulo que nos facilitará mucho las cosas y la forma en la que lo instalas es con:

npm install react-gtm-module --save

Ahora, luego de haber terminado de instalarlo debes importarlo en tu index.

import TagManager from "react-gtm-module";

Y por último poner los argumentos que va a recibir, que a temas prácticos basta con estos:

const tagManagerArgs = {
gtmId: 'GTM-0000000'
};
TagManager.initialize(tagManagerArgs);

Por supuesto debes cambiar el GTM por el que viene en tu código provisto por Google. Y luego donde vayas a usar las tags lo usas de la siguiente forma:

De nuevo importas la librería:

import TagManager from 'react-gtm-module';

Y se usa de la siguiente forma:

const tagManagerArgs = {
gtmId: 'GTM-0000000',
events: {
sendUserInfo: 'userInfo'
}
}
TagManager.initialize(tagManagerArgs)

Con este trozo de código tan sencillo se pone en automático y podrás empezar a capturar la información que necesitas. Ya después por supuesto un

npm run deploy

Y hemos finalizado 😁