Search code examples
javascriptjqueryhtmlanalyticstracking

Element click count tracking


I am new to computer programming, and trying to learn some possibilities to track the clicking of an element on a page. If it is a link to another page, I know I can use goo.gl or bit.ly for url tracking. If it was in WordPress, there are several utilities that track page visits. I have read enough to know that PHP could solve this, but I don't know PHP (although a link to a walkthrough or intro to PHP or similar links that can explain element tracking, I am open to learning), and the scope of this project is minimal, that is why I am looking for similar easily implemented approaches.

Possible solutions I can think of: * a possible global value that keeps track, but I don't know how to keep the persistence from user to user or reload to reload * somewhat hard to keep track of, but create several urls for each element, and have the JQuery on('click') visit the page, but I don't know how to prevent that page from opening, as it would be irrelevant to the user * I am familiar with SQL, and have a sql server that I can use, but don't know how to map to it using JS for just one page, so any info or links on this will be helpful

I have not looked into google analytics, and don't know if its possible to use this to achieve the element tracking.


Solution

  • I have used jQuery events on elements to track interaction with pages with Google Analytics in recent projects. The link that josnidhin has provided has great information about setting up event tracking on your pages. Here is a JSFiddle example to show how I have used this type of event tracking http://jsfiddle.net/kezzman11/qzr6v/.

    To prevent the link from opening if you use a URL for tracking purposes only you just need to return false using the onclick attribute on your HTML tag. eg. onclick="return false;".