Implementing Google Tag Manager within a Typescript Project using React on the Front End

Google Tag Manager is a great tool for web developers and marketing teams to work with each other. I needed to install a GTM container on a website using React.js. This demo website was built using React and Typescript. These are implementation steps for users new to Google Tag Manager installations. In order to create a new GTM container, visit tagmanager.google.com. You will create a new account in the upper-right hand corner. 

Once the container is created you'll recieve a modal prompt in the tag manager interface.

Copy the first container code and paste it into the head of the index.html file in the public folder of your React.js project.

Copy the second container code and paste it into the body of the index.html file in the public folder of your React.js project. 

Save the project and deploy your project to your webhost of choice. Again, this testing project was deployed here. A simple QA using the preview mode shows that the GTM container is successfully implemented onto the website.

The debugger is a pop up modal when the Google Tag Manager preview mode is active. 

Once the tag assistant confirms the connection you will also see connected on the Tag Assistant tab of the Google Tag Manager preview mode. This page shows several things to us:

1. Events
2. dataLayer containing information that will be made available in tag manager
3. variables within the dataLayer
4. Tags that will fire in the GTM container and any errors in the dataLayer