文档结构  
翻译进度:已翻译     翻译赏金:0 元 (?)    ¥ 我要打赏

浏览器监控(Browser Monitoring),一个能够通过Chrome告诉你有多少用户没有浏览你的网站的奇特的代码块。

我希望在这个时代能有一种非常简单的方式能够达到这个目的。尤其是由于各种标准都在被严格地遵循着!

但遗憾的是,创建一个脚本来监控浏览器在你的网页冲浪的用户是有点棘手的、惊人地耗费时间的。

为什么会这样?

好吧,我们正要通过尝试创建你的浏览器监测脚本来研究这个原因!

现在如果你不清楚为什么浏览器监控是有重要作用的,你可以看看我们以前的博文浏览器监控很重要的六大原因(Six ReasonsBrowser Monitoring Matters )

第 1 段(可获 1.36 积分)

在开始之前

在我们一头栽入创建脚本之前,我需要提醒你一些事情。

首先 跳过cat的方法有很多,所以这可能不是达到目的的唯一手段。这也可能不是最好的方式,但能够说明浏览器监控脚本的注意事项。

第二点 我将展示的例子是用PHP写的,除了因为我已经把它设置好之外没有别的特殊理由,如果你想,你的脚本可以用其他你想选择的语言来编写。

第三点 你不应该使用技术来启用或禁用你的网站的功能(feature)。而是应该借助技术来做功能(feature)检测。提示:我们使用 Moderizer来检查特定的功能(feature)

第 2 段(可获 1.54 积分)

没有了这些阻碍之后,我们就可以开始了!

脚本时间:创建浏览器检测脚本

每次用户请求一个页面,他们都会发送一个用户代理字符串到服务器,这个字符串包括了像浏览器、浏览器版本号、操作系统等其他一些信息。

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

所以我们检查UA字符串,检查匹配的浏览器,我们可以用这个信息来干我们想干的事情。

// 获取用户代理
$agent = $_SERVER["HTTP_USER_AGENT"];

// 检查是否包含关键字`Chrome`,后面跟一个版本号
if (preg_match('/Chrome[\/\s](\d+\.\d+)/', $agent) ) {
  echo "You're using Chrome";
}
第 3 段(可获 0.91 积分)

如果你在Chrome里面浏览网站,你会看到“You're using Chrome”信息出现。

到目前为止,一切都很顺利。

目前我们只是检查了单个同时也是占主导地位的浏览器,我们应该继续检查其他浏览器。让我们添加更多的浏览器。

$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";
}

很简单对吧?遗憾地是并不是这样的。Chrome、Opera和Edge报告自己是Safari。因为用户代理信息里面都包含了我们查找的“Safari”关键字。

这个问题可以直接解决,只要重新安排条件语句就可以了。

$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";
}

完成了!这个问题已经被修复了。

但是等等。IE 11的用户代理和IE < 10的是不一样的。我们应该再添加一个修复措施。

然后修复Opera和Edge报告自己是Chrome的这个bug。如果你想要支持版本低于15的Opera,你需要修改上面的正则表达式。

我想,你现在应该知道怎么做了。

第 4 段(可获 1.9 积分)

总结

简单地获取用户的浏览器监测信息存在一些问题。

我们只增加了五个主流浏览器的支持。我没有考虑移动端浏览或没那么流行的浏览器的因素。

另一件值得注意的事是我们没有研究获取上述浏览器的版本号,而且我们必须维护上述代码。

这也是为什么使用Raygun的Real User Monitoring tool Pulse可以很好地配合我们的监控:

Image title

它不只在节省你创建自己的脚本的时间的情况下增加了浏览器监控,而且让你可以通过地理位置查看浏览器使用,或者甚至看到少数用户使用的浏览器的信息。你可以试试免费试用它

希望上文能够为你阐明了浏览器检测和一些你可能会面对的问题。你想用浏览器监测脚本干什么呢?

第 5 段(可获 1.74 积分)

文章评论