Adicionar o Google Tag Manager (GTM) a um site React envolve a inserção do script GTM em seu aplicativo. Veja como você pode fazer isso:

1. Crie uma conta do Gerenciador de tags do Google

Se ainda não o fez, você precisa criar uma conta do Gerenciador de tags do Google e configurar um contêiner para seu site. O Google fornecerá dois trechos de código:

• Uma tag
• Uma tag

2. Instale GTM em seu aplicativo React

Opção 1: adicionar manualmente o código GTM

1. Insira o script GTM na tag : Em um aplicativo React, o arquivo public/index.html é onde você adicionará o script GTM.

Substitua GTM-XXXXXX pelo seu ID de contêiner GTM real.

1. Insira a tag Coloque a tag

Opção 2: usando uma biblioteca React GTM

Você também pode usar uma biblioteca React para simplificar a integração.

1. Instale a biblioteca GTM:

Use npm ou yarn para instalar o react-gtm-module:

   npm install react-gtm-module

1. Inicialize o GTM em seu aplicativo:

Em seu componente React principal (por exemplo, App.js), inicialize o GTM assim:

   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;

Novamente, substitua GTM-XXXXXX pelo seu ID de contêiner GTM real.

3. Verifique a instalação

Depois de adicionar o GTM ao seu aplicativo React, publique as alterações e verifique se o GTM está funcionando usando a extensão Google Tag Assistant para Chrome ou verificando a seção "Tempo real" no Google Analytics.