Sunday, June 7, 2015

Track web site visitors using Google Analytic Free

In this post I'm going to explain integrating Google Analytic in to web site and way of tracking visitors to the particular web page. This is using Eclips but if you get the basic concept behind this you can integrate this with any web project.

Prerequisites 
  1. You should have install java in your PC and set path variable correctly (JAVA_HOME, JRE_HOME)
  2. You should have install Eclips Java EE IDE in your PC
  3. You should have Apache Tomcat in your machine and it should be added to Run Time Environments in Eclips 
Step 1 Create Dynamic web project
As first step lets create simple Dynamic Web Project using Eclips. Go to File->New->New Dynamic Web Project. Give prefered name to the project (Here I will user project name as GoogleAnalyticTracking as Figure 1) Then click finish. 

Figure 1: New Dynamic Web Project
 Then Right click on WebContent folder and New->HTML File and give file name as index.html. Then Click finish. Then add following content in to that file.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Google Analytic Tracking</title>
</head>
<body>
This is Google Analytic Tracking tutorial
</body>
</html>

Then Right click on project and select Run As-> Run On Server. If you successfully follow the steps then you can see out put like figure 2.

Figure 2: When project Run On Server 

So the page that we create have following URL

http://localhost:8080/GoogleAnalyticsTracking/

Then replace the localhost with your machine IP address. 

http://192.168.1.6:8080/GoogleAnalyticsTracking/

Now we have our simple web page and lets setup Google Analytic for this site.

Step 2 Setup Google Analytic for our web site.

Go to https://www.google.com/analytics/ site and click "Access Google Analytics" button on Right top corner. Then Click Sign Up button. Then you can see page like Figure 3.

Figure 3: Google Analytic Sign Up page
  
Provide preferred name for Account Name and Web site name.  For the web site URL provide the URL which you can access your web page. For me it would be http://192.168.1.6:8080/GoogleAnalyticsTracking/. The select reporting time zone you preferred.Then Click Get Tracking ID. 

Figure 4: Google Analytic Admin page
Then you can see there is a javascript given in text field under Web site Tracking as show in Figure 5.
Figure 5: Google tracking code
Copy and past that script in to header section in index.html as show in Figure 6.
Figure 6: Add Google Analytic Tracking code in to index.html

Now we have integrate the Google Analytic with our web page and if you have many pages to track add this script in to every page you wan't to track. To verify all the tracking working correctly go to Reporting tab click Locations under Real-Time. Then in new tab go to your page created and then go to Google Tracking Reporting you can see the access location as show in Figure 7. 

Figure 7: Real Time location data display on Google Analytic

Not only the location but also Traffic Source, Device type, Browsers and many more data can be access through this report. I'll provide further details on Google Analytic Reports in future posts. Hope this basic steps to integrate Google Analytic will help you to integrate it to any web project.

No comments:

Post a Comment