Do you ever get curious as to how users interact with your website or mobile app? I get quite fascinated to understand and analyse user behaviour on web properties. Drilling down to discover user behaviour on your website has a lot to do with some JavaScript event handlers. This blog will not look into JavaScript code implementation for these event handlers but will basically look at the theoretical significance.
Let’s paint a scenario: you’ve just built a brand new ecommerce site selling skating boards and you’d like to see how you can improve the site performance. The performance in this instance will comprise of metrics such as traffic, average time on site, pages per session and ultimately transactional indicators such as average order value, the number of transactions, quantity and overall revenue. Achieving some or all of these metrics is of utmost importance to most marketers and business owners. How do you evaluate what colours or section of your web page attracts the most attention from customers? How do you get granular to understand the customer behaviour on your website? Here come heat maps which are powered with these JavaScript event handlers.
Heat maps:
Heat maps are software applications that enable site owners and marketers to track clicks, scrolls, mouse motion, attention and scrolls on a website or mobile app. These applications help to eliminate guesswork from the website redesign and optimisation process. Some of the top heat maps out there include Hotjar, Crazy Egg, Mouseflow and Zarget. We’ll now have a quick look at a few JavaScript event handlers that make a granular analysis of web user behaviour possible.
Context of JavaScript event handlers:
Before writing about the different types of event handlers, it is imperative that a bit of context is provided to how browsers generally register or capture web user behaviour.
Events and DOM nodes:
Without sounding too technical, DOM (Document Object Model) is a concept that explains how browsers retrieve and display the contents of a website. This concept helps browsers understand the different parts of a website’s page e.g. title, header and paragraphs. Event handlers can be set to track user behaviour in the different section of the web page. A good example would be trying to ascertain if a user clicks on a link in the first or second paragraph of your web page.
Event objects:
In the previous section, I briefly touched on the point that a web page is divided into different sections and you can analyse what section of a web page attracts the highest user engagement. A common question could be: are users clicking on a link or a button in the second paragraph of a page as against the first? This will help you optimise your page to enhance the engagement and overall experience of your users. On the other hand, event objects provide additional information about the actual user action. It is not just about clicking on a link or a button; it drills down to detect which mouse button (left, middle or right mouse button) was pressed.
Let’s now look at the different types of event handlers.
Types of JavaScript event handlers
Key events: There are a variety of keys on a keyboard and understanding how users interact and run an internal search on your website will help you enhance the user experience. The browser triggers ‘Keydown’ when a key on a keyboard is pressed down and ‘Keyup’ is activated when the key is released. ‘Keypress’ is a third key event that takes place immediately after a key has been released and only applies to keys that produce character input. In essence, ‘Keypress’ is triggered when a user types characters such as alphabets, numbers and special characters as opposed to keys such as backspace, space, tab, up or down.
Mouse clicks: Similar to keys, a mouse button also leads to a triggering of an event in the browser. When you click your mouse, two common events will take place and they are ‘Mousedown’ and ‘Mouseup.’ They are both similar to the ‘keydown’ and ‘keyup’ events and help you understand what links or buttons are of the most interest to users via the mouse click behaviour.
I used the Mouseflow heat map software to analyse user click behaviour on one of my blogs on PPC. I discovered a user or visitor clicked on the link that leads to Google’s announcement of the removal of ads from the side panel.
Mouse motion: Whenever you move your mouse on a web page a ‘mouse-move’ event is fired. A common example takes place when you hover over a link or button without actually clicking. The image on the previous point highlighted a user clicking a link leading to Google’s announcement on the removal of ads from the side panel. We had a click to a link and two hovers or a mouse move. This led to a hover-click rate of 50%. That is, out of two people who looked interested in finding out more about the article, one clicked and the other continued reading my blog. This is a very important way to ascertain how compelling a website’s calls-to-action buttons are, as more mouse moves (hover) and fewer mouse clicks indicate a need to change the colour, font size or text of a call-to-action button or link.
Scroll: The scroll event is fired or triggered whenever a user scrolls your web page. This is quite important to understand if a section of your web page is of little or more interest to site visitors. If most users do not scroll to the bottom or lower section of your site, you might consider having your most important contents at the top half of the given page. My PPC blog below reveals the user scroll analysis. The blue line is the fold (the upper section of a page on a mobile device without scrolling). It indicates a certain number of users scrolled below the fold but not till the end of the page. This is quite useful in site and content optimisation.
Focus event: This is the last event and is triggered when an element or a section of a web page gains more user focus. It is sometimes viewed as an attention element. This helps you to determine if what you considered the most important section of your site is gaining the most attention or focus from users.
Are you ready to get rid of the guesswork from your website and conversion rate optimisation efforts? Then the abovementioned JavaScript event handlers applied by popular CRO and heat map tools will ensure you are effectively engaging users at every point of the customer journey.
DOM Image credit: Marijn Haverbeke
