Google Analytics is a free tool that provides statistics for your blog or website. This article contains tools/snippets for extending Google Analytics events functionality. By default google analytics is pretty good on its own. But sometimes you need a nuanced approach to understand what visitors are doing on your website. The plugins listed below help you get more by extending google analytics.

Extending GA Events Tracking

Events are user interactions with content that can be tracked independently from a web page. GA tracks most of the events on the web page.

The best and easiest way is to use the  ga()  function itself on the events you want to track.

This is how the ga() function look like.

If you want to read this in detail please read the google official document on events.

If you have a large site you can create a custom function as per your needs which send events data to google, Like I did in one of my projects.


Other than this you can use this jQuery extended events plugin by JimBobSquarePants (Yes he calls himself like this).
This plugin that helps you easily set up Event Tracking With Google Analytics. When added to a page it will automatically add event tracking to any item containing the appropriate HTML5 data-attributes like I did in above code snippet.

Some more Features –

  • Reading event tracking variables from HTML data attributes as default.
  • Reading pageview tracking variables from HTML5 data-attributes as default.
  • Validates values for type before pushing.
  • Support for dynamically created DOM objects and attributes created using$.data().
  • Support delay for links to ensure that the logging to Google Analytics occurs before the redirect.
  • A data API for overriding the default behaviour.

So this is how you can use events to track what user is actually doing on your website. but it is not the end here we are presenting some more cool features you can add to track more insights about user behaviour.

You can easily track the estimated session duration of the user with Google analytics.

Session Time in Google Analytics
You can see Avg. Session time on overview screen in GA.

But we can do a lot more than this.

 Section on-screen time with ScreenTime

This library tracks user timing on particular fields of your website i.e. First Fold, Team Section, Contact Page etc. It is most useful for App landing pages and product site. They basically need more user behavioural data for more conversion and this library cost you 7kb(un-minified) bandwidth only.

capture active screen time with google analytics events
You can see in the top bar how much time I spent on their website’s each section. It is quite good. Right!

You can define areas of the page, called Fields and then Screentime will keep track of how much time each Field is on-screen for. You can also use it to track smaller elements, like ad units.

Is that enough!! How about few more?!!

Till this point, we discussed how to use custom events and user active time on different sections of the screen. But these features are more useful to App/product websites which focus on conversion with CTA’s and with a relatively less number of pages.

What about news websites and blogs like us, who have a large number of pages with similar sections i.e post/news listing. What they actually need is the total time user spent on their website and how far user reads their article. And the following two plugins can do this effectively.

Active time on site with Riveted

This plugin shows combined time a user is on your website while the above plugin does it separately for sections.

Riveted captures on screen time and sends to google analytics events
Riveted captures on-screen time and sends to google analytics

Google Analytics does a lot of things really well but the way it measures visit duration—by calculating the time difference between pageviews—provides only a partial view of how much time is actually spent on the site.

Riveted helps fix this by measuring the amount of time users are actively engaged (e.g., clicking, scrolling, using the keyboard) and then reporting the data to Google Analytics at frequent intervals. And after this, you can

Measure page scrolls with Scroll Depth

Blogs and news website have lots of content sometimes more than 3000 words or even more, so they really need to know how much a user is engaging with their write-up. Bloggers can track breaking point of a user if they know where the user is actually leaving their page.

Measure user scrolls on pages and log it to google analytics events
Measure how much user scrolls on your pages and log it to GA events

It monitors the 25%, 50%, 75%, and 100% scroll points, sending a Google Analytics Event for each one. You can also track when specific elements on the page are scrolled into view like Screentime.

These all three plugins are written by very talented developer Rob Flaherty.

Conclusion : Google analytics is the most used analytical tool in the world. It has wonderful features to measure everything about user behaviour but these plugins we discussed in this post can improve your reporting. Now you can track custom events, Active screen time for the whole page or specific section in it also along with the scroll depth you can do wonders for website UX.

Hope you liked the plugins we discussed above, share, comment (if any) and tell your fellow developers about it. Let’s make a better web.