Javascript
Leave a comment

Clickclickclick.click – Revealing browser events that monitor our online behaviour

clickclickclick_08

Created by Moniker (Roel Wouters & Luna Maurer) and made in conjuction with We Are Data travelling installation, Clickclickclick.click reveals the browser events used to monitor our online behaviour.

The website invites the visitor to play along, direct behaviour to unlock “achievements”. Ranging from how many times you click on a button to how fast you move on the page and even how fast is your clicking speed, with the narrator voice who draws conclusions about your character based on your mouse behaviour, the website demonstrates the amount of behavioural data that can be/and is collected today through online services and advertising.

Clickclickclick tries to catch all user-browser interaction events. These events are transformed and combined to useable values, and hooked up to functions to trigger certain ‘achievements’. The team found that the Model-View-Intent (MVI) architecture works really well to approach this. See André Staltz’s Cycle.js documentation.

A user-action directly triggers an update somewhere else in the application, because everything is a function.The initial demo was built with Cycle.js, but because it is still in active development and they were having some integration issues and decided to switch to React. Both the front- and backend are written in Javascript (ES6), using Node.js, Socket.io, React and RxJS.

When combining a large amount of browser events, you run into a lot of asynchronous functions. Using normal variables this becomes a problem, because they tend to change over time. The RxJS framework suits this situation well. Instead of defining variables, you describe ‘streams’. These are basically variables which changes over time. Other functions can ‘subscribe’ to these streams, and run again whenever the value changes. The React framework corresponds to this functional approach, and works really well together with RxJS to provide ‘automagical’ updates.

New achievements are sent to the server through a websocket connection, along with other data like average mouse speed, amount of clicks, current screen size, etc. After recieving the user data, the Node.js server process updates the user database record with the new data. When a user returns to clickclickclick.click for a second time, the previous data is sent to the user in realtime. Static content like html is served with NGINX to save CPU resources, and a reverse proxy to the node app is used for the websocket connections. Other assets, like sound and images, reside in the cloud on AWS.

Try it for yourself at → clickclickclick.click

Project PageMonikerVPRO Medialab

clickclickclick_01