之前我曾有一篇Blog谈到了使用GA监测商务通等在线客服的对话，现在回过头去想其实当时的思路把问题搞得复杂了。
当时的思路是找到对应的DOM仅检测需要的DOM元素的click事件。那也就意味着对于不同的在线客服系统都需要修改code，而实际上只要用一个通用的JS监测a标签以及img的click事件就可以完成监测的目的，这样我们需要做的就是在GA中指定对应的地址。下面我将介绍三种方法来实现对在线客服的监测：利用Skyglue提供的自动监测服务；利用Google提供的Autotrack.js；利用Justin的自动跟踪脚本。（已有方法只对Flash之外的图标有效，对flash的咨询图标无效。）
一、利用SkyGlue提供的自动监测服务
关于SkyGlue介绍，请参见自动标记所需要的互动-傻瓜级GA自动标记服务SKYGLUE。
SkyGlue的安装比较简单，你所需要做的只是将SkyGlue的代码放在GA代码的后面即可。
接下来你有两个选择，一个选择是直接使用默认设置。这时对于在线客服相当于一个出站链接，SkyGlue会将其记录为Click::(outbound)::A::对应URL。另外一个选择是在线客服指定一个自定义名称，比如我指定了Click::在线客服这个名称。
下面你所要做的就是在GA中创建一个目标，将这个事件定义为目标。请注意SkyGlue目前是将每个Click都记录为事件，因此你要使用事件目标，SkyGlue只会使用Event Category一个参数。因此在GA的目标设置中只要设置为Event category等于对应名称即可。这样你就完成了利用SkyGlue跟踪在线客户的按钮点击。
二、利用Google提供的Autotrack.js
这个JS最初是肖庆同学发现的。这个JS也提供了对DOM元素的Click事件的监测，但是与SkyGlue相比灵活性较差，也没有灵活的自定义功能。
这个脚本的部署方式也很简单，代码样例如下：
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
<script>
new gweb.analytics.AutoTrack({
profile: 'UA-18159656-3',
heatMapper: true});
</script>
你要做的是将profile替换为你的网络资源ID，这个脚本自身已经包含对GATC的调用，因此，不需要再调用GATC。hearMapper这个参数是一个可选参数，true表示开启热图。细分的同学可能发现，我们对GA的一些自定义没法地方设置了，比如_addOrganic，_setDomaiName这些方法，其实这些方法依然是可以添加，只是这个修改要在autotrack.js中进行，修改之后，你应把这个脚本放在自己的服务器上，并调用修改过的脚本。
部署好这个脚本后，它会自动跟踪页面上的点击数据，只支持A标签的点击事件并将其分为link click和Outbound Click两类，相比之下，SkyGlue的监测要更加全面。
autotrack.js使用Event category来对事件进行分类，主要有三类事件，heatmap，link click（站内的点击）和Outbound Click（出站的点击）。在线客户的click事件应该在outbound click中；用Event Action来标记对应的链接，heatmap的Action则统一为click；用Event Label来标记事件发生的页面，heatmap则是对应的坐标。
了解了这些以后，你需要做的是点击一下对应的在线咨询按钮，看一下对应的URL并在GA中对其设置事件目标。
三、利用Justin提供的自动跟踪脚本
Justin提供过下面这段脚本，这段脚本自动实现了对出站链接跟踪，我略微修改了一下也跟踪了站内的Link，同时增加了对img Click事件的跟踪。
<script>
//
// By default, this script will track links to the follwoing file
// types: .doc, .xls, .exe, .zip and .pdf
//
var fileTypes = (".doc",".xls",".exe",".zip",".pdf");
// This is a debug mode flag. Change to '' for production. In debug mode
// the script will display an alert box and skip sending data to Google
// Analytics.
//
var debug = '';
//
// This variable controls how outbond links will appear
// the GA reports. By default, external links will appear as
// '/outbound/' where URL is the URL in the anchor tag.
//
//var extIdentifier = '/outbound'+_udl.pathname+'/'+_udl.search+'/';
/// No need to change anything below this line ///
if (document.getElementsByTagName) {
// Initialize external link handlers
var hrefs = document.getElementsByTagName('a');
for (var l = 0; l < hrefs.length; l++) {
//protocol, host, hostname, port, pathname, search, hash
if (hrefs[l].hostname == location.host) {
var path = hrefs[l].pathname;
if (path.indexOf(fileTypes) != -1) {
startListening(hrefs[l],"click",trackDocuments);
}else {
startListening(hrefs[l],"click",trackLinks);
}
} else {
startListening(hrefs[l],"click",trackExternalLinks);
}
}
}
function startListening (obj,evnt,func) {
if (obj.addEventListener) {
obj.addEventListener(evnt,func,false);
} else if (obj.attachEvent) {
obj.attachEvent("on" + evnt,func);
}
}
function trackDocuments (evnt) {
var url = (evnt.srcElement) ? "/" + evnt.srcElement.pathname : this.pathname;
if (!debug) {
_gaq.push(['t._trackEvent','document',url,,,,]);
} else {
alert(url);
return false;
}
}
function trackExternalLinks (evnt) {
var lnk;
if (evnt.srcElement) {
var elmnt = evnt.srcElement;
while (elmnt.tagName != "A") {
var newelmnt = elmnt.parentNode;
elmnt = newelmnt;
}
lnk = "/outlinks/" +elmnt.hostname + "/" + elmnt.pathname + elmnt.search;
} else {
lnk = "/outlinks/" + this.hostname + this.pathname + this.search;
}
if (!debug) {
_gaq.push(['_trackEvent','outlinks',lnk,,,,]);
} else {
alert(lnk);
return false;
}
}
function trackLinks (evnt) {
var url = (evnt.srcElement) ? evnt.srcElement.pathname : this.pathname;
_gaq.push(['_trackEvent','links',url,,,,]);
}
function trackImgs (evnt) {
var url = (evnt.srcElement) ? evnt.srcElement.src : this.src;
_gaq.push(['_trackEvent','img',url,,,,]);
}
var imgs = document.getElementsByTagName('img');
for (var l = 0; l < imgs.length; l++) {
startListening(imgs[l],"click",trackImgs);
}
</script>
使用这段脚本的一个好处是不需要修改你原来的GATC，如果你进行了一些自定义，那么需要去autotrack中修改。同时这个脚本也支持对跟踪器名称的定义，如果你为你的GA跟踪器指定了不同的名称，那么你只需要对trackLinks，trackImgs和trackExternalLinks进行对应的修改即可。这个脚本使用Event Category来标示Click的类型，共三种imgs，links以及Outlinks，Event Action则是对应的URL。
与前面两个方式类似，你需要实际点击一下在线客服，记录下实际URL并将其在GA中设置为事件目标。
目前我的网站同时使用了三种跟踪方式，感兴趣的同学可以测试一下，每点击一个link会产生4个utm.gif的请求。
好了，关于在线客服的监测就介绍到这里，如果关于这方面您有任何的疑问，欢迎给我留言。
PS：百度统计也提供了类似的解决方案：
