How to detect the software your visitors have installed
A quick proof of concept using flash & jQuery.
Check out the demo here: http://johnmcl.github.io/software-detect-js/
Tailoring the experience of using your website to the desires and demands of a particular user, whether it be making your site more mobile-friendly or making it more relevant to their locale, can reap significant dividends.
While most sites are able to detect a user’s browser and operating system, or use their IP address to garner their approximate location, the majority of websites could do a better job at appealing directly to the user.
There are some non-obvious techniques that allow you to take it a step further. One is to detect what software a user has installed on their computer whenever they load a page.
Here’s how it works: Whenever you install any major software package, you will usually end up with a bunch of new fonts on your system. These fonts are almost always unique to, not only the software package, but also to the particular version of that software package. Extracting this “font signature” through the users browser can help you detect the kinds of software that a user has installed on their computer— and it doesn’t require any additional permissions from the user.
Having access to a user’s fonts, and as a result their installed software, means you can pre-empt what they might be looking for on your site. For instance, you can reorder the job listings on your company website to show designer/ux positions to people that have design software installed. If you offer downloads in multiple formats, you can show only the ones you know a user can open. Or, if you can detect that a user has an outdated version of Photoshop or Office, you can join the Microsoft or Adobe affiliate programs and run ads for Office 365 and Creative Cloud.
There are several ways to extract the fonts a user has installed via their browser. The easiest method involves using a tiny flash script that returns a list of fonts. I, personally, like using font-detect-js. However, with a little effort, you can also do this without flash. You can stick to just jQuery & CSS and try to render and measure the fonts in a hidden div. Lalit Patel discusses this in his JS/CSS Font Detect post.
Once you have a list of the users fonts, it’s pretty simple to map it back to their installed software. Many vendors list the fonts that come bundled with their software. Here are some examples:
- Apple iWork
- Microsoft Office 97, 2000, XP, 2003
- Microsoft Office 2007
- Microsoft Office 2008
- Microsoft Office 2010
- Microsoft Office 2013
- Adobe CS3 (2)
- Adobe CS4
- Adobe CS5 (2)
- Adobe CS6
- Adobe Photoshop Elements 8
- Adobe Creative Cloud
In some cases, you can also detect if a user has registered their Adobe product. That’s because Adobe has assigned users free fonts, such as ‘Hypatia Sans’, ‘Adobe Text’ or ‘Garamond Premier’ in exchange for registering.
Here’s a very simple demo that will check if you have a handful of softwares installed: http://johnmcl.github.io/software-detect-js/
You can also download and contribute this project on github, here: https://github.com/johnmcl/software-detect-js/
