Data Foundry Data Foundry Documentation

Use-case: Web tracking

Log all actions on a website to Data Foundry, including scroll behavior, mouse movement and browser characteristics.

CONTEXT

For digital design, there are numerous methods to do UX research on the interaction flow of the UI (e.g. website, app or dashboard). One of them could be customer journey logging. You can program your UI in such a way it tracks the actions from a visitor from that specific website (e.g. scroll behaviour, mouse movement, browser characteristics), in order to find out what an optimal user flow might in order to achieve satisfaction of the user, or in the context of webshops, can be used as a marketing tool.

Only collecting this data might not be enough to find valuable patterns or discover new relations in the data. Therefore, using the Data Tool in DF makes is easy to visualize your data streams and apply sampling where needed. Next to that, data mining and AI can be applied when you want to apply supervised and unsupervised learning techniques to your data, in order to find correlations.

EXAMPLE

Customer Journey Logging is a method often used to analyze the customer flow of webshops. By being able to collect data on what type of pages with specific projects are spending their time on and for how long, companies can use customer journey logging to get a profile of what kind of products a specific person likes, and how they can use that data to recommend you other products that are in line with your taste.

WHAT YOU NEED

A project created in Data Foundry and inside the project an new IoT dataset with openParticipation switched on (edit project, see bottom of form). The IoT dataset needs to be configured to get input data from an OOCSI stream (dataset page, see second configuration tab). The channel that you have configured in the OOCSI stream of the dataset, needs to be inserted also in the code below.

HOW TO USE THIS

Collect web page visitor data

Use the OOCSI network to add data items for the IoT dataset. This is option is available from a wide variety of platforms and technologies. A list with possible options is provided under the tab OOCSI API.

Connect to the OOCSI API by setting up channel name: go to the second tab in the configuration screen To create a channel, you need to provide the channel name. Enter a unique channel name and click on save. Remember the channel name because you will need it later in the JavaScript below. Copy paste the example code show below into the HTML code of the pages that you want to track. This is a relatively simple example and you can add more things to it:

add to HTML header

<script type="text/javascript" src="https://oocsi.id.tue.nl/assets/js/oocsi-web.min.js"></script>

add to HTML body

<script type="text/javascript">

	// connect to the OOCSI network
	OOCSI.connect("wss://oocsi.id.tue.nl/ws");

	// store identifier of this browser
	var myname = '';
	if(navigator) {
		myname = navigator.appName + "_" + navigator.platform + '_' + navigator.language;
	}

	// upon click or another event you want to send
	document.addEventListener('click', function (event) {
		// send the X and Y values of the mouse point relative to page
		// change "CHANNEL NAME" to the channel you want to receive this data from
		OOCSI.send("CHANNEL NAME", 
			{
				device_id: myname, 
				x: event.pageX, 
				y: event.pageY
			}
		);
	});
</script>

In the part that starts with OOCSI.send("CHANNEL NAME",, you first need to change the CHANNEL NAME to the one provided in the Data Foundry configuration of the IoT dataset. Then you can determine what type of web tracking data you want to log into the IoT dataset. Right now it only focuses on mouse position when the visitor clicks somewhere on the page. This can be further extended, for instance, with browser characteristics, time that a visitor spends on a single page, user interaction flow, etc. You can change these things in this line to make it send the right type of data to Data Foundry.

Export data

There are two ways to export your data. If you want a simple export without any preprocessing, visualization or annotation, you can use the download button in the dataset screen. If you want a more advanced export, you can use the Data Tool to export your data.

For more info on exporting with the Data Tool, click here for a basic explanation.

A useful next step for this application is using data mining and machine learning techniques in order to make actual sense of the data. There are various tools and platforms for doing this, that can connect to Data Foundry to retrieve the data locally. One example is already given in the platform: if you go to a dataset page and open the CSV token link tab under configuration, you will find a code example in Python to download and visualise the dataset contents. You can use similar code to work with the dataset in Python for machine-learning purposes. This will only work if you generate a token link first.