Add Sitemeter Code in Efficient, Optimized and Beautiful way

Are you using free sitemeter stat counter code? If yes, then you may have faced the problem of visible sitemeter image appearing on the page. Here I am not going to tell, how to hide or remove this image, as this image appear for free account, so think of it as part of agreement.

What I am going to guide you is  - How to add sitemeter stat counter image at the place you want, and - How you can place sitemeter stat counter code at the bottom of the page for fast loading of your page. Adding JavaScript at the bottom is the suggested method for optimizing page load time. You cannot achieve this every time for every widget but in this guide you will learn how to do it for sitemeter. From this example, you will also learn how to load JavaScript file with the page content. It means loading JavaScript asynchronously.

meter.asp

I use statcounter code for my site tracking along with Google Analytics code. Just to check sitemeter analytics, I have removed statcounter code to avoid extra load on my blog and added sitemeter code. I got a surprise that I cannot hide sitemeter image in free version whereas in statcounter I can do this. In free version of statcounter, users have a choice of tracker's image.

Lets come to the point of adding sitemeter code in efficient, optimized and beautiful way. This code in inspired by new Google analytics code. So, if Google Analytics code is working then this code will also work. :)

Here is what I got when I signup for sitemeter account:

<!-- Site Meter -->
<script type="text/javascript" src="http://s33.sitemeter.com/js/counter.js?site=s33satya">
</script>
<noscript>
<a href="http://s33.sitemeter.com/stats.asp?site=s33satya" target="_top">
<img src="http://s33.sitemeter.com/meter.asp?site=s33satya" alt="Site Meter" border="0"/></a>
</noscript>
<!-- Copyright (c)2009 Site Meter -->

First part is the code which will work for all visitors who have JavaScript enabled. In more than 99% cases JavaScript is enabled these days. So, we are going to work on this and left the non-javaScript part as it is.

First copy this code in your text editor:

<!-- Site Meter -->
<script type="text/javascript">
(function() {
      var st = document.createElement('script'); st.type = 'text/javascript'; st.async = true;
      st.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://') + 's33.sitemeter.com/js/counter.js?site=s33satya';
      (document.getElementById('sitemeter')).appendChild(st);
    })();
</script>
<noscript>
<a href="http://s33.sitemeter.com/stats.asp?site=s33satya" target="_top">
<img src="http://s33.sitemeter.com/meter.asp?site=s33satya" alt="Site Meter" border="0"/></a>
</noscript>
<!-- Copyright (c)2009 Site Meter -->

Now, copy the JavaScript file address from your version of code you have got in signup:

As you see at the first code block, this is my JavaScript file:

http://s33.sitemeter.com/js/counter.js?site=s33satya

Remove the "http://" and copy your JavaScript file address. Paste it to the second code snippet. Check for "s33.sitemeter.com/js/counter.js?site=s33satya". Here put your JavaScript file address. First part is almost complete. Just you need to put this code at the bottom of the page. Just wait for second part. This will not work now!

Now, search for "document.getElementById('sitemeter'))" in second block of code snippet. Here sitemeter is the id of DIV element. Write a div element where ever you want your image to appear on your page.

<div id="sitemeter"></div>

At the place you have added the above div element, your sitemeter stat counter image will appear there. Now, you are ready to go and add your version of sitemeter, which is beautiful, optimized and efficient. The code style used above is same as the Google is using for new Google Analytics tracking code.

See where I thought to add image for sitemeter:

Capture

Note: New div element created for this purpose will always come before the JavaScript code for sitemeter on HTML source. So, that the JavaScript code can find the DIV.

This asynchronous loading of JavaScript file is the part of improving web page speed. For the curious and those who are using free version of statcounter.com code, I wish to tell you that this technique work with statcounter.com code. I am telling this from my personal usage experience.

For learning more about website performance:
http://www.stevesouders.com/blog/2009/12/01/google-analytics-goes-async/
http://code.google.com/speed/page-speed/docs/using.html