How web beacons perform web analytics data collection

September 22, 2008 – 5:07 am

How does  web beacons work? if you have asked the question any time and would like to know still, read on !

If you are looking forward to know how does an analytics tag work or what is a web beacon, this post might help you.
A web beacon is usually a 1X1 pixel transparent image which gets embedded into a web page or an email message which acts as a way to exchange data between the client and the web analytics data collection server.

Lets see how web beacons really work and transfer data to the server.

Web beacons through javascript tags

The usual web analytics data collection method being used is by means of javascript tags. Each web page which need to be analyzed or tracked contains few lines of javascript code. Following is an example of statcounter code (which is taken out of this page itself, as I use statcounter as one of the web analytics tool. Its free!!)

<!-- Start of StatCounter Code -->
<script type="text/javascript">
<!--
var sc_project=2296441;
var sc_invisible=1;
var sc_partition=21;
var sc_security="0d580486";
//-->
</script>

<script type="text/javascript" src="http://www.statcounter.com/counter/counter_xhtml.js"></script>
<noscript><div class="statcounter"><a class="statcounter" href="http://www.statcounter.com/">
<img class="statcounter" src="http://c22.statcounter.com/counter.php?sc_project=2296441&java=0&security=0d580486&invisible=1" alt="web tracker" />
</a></div></noscript>

<!-- End of StatCounter Code -->

Let me explain what this code does.

In first 4 lines of this code, few statcounter account related variables are being initialized (such as sc_project, sc_invisible etc). The last part of the code is inclusion of an external js file from the statcounter.

The code from statcounter does many things. For example it finds out the referring URL to the current page you are viewing, the page’s URL, title of the page, your browser’s resolution, your IP address etc etc).

Now comes the web beacon. The web analytics data is collected by the script from statcounter. And at the end of this initial process of collecting information, the data need to be passed to the statcounter server. This is achieved by use of a web beacon or image plug. An image request URL is formatted appending all the variables and values which need to be passed. Javascript outputs an <img> tag with this URL as the src attribute. When the browser renders this image, the script at statcounter.com collects the data present in the query string and sends out the 1X1 transparent image as the response (it was a request for an image – remember that).

Web beacons as part of a mobile specific web page

You would have seen a <noscript> portion in above statcounter code, which has an <img> tag in it. The URL in the scr attribute of that contains the basic variables which need to be passed. The <noscript> tag comes handy on a browser which dont execute javascript. Tagging in a mobile specific site is similar to the noscript portion above.

Here only difference being that there will not be any javascript code and the data exachange happens the same way as above. For which an image is embedded using the <img> tag with similar output of the above javascript code as the src URL. We have limitation that we cant pass values which the javascript code might have done in the first scenario such as the browser resolution etc. But the <img> output can be controlled at server level, finding the necessary data to be passed such as client IP address, referring URL etc.

What mentioned above is a generic method for page level web analytics tagging and how data is collected using this method. This process is similar if you take any tool such as Google Analytics, Omniture SiteCatalyst etc. In case of Omniture we have provision to send custom variables to Omniture by using javascript tags or through the image requests, which can be used for finding more actionable insights..

Thats it in this post.. I appreciate comments which can really help me modify this overview !!

  1. 3 Responses to “How web beacons perform web analytics data collection”

  2. Hey Ram,

    Great stuff!!

    Looking forward for such insights in near future also.

    By uma shankar on Sep 22, 2008

  3. Wow great post. Very informative. Stat counter is good and I like to use analytics as well…

    By Jon - SEO Manchester on Oct 27, 2009

  4. Why is a image request?Any request type is can send the query string to analytics server,so I don’t understand why image is choosed?

    By wphmoon on Oct 11, 2010

Post a Comment