How To Create Your Own Browser Detection Script

Browser Monitoring. A fancy piece of code which informs you of how many users aren’t browsing your site via Chrome.

In this day and age I would have expected there to be a very easy way to do this. Especially since standards are being rigorously followed!

But sadly creating a script to monitor the browser users surf your website on is tricky, and surprisingly time consuming.

Why is that?

Well, we’re going to look into this by attempting to create your own Browser Detection script!

Now if you’re not sure why Browser Monitoring is relevant then check out our previous post Six Reasons Browser Monitoring Matters.

Before we get started

Before we jump into creating this script there are a few things I need to mention.

First off there are many ways to skin a cat, so this probably isn’t the only way to do this. It is probably not the best approach either, but is designed to illustrate the caveats with browser monitoring scripts.

Second the example I’m showing will be in PHP, for no reason other than I have it already setup, but it can be written in your choice of language if desired.

Third you should not use the technique to enable or disable a feature on your website. You should do feature detection instead. Hint: We use Moderizer to check for particular features

With that out of the way let’s get going!

Scripting time : Create browser detection script

Each time the user requests a page they send a User Agent string to the server, which contains information like the Browser, the Browser’s Version number, the OS, and a little bit more.

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36

So we inspect the UA string, check to see the browser matches, and we can then do what we want with the information.

<?php
// Get the user agent
$agent = $_SERVER["HTTP_USER_AGENT"];

// Check to see if it contains the keyword `Chrome` followed by a version number
if (preg_match('/Chrome[\/\s](\d+\.\d+)/', $agent) ) {
  echo "You're using Chrome";
}

If you browse to the site in Chrome you will see the “Your using Chrome” message appear.

So far so good.

Currently we are only checking for a single browser and whilst it is the dominant browser, we should still check for the others. Let’s add a few more.

<?php
$agent = $_SERVER["HTTP_USER_AGENT"];

if( preg_match('/MSIE (\d+\.\d+);/', $agent) ) {
  echo "You're using Internet Explorer";
} else if (preg_match('/Safari[\/\s](\d+\.\d+)/', $agent) ) {
  echo "You're using Safari";
} else if (preg_match('/Chrome[\/\s](\d+\.\d+)/', $agent) ) {
  echo "You're using Chrome";
} else if (preg_match('/Edge\/\d+/', $agent) ) {
  echo "You're using Edge";
} else if ( preg_match('/Firefox[\/\s](\d+\.\d+)/', $agent) ) {
  echo "You're using Firefox";
} else if ( preg_match('/OPR[\/\s](\d+\.\d+)/', $agent) ) {
  echo "You're using Opera";
}

Easy right? Unfortunately it isn’t. Chrome, Opera and Edge report that they are Safari. This is because they contain the “Safari” keyword we were checking for.

Solving this is straight forward, just rearrange the conditional statements.

<?php
$agent = $_SERVER["HTTP_USER_AGENT"];

if( preg_match('/MSIE (\d+\.\d+);/', $agent) ) {
  echo "You're using Internet Explorer";
} else if (preg_match('/Chrome[\/\s](\d+\.\d+)/', $agent) ) {
  echo "You're using Chrome";
} else if (preg_match('/Edge\/\d+/', $agent) ) {
  echo "You're using Edge";
} else if ( preg_match('/Firefox[\/\s](\d+\.\d+)/', $agent) ) {
  echo "You're using Firefox";
} else if ( preg_match('/OPR[\/\s](\d+\.\d+)/', $agent) ) {
  echo "You're using Opera";
} else if (preg_match('/Safari[\/\s](\d+\.\d+)/', $agent) ) {
  echo "You're using Safari";
}

Done! That problem is fixed.

But hang on. IE 11’s user agent is different from IE < 10. We should add a fix for that.

And then fix our the bug with Opera and Edge reporting their Chrome. And if you want to support Opera versions less than 15, you’ll need to update the regular expression.

I think you get the idea now.

Conclusion

There can be quite a few issues with simply getting detecting the user’s browser.

We only added support for the 5 major browsers. I didn’t factor in mobile or less popular browsers.

Another thing to mention is that we haven’t looked into getting the version number of said browser and then we would have to maintain said codebase.

Which is why using Raygun’s Real User Monitoring tool Pulse is a great fit:

Not only does it add Browser Monitoring and save you time spent from creating your own, but you can view browser usage by geographic location or even see the browser of a singular user.

You can try it free today!

Hope that sheds some light on browser detection and some of issues you can face. What do you use Browser Detection scripts for?