Opixel is a tracking traffic solution for website managers. it allows them to view the tracked data of their visitors on their website. Currently the location, browser, operating system, sessions, hits, clicks and scrolls can be tracked. below are a list of the best features available in Opixel. This was my final year Computing Project for a BSc (Hons) Computer Science Degree

Tracking Locations

Using the IP-API service to fetch the latitude and longitude of the current location of the requested IP address. Accuracy is limited because the IP address refers to the network location and some are registered to the origin of the network providers, so some non static IP addresses around the north east point to London. 

The results are fetched whenever a unique visitor hits the tracked website. the data is then sent to the Opixel server to be processed into the database, this then allows the client to view the results using Google Maps API, the map to the right shows custom markers with the hit counts of each city.

Tracking Sessions

Tracking sessions and displaying the resutlts in a timeline. the results are divided into seperate points in the graph by taking the total date range and dividing that by the amount of points. in this case 20. the results are then fetched from the database using the date ranges of each point.

The actual render of the chart is rendered by morris.js, a javascript library for drawing graphs as vector based images. The library gives you a great amount of options like the colour of the line to the size of each point. it also allows you to override the hover popup and provide whatever information you want in it. Unfortunately vector based images do not handle responsive design well and so it will redraw the chart whenever the browser window changes size, but this is still "responsive".

Click Tracking

The clicks are tracked by building an array of clicks in the background of the website. once the page unloads, closes or refreshes then the list of clicks is sent to the server side to be saved into the database. The coordinates of the click are stored. the X axis is stored as a percentage to handle different screen sizes. the Y axis is absolute pixels because websites usually use fixed height sizes for elements.

The clicks are displayed over the top of the website on the web front end. the website is loaded into an iframe in the background and the clicks are displayed using a heatmap library which uses the HTML5 canvas element.

Scroll Tracking

Whenever a visitor scrolls on a track website there highest scroll point is stored and sent to the server side when the page they are on unloads. The results are then joined together and calculated for a percentage of visitors and how many reached what points of the webpage.

Again the website is loaded into the background using an iframe element and a custom library is used to display the coloured sections over the top. these are simply html div elements with a background colour. The colour ranges from red to yellow, red being 100% visitors and yellow being 0%. as you hover over the elements you get this hover container which follows the mouse position. it displays the current percentage for the current element.