Viewport Time

What

A simple script that counts the viewport time of sections of your page.

If an array containing ids is not provided, it checks for all elements that have an id tag associated with them and counts number of seconds the element is in the viewport (while the tab is active) Updates count continuously each second and takes into account viewport change events such as zooming and minimizing the window.

Super small and no dependencies. Works on browsers that aren't regularly used in memes.

Why

Online content such as news, medium articles, shocking top 10 clickbait buzzfeed articles, all seek to attract large shares of online attention by keeping their users engaged. A common challenge is to identify which parts / which type of content was preferred by users.

Apart from analytics, this could also be used in fields like information retrieval. Eg. When using a text-based model like the tf-idf, giving higher weight to words belonging to hotter sections of the page. Where hotter means having a higher degree of viewport time :P

How

Include the script in your page. Optionally provide it an array of ids.

In order to persist data, provide a backend for it to retrieve/post the object containing the viewport time details of the elements. You could either use new objects for each visit to your page (and save with timestamps), or simply use a single cumulative object per page. You could post the object every x seconds.