Using JavaScript or jQuery to track views of an actual HTML element (vs. just page loads)

Question

My current project requires (if possible) tracking actual views of a JavaScript widget, so that we can compare/control this data against the total number of pageviews reported by our Analytics software (Clicky and/or Google Analytics).

Basically, we're selling this widget to a client and want to be able to provide solid metrics to demonstrate the efficacy of the widget in generating customer interest.

To do this, we want to be able to report clickthrough rates as a proportion of total widget views, not total page views (since our assumption is that many people viewing the pages that the widget is on may not actually see it, since it lives beneath a long column of article text near the bottom of the page).

My question is - is there any way to reliably track when an HTML element (e.g., the widget's container element, or the that it lives in) comes into the browser viewport? We would want increment the analytics stats when the widget appears within the browser viewport, but not when it is just loaded on the page and doesn't ever make it into the viewport.

The widget will have jQuery loaded, if that makes a difference. Thanks for any help!

Answer 1

I am not sure how this widget is injected into the container page. If it is not done by using iframe but say a <script src="widget-generator-url"> then your question is already answered at How to tell if a DOM element is visible in the current viewport?