Problem:
UI improvements is all about constantly experimenting with the layout/sections and test it against user metrics to see how it performed. Although tools like google analytics help us with page views and clicks, it was still hard to find out if the user had scrolled through the page to view a particular element on the page.
Solution:
I built this simple lightweight jQuery plugin that fires a callback when an element in a web page is viewed. It basically checks if the element being watched is actually in the viewport of the user. If so, the callback function is fired.
Use cases:
- Log views to a particular element on the page.
- Show ads based on elements viewed.
- Add cool site animations eg. Animate the ‘Next’ button at the end of a blog article.
The annotated source code for this plugin is given below:
[snippet id=”108″]