Advance IT Education

Tuesday, November 16, 2010

Tracking Your Website's Visitors

Tracking Your Website's Visitors and Statistic in ASP.NET
About this Tutorial
This tutorial lays down the basic architecture of a tracking website and highlights the technical aspects while implementing it using ASP.NET with C#. Tracking websites can record the visitor activity on any site (by pasting their tracking snippet).
The recorded data can be used to generate various useful reports. Screenshots and code snippets are shown where-ever necessary. And, you can also download the Tracking & Statistic - Visual Studio 2005 Project. This tutorial is meant for beginner-level developers and can also be used for learning various aspects of ASP.NET and C#. The todo list in the end can further develop your interest in extending this tutorial and learning more.
Let's start.
How tracking works? And how to implement it in ASP.NET
Tracking of a page can be enabled by pasting a simple html code into that page (normally inserting it before <body>). This simple html code calls the tracker, sends visitor and page's information to the tracker. What is this tracking code actually?

Normally, its a 1x1 pixel invisible image called by the html. That image resides on the tracker. Here is an example that how a tracking script is called.
<img src="/tracker.aspx">
Here is an example of ASP.NET using C# that how tracker handles the tracking script
Response.Clear();

//Code to record visitor information (elaborated in the next point)
 
Response.ContentType =
 "image/jpeg";
Bitmap bmp =
 new Bitmap(@"c:\spacer.gif");
bmp.Save(
this.Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);
The code above converts the response type to an image and outputs an invisible image (present as spacer.gif in c:\)
Meanwhile, the script gets hold of the visitor and calling page and records that information.
How to access detailed information of a visitor
In ASP.NET, the Request.ServerVariables collection holds a lot of useful information about the visitor. More about it read in Visitor Informations From Request.ServerVariables Collection tutorial.
For example:
// Getting ip of visitor
string ip = Request.ServerVariables["REMOTE_ADDR"];
// Getting the page which called the script
string page = Request.ServerVariables["HTTP_REFERER"];
// Getting Browser Name of Visitor
if (Request.ServerVariables["HTTP_USER_AGENT"].Contains("MSIE"))
  browser =
 "Internet Explorer";
if (Request.ServerVariables["HTTP_USER_AGENT"].Contains("FireFox"))
  browser =
 "Fire Fox";
if (Request.ServerVariables["HTTP_USER_AGENT"].Contains("Opera"))
  browser =
 "Opera";
Some hands on SQL-Express in Visual Studio 2005
SQL Server Express Edition installs automatically while installing Visual Studio 2005. We can create database tables while working in the same IDE of the visual studio.
In the solution explorer, you can see App_Data item in the menu tree. There we can create new tables, define our constraints, run SQL queries and view database tables.

Figure 1: Portion of the IDE related with SQL Server Express.
How to use the ip2country database and to get visitor's country from his ip in ASP.NET

Knowing the country from which your website visitor belongs is an excellent idea. Unfortunately, this information is not present in any of the cookies or server variables.
However, there are free databases available over internet that can provide a mapping of an ip adress to a country. And they are proved to be 99% correct.
There are various ip-country databases available and all of them are in a standard CSV file format. One of them is available at software77. These data are changed from time to time, so you need to update database regularly, one time per month.
Here is what we will do:
  • Create a database to hold ip-country database.
  • Load the CSV file into a database table. And allow our user to update the ip-country db anytime by providing an updated CSV file.
The following screenshot shows creating a database table to store ip-country database.

Figure 2: Adding a New Table in the database to store ip-country data


Figure 3: Asking the user to provide updated ip-country CSV File
The following code snippet shows how to read a file uploaded by FileBrowser control and how to load its content into the db.
// Creating connection with SQL Client
 
//The connection string can be created with a GUI and can be saved in web.config's AppSettings.
//Here is how to read data from web.config
 
SqlConnection connection =
 newSqlConnection(ConfigurationSettings.AppSettings["ConnectionString"]);
connection.Open();
SqlCommand command =
 new SqlCommand();
command.Connection = connection;


// Reading uploaded file data line by line and inserting it into the db
 
StreamReader sr =
 new StreamReader(FileUpload1.FileContent);
string line;

while ((line = sr.ReadLine())!=null)
 {
     command.CommandText =
 @"insert into [ip-country](starting, ending, shortcode, mediumcode, fullname) values("+line+")";
     command.ExecuteNonQuery();
 }
Dont forget to include System.Data.SqlClient.
With the above code snippet, ip-country database can be updated anytime in the table.
To use the ip-country database, the input ip should be in a long-ip format. The attached project contains that function to convert an ip in dotted format into a long-ip format. The prototype of that function is:
public double Dot2LongIP(string DottedIP)
Here is how we can get visitor's location through his ip using the ip-country db.
command.CommandText = "select fullname from [ip-country] where starting<" + longip + " and ending>"+ longip;
location = ((
string)command.ExecuteScalar());
In the above snippet, location is a string and command is and object of SqlCommand. Note that ExecuteScalar is useful when we are interested in getting only a single numeric information from the query. ExecuteReader actually returns first column of the first row of the results.

Figure 4: Here is the look of the database that records tracking information
Using calendar control to select dates, building a query
A calendar control can be used to select dates while running a report. Simply drag and drop the calendar control from the toolbox. Use the SelectionChanged event handler to update the reports. Use Calendar's SelectedDate member to get the date selected.



Figure 5: This is the display of a calendar control (asking user to select date)
To Do List
As previously mentioned, this article builds an architecture for a tracking website. Tracking script works successfully and records visitor's information into the db. Now, its upto you to generate customized reprots from recorded data. Following can be done as a practice:
  • Tabular reports can be generated by asking user to input starting and ending dates. Reports that may contain total hits, visits (same session), unique visitors (by IP address), top pages etc.
  • Graphical reports can be generated using the bitmap object and drawing graphs (circles, rectanges, lines) into it. The bitmap object then can be shown to the user on his browser. You can use some third party control or build your own graph (more about this you can find in Make Charts in ASP.NET 2.0 tutorial.
  • You can group reports to show data per day, per month, per year etc.
  • .NET's built-in login control can be used to guard this application behind some login.