Agregar Google Tag Manager (GTM) a un sitio web de React implica insertar el script GTM en su aplicación. Así es como puedes hacerlo:

1. Cree una cuenta de Administrador de etiquetas de Google

Si aún no lo ha hecho, debe crear una cuenta de Google Tag Manager y configurar un contenedor para su sitio web. Google le proporcionará dos fragmentos de código:

• Una etiqueta
• Una etiqueta

2. Instale GTM en su aplicación React

Opción 1: agregar manualmente el código GTM

1. Inserte el script GTM en la etiqueta : En una aplicación React, el archivo public/index.html es donde agregará el script GTM.

Reemplace GTM-XXXXXX con su ID de contenedor GTM real.

1. Inserte la etiqueta Coloque la etiqueta

Opción 2: usar una biblioteca React GTM

También puedes usar una biblioteca React para simplificar la integración.

1. Instalar la biblioteca GTM:

Utilice npm o hilo para instalar el módulo react-gtm:

   npm install react-gtm-module

1. Inicializa GTM en tu aplicación:

En su componente principal de React (por ejemplo, App.js), inicialice GTM de esta manera:

   import React, { useEffect } from 'react';
   import TagManager from 'react-gtm-module';

   const App = () => {
       useEffect(() => {
           const tagManagerArgs = {
               gtmId: 'GTM-XXXXXX'
           };
           TagManager.initialize(tagManagerArgs);
       }, []);

       return (
           

               {/* Your app components */}
           
       );
   };

   export default App;

Nuevamente, reemplace GTM-XXXXXX con su ID de contenedor GTM real.

3. Verificar la instalación

Después de agregar GTM a su aplicación React, publique los cambios y verifique que GTM esté funcionando usando la extensión de Google Tag Assistant para Chrome o consultando la sección "Tiempo real" en Google Analytics.