Using jQuery and Web API to Create Your Own Analytics

I know that it is hard to believe but sometimes you might need more than Google analytics to help determine users’ interactions on a site. For example, suppose you have several links on your page that allow users to move up and down to certain sections on the page. Or suppose you have a single page app that the users stays on and completes everything on one page. You could investigate Google’s _trackEvent(category, action, opt_label, opt_value, opt_noninteraction) but maybe this is an internal web site that you really don’t want Google to track. Using a little jquery and some code you can create your very own analytics.

This article is not a step by step article but rather an article to get you jump started in the right direction. It hopefully will also give you some ideas on how you can use jquery to really get a handle on what your users are doing and where they are going. You could even capture the length of time they spend in a particular area.

This script below attaches a click event on anything that has a ‘#’ as it’s reference. You could add this to images, lines in a table grid, items added to a cart but not actually bought, etc.


<!-- Example jQuery Reference -->
<script src="latest-jquery.min.js"></script>

<!-- Your capture script -->
<script type='text/javascript'>
    $(function(){
          // When a link with an anchor is clicked
          $('a[href*="#"]').click(function(e){
                // Capture other information such as the
			// Amount of time spent (Begin and Ending Times)
			// Time of Day
			// Browser information
			// etc.
                    var timeOfDay = getDate();

                      $.post("/api/Analytics", { 'timeStarted': timeOfDay })
                    .done(function (data) {
			alert('Data Recorded')
                    })
                    .fail(function () {
                        alert("Data Not Recorded");
                    })
                    .always(function () {
                    });
          });
    });
</script>

Your server side code would look something like this.


 Public Function PostValue(ByVal timeStarted As AnalyticClass) As HttpResponseMessage

	--Code goes here to save to database      

    End Function
End Class

Public Class AnalyticClass
    Public Property timestarted As String
    ---Other Items----
End Class

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , , | Posted under Programming/Coding | RSS 2.0

Author Spotlight

David Bauernschmidt

David Bauernschmidt

I live in the historical triangle of Virginia where I am married with two daughters. I have spent over 13 years working for a Fortune 500 company in the computer area. I started in VB 6.0 and by the time I ended my employment I was supervising a development team where we built many web applications. When my first daughter was born I wanted to spend more time with her so I left and became a programmer analyst for local government as well as launch my own company. Since then I have grown James River Webs into a profitable web design and application company helping small businesses create a big presence on the internet. As an employee I have created web application used by citizens and other companies. I enjoy fly fishing, and spending time with my family. I also enjoy learning new approaches and development tools when it comes to developing applications.

Leave a Reply

Your email address will not be published. Required fields are marked *


× 2 = 6

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>