Setup Google Analytics with React JS web application - Part 1

We need to navigate to the analytics page of Google first using the link https://analytics.google.com. If we are new to google analytics (ga) we will see a welcome screen like the below image.

Once click on the "Start measuring" button it will show an account setup screen where we need to enter any name for "Account name" field then tick on "Google products and services" option if needed and click on "Next" button.

The Property setup window will show where you have to enter any value which represents your web application. After entering a name click on "Next" button.

It will ask for some details about the business like which category the business belongs to and the business size and some other data. Once fill it click on the Create button shown bottom part of the screen.

Once click on Create button it will pop up a message where we need to accept the terms of service. There might be more than one check box that needs to be ticked. Scroll down in the popup and tick all the checkboxes then click on the "I Accept" button.

Once we did the above setup it will show the dashboard. The Data Streams tab in the left panel is chosen automatically and it will display the option to choose our platform. Here we will choose Web as our platform since we are going to add analytics for our react web application.

Once the web button is clicked in the above step it will bring up a popup window where we have to choose a website URL of our react web app. If we already know the URL where we are going to publish our web app then we can enter that URL in the Website URL field. If we don't know the URL we can just give some testing URL. Also in the Stream name, we have to provide a value, here we can say the website name if we already know it otherwise we can just give any value. Once we have given values for both of the above-mentioned fields we need to click on the "Create stream" button.

After that Web stream details page will appear where we have to copy the code in the Tagging instructions section. Click on the Global site tag option then it will grow to show the code which will look like the below image. Copy the shown code using the copy button provided tehre.

Next, we have to add react-ga package which we are going to use to send the data from our web application to google analytics. To install the above package using npm package manager uses the command "npm install react-ga". This command need to be run from inside the current react js project directory.

npm install react-ga

After that, we need to open the file called index.html inside the public directory of the react js project. Here we need to be more careful that we are going to open the folder named public, not the folder src which normally we use. Past the code which we copy from the above step inside the head tag of the above-mentioned index.html file. Once we copy the file will look like the below image.

We will see how to track the analytics in the next article...