This is a small collection of tests on how to capture clicks on a page. Capturing clicks are normaly done to get info about where users click on a webpage and sending this information to "somewhere" which harvest them for later analyses.
One way to add click tracking to a page is to have a JavaScript run trough all links on a page and assign JavaScript functions to them which will do the click tracking. This tests will try to address that this not such a good idea.
If using a JavaScript to add click tracking to a page by running trough the page, the JavaScript running trough the page must be triggerd by "something" and normaly this is done by assigning the JavaScript to the document "onload". There is a slightly problem with "onload"; it does not execute the assignes function until the page are fully loaded.
This test displays that functions assigned to onload can be executed pretty late. If a function running trought the page are run on onload to assign click tracking functions to the links, the user might already have been able to click a link before the click tracking are assigned to the link.
Run onload test
When adding click tracking to a link its normaly doen by assigning an eventhandler to the link. In some cases the onmousedown event are used... Onmousedown only indicates that the user pushes the mousebutton down and not releasing it again. If a browser shall take an user to a destination based on a click on a link the mouse button must be pressed down on a link and then released again.
If using only onmousedown a "click" will be registered in the click tracking system if the user pressed the mouse button down on a link, then removes the mouse away from the link while still holding the mouse button down and then releasing it. Which is an action not causing the browser to go to the URL in the ahref of the link.
Run onmousedown test
Onclick is the only single event suitable for capturing a full click. This test display that the problem related to using the onmousedown event are not an problem when using the onclick event.
This test does also display that the browser will execute the function assigned to the onclick event befor it does forward to the URL in the href.
Run onclick test
Clicks are normaly put into "categorys" for later analyses. These categories are usualy defined as areas on a page which the links are found inside. In dynamic templates it's not always sertain which area an link will be inside. It's normal to separate structure and component and an component can in an dynamic system be placed anywhere in the structure.
This test solution is based on using an generic CSS class name as indication of an "area" in a page and then using an hidden html tag inside the area to hold the name of the category:
<div class="area">
<div class="category">category name</div>
<!-- Start component -->
<div>Some content</div>
<div><a href="" onclick="getClick(this);">Click</a></div>
</div>
The click tracking function (getClick(this);) will in this case be generic and can live anywhere on the page. The click tracking function will do an reverse traversion of the DOM until it finds the "area" and then locate the "category" container and extract the category which can be sendt to "somewhere" for harvesting.
Run solution test