Comment ajouter du code Google Tag Manager dans un site Web React

Ajouter Google Tag Manager (GTM) à un site Web React implique d'insérer le 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 :

Un balise qui va dans le de votre HTML. Un balise qui va immédiatement après l'ouverture étiquette.

2. Installez GTM dans votre application React

Option 1 : ajout manuel du code GTM

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

React App (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-XXXXXX');

Remplacez GTM-XXXXXX par votre ID de conteneur GTM réel.

Insérez le Balise après le Étiquette : Placez le juste après l'ouverture balise comme indiqué ci-dessus.

Option 2 : Utiliser une bibliothèque React GTM

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

Installer la bibliothèque GTM :

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

npm install react-gtm-module

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 « Temps réel » dans Google Analytics.