L'ajout de Google Tag Manager (GTM) à un site Web React implique l'insertion du script GTM dans votre application. Voici comment procéder :

1. Créez un compte Google Tag Manager

Si vous ne l'avez pas déjà fait, vous devez créer un compte Google Tag Manager et configurer un conteneur pour votre site Web. Google vous fournira deux morceaux de code :

• Une balise
• Une balise

2. Installez GTM dans votre application React

Option 1 : ajout manuel du code GTM

1. Insérez le script GTM dans la balise  : Dans une application React, le fichier public/index.html est l'endroit où vous ajouterez le script GTM.

Remplacez GTM-XXXXXX par votre ID de conteneur GTM actuel.

1. Insérez la balise Placez la balise

Option 2 : Utiliser une bibliothèque React GTM

Vous pouvez également utiliser une bibliothèque React pour simplifier l'intégration.

1. Installer la bibliothèque GTM :

Utilisez npm ou Yarn pour installer le module React-Gtm :

   npm install react-gtm-module

1. Initialisez GTM dans votre application :

Dans votre composant React principal (par exemple, App.js), initialisez GTM comme ceci :

   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;

Encore une fois, remplacez GTM-XXXXXX par votre ID de conteneur GTM réel.

3. Vérifiez l'installation

Après avoir ajouté GTM à votre application React, publiez les modifications et vérifiez que le GTM fonctionne en utilisant l'extension Chrome de Google Tag Assistant ou en vérifiant la section « En temps réel » dans Google Analytics.