Detect Device & Browser of Visitors to Your Website

When operating a website like the one you are visiting (www.danyelkoca.com) it is crucial to get insights about people visiting your site.

One important insight about your users is the device and browser they are using while they are visiting your site.

Why? This information can help you improve your site by examplary actions below:

1. Gain insights about most commonly used device&browser and optimize your site accordingly
2. Deprioritize actions that only benefit a minority device & browser (E.g., Tablet device, Opera browser)
3. Identify patterns specific to certain devices & browsers (E.g. certain function not being used on Safari)

Now let's deep-dive into the code!

1. Device Detection

In order to identify the device, we use the window.navigator.userAgent function in JavaScript. This function returns a string as below:

console.log(window.navigator.userAgent);
// >> Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

The result is what I see on my computer, which is a MacBook Pro used with Chrome Browser.

Let's analyze the output:

We see that this function not only outputs the device

but also returns a bunch of other information like

For now, we focus on the part of the output that signifies the device

It gets it right that Im accessing this website through a MacBook, however there is no information about the model of this MacBook (E.g. Air, Pro)

Moreover it gets multiple things wrong. My MacBook is not Intel chip (it is M1) and it is not using OSX 10.15.7.

So, when using this function to determine the device, only infer the device, as model of the device and OS running on the device can be misleading.

Using the userAgent string, we can write a regex in order to classify the user's device as mobile or desktop, based on this StackOverflow answer.

let userAgentString = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36';
	
function deviceDetection(userAgentString) {
	let device = 'Desktop';

	if (
		/(android|bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(
			userAgentString
		)
	) {
		device = 'Mobile';
	}

	return device;
}

console.log(browserDetection(userAgentString));
// >> Desktop

2. Browser Detection

Now let's focus on the part of the output that signifies the browser

Browser detection thorugh userAgent is notoriously convoluted as this output itself includes 3 browsers:

1. Mozilla/5.0 (Firefox?)
2. Chrome/120.0.0.0
3. Safari/537.36

According to MDN Web Docs below table can be used to infer about the browser using UserAgent string:

So let's write a regex to definethe browser based on the conditions provided by MDN.

let userAgentString = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36';

function browserDetection(userAgentString) {
	let browser = 'unknown';

	if (/Firefox/.*/.test(userAgentString) && !/Seamonkey/.*/.test(userAgentString))
		browser = 'Firefox';
	else if (/Seamonkey/.*/.test(userAgentString)) browser = 'Seamonkey';
	else if (
		/Chrome/.*/.test(userAgentString) &&
		!/Chromium/.*/.test(userAgentString) &&
		!/Edg.*/.*/.test(userAgentString)
	)
		browser = 'Chrome';
	else if (/Chromium/.*/.test(userAgentString)) browser = 'Chromium';
	else if (
		/Safari/.*/.test(userAgentString) &&
		!/Chromium/.*/.test(userAgentString) &&
		!/Edg.*/.*/.test(userAgentString)
	)
		browser = 'Safari';
	else if (/OPR/.*/.test(userAgentString)) browser = 'Opera 15+ (Blink-based engine)';
	else if (/Opera/.*/.test(userAgentString)) browser = 'Opera 15+ (Presto-based engine)';

	return browser;
}

console.log(browserDetection(userAgentString));
// >> Chrome

We have succesfully classified my browser, which was indeed Chrome. However, the attentive eyes will realize that my userAgent string also satisfied Safari's conditions. Since Chrome condition is tested before Safari; the browser is classified as Chrome, but further testing is needed whether testing for Chrome before Safari always yields the expected results.

3. Conclusion

By using above 2 functions - deviceDetection, browserDetection - you can now succesfully classify the device and the broser of your users. Note that window.navigator.userAgent is compatible with all modern browsers, so you can safely use it. Any questions, feel free to let me in below comment section.

Happy hacking!