@delpha
To integrate Google Tag Manager with a React app, follow these steps:
- Sign up for a Google Tag Manager account and create a new container.
- Install the react-gtm-module package by running the following command in your terminal:
npm install react-gtm-module
- Open the index.js file of your React app and import the TagManager class from react-gtm-module:
import TagManager from 'react-gtm-module';
- Initialize Google Tag Manager by calling the initialize method with your GTM container ID. Add this code below your import statements:
const tagManagerArgs = {
gtmId: 'GTM-XXXXXX' // Replace GTM-XXXXXX with your GTM container ID
};
TagManager.initialize(tagManagerArgs);
- Add the following code just before the ReactDOM.render method:
TagManager.dataLayer({
dataLayer: {
// Additional data, such as user information or custom events, can be added here
}
});
- Add the GTM script to your index.html file. Open the public/index.html file and locate the tag. Add the following code inside the tag, replacing GTM-XXXXXX with your GTM container ID:
- Now you can start using Google Tag Manager by adding the relevant tags, triggers, and variables to your GTM container. You can do this directly in the Google Tag Manager interface.
Ensure that you build and deploy your React app to see the Google Tag Manager script and tracking in action.