[RESOLVED]How to track the number of clicks on an image?


I’m working on a MVC3 web application, where on 1 page, there are several images posted, and clicking on each image will open a new window and go to another url.

Now, those images are hosted in an Amazon AWS S3 bucket (within our control); and each image can be accessed via a separate url. On this page, each image is in  a <div>.

Once this page is posted, everyone can access it and click on any of the images. We host this page and all the images.

My objective is: I need to track how many times that a given image has been clicked on.

Is there some existing code or JavaScript or counter that can be applied to each image, thus would keep track of the clicks?

If so, what other info can be tracked? Like the timestamp that someone clicks on an image?

I got this new requirement today, but I’m not sure what is the best route to address it.

Also – there are many pages like this page, with their own sets of images; so whatever code that I need to apply to each page or each image, I need to be able to apply to it programmatically (not manually).

Any advice / idea / suggestion will be appreciated.



Look at Google analytics


You can do what is mentioned above using Google analytic or you can wire up an ajax method which listens for any clicks on the images, once an image is clicked it can pass in the particular Id and increment the count of that image in the db then post the
to URL

An easy way to handle this would be to trigger an AJAX / jQuery call whenever your particular image link was clicked on. You could create a very simple handler that would capture any clicks on certain images and it would store an ID value (to help identify
the image
) :

<!-- Example jQuery Code -->
<script type='text/javascript'>
           // When a link that would navigate to an image is clicked on
                 // Prevent any default navigation right away

                 // Store the proper URL to target (after DB is updated)
                 var target = $(this).attr('href');            

                 // Get the ID for that image (stored in a data property on the image)
                 var id = $(this).find('img').data('imageref');

                 // Make an AJAX call indicating your image was clicked
                 $.post('@Url.Action("ImageViewed","YourController")', { image = id }, function(){
                      // When it's complete, navigate to the image
                      window.location.href = target;

<!-- Example Image Markup -->
<a class='trackimage' href='ViewImage?image=12345' title='View Image 12345'>
      <img src='~/Images/12345.png' data-imageref='12345' />

This would pass along the ID of your Image that was clicked to an ImageViewed action in your Controller, which you could use to make a database call (either through ADO.NET or EntityFramework) to update the number of view for a particular image (to be
stored in a database
) :

public void ImageViewed(string image)
     // Example ADO.NET approach
     using(var connection = new SqlConnection("Your Connection String"))
           // Build your query
           var query = "UPDATE ImageViewed SET ViewCount = ViewCount + 1 WHERE ImageId = @ImageId";

           // Build a command to execute this query
           using(var command = new SqlCommand(query,connection))
                 // Open your connection

                 // Add your parameters

                 // Update your database

This is just an example but it should hopefully point you in the right direction.

Thanks a lot everyone for the input!

Thanks Rion for the detailed explanation and code sample.

I will try the suggestion and report back.



Leave a Reply