一、為什么要使用GA監測商務通等在線客服的對話數?
主要是為了有效的區分對話的來源。本來呢,這個事情應該是在線客服服系統去做。如果想要有效的區分一個流量的來源,需要Landing page URL和referer配合才可以。目前大部分在線客服系統對這方面的支持都不是那么好,而對于GA等網站分析工具,在區分流量來源這方面做的則比較好。 因此,產生了這樣的需求,用GA來跟蹤在線客服的對話數。
二、跟蹤的基本思路
這個的跟蹤思路其實與出站點擊、文件下載的思路一致,就是在點擊對話窗口時運行_trackPageview或者_trackEvent記錄下來就 可以了。但是,有一點不同是,對話窗口一般都是通過JS動態輸出的,因此,我們需要通過在Dom樹上查找到對應的元素,并添加事件監聽,當用戶點擊對話按 鈕時,則調用_trackPageview或者_trackEvent記錄。
這里比較麻煩的是從Dom樹里找到要監聽onclick事件的對象。
三、具體的跟蹤實例
先介紹一個函數。
function startListening (obj,evnt,func) {
if (obj.addEventListener) {
obj.addEventListener(evnt,func,false);
} else if (obj.attachEvent) {
obj.attachEvent("on" + evnt,func);
}
}
這個主要是用來搞定瀏覽器兼容性。
這里有三個參數:
obj:要添加事件監聽的對象。
event:要監聽的事件,不需要寫on。
func:捕捉到事件后要運行的函數。這里要注意的是,func只需要寫函數名,而不需要(),其含義是當對應事件發生了,運行函數,而不是函數的結果。
這個函數還有許多用途,比如監測頁面內所有鏈接的點擊情況,跟蹤出站鏈接等等。
接下來首先是找到要監聽的事件對象。
首先,我用firebug查看輸出的對話窗口,找到這兩個圖片所在的位置。
table id=”LR_Tb4″ align=”center” cellspacing=”0″ cellpadding=”0″ style=”WIDTH: 400px; HEIGHT: 104px;border:0;margin:0; padding:0;”>,輸入這個table下面的兩個a標簽。
var table1=document.getElementById("LR_Tb4")
var links=table1.getElementsByTagName("a")
通過ID和tagName我們定位了這兩個a標簽。
接下來就是定義要運行的函數。
function textacc(){
alert("接受")
_gaq.push(['_trackPageview','/商務通/接受']);
}
function textre(){
alert("拒絕")
_gaq.push(['_trackPageview','/商務通/拒絕']);
}
為了測試,我添加了兩個alert。
最后,是為這兩個按鈕添加事件監聽,當按鈕發生點擊事件時,調用對應的函數。
至此,基本的監測代碼就完整了。
最后一步就是在GA中定義對應目標了。
四、一些注意事項
1、在線客服系統提供多種咨詢圖標,不同的咨詢圖標,需要監聽的對象不同,比如,我看到的商務通,有兩種圖標。
2、商務通系統的加載比較慢,為避免由于商務通加載未成功而造成的錯誤,可以將這些監測代碼作為一個函數,在window onload完成的時候去運行。
3、這種方式只能監測用戶是否點擊咨詢按鈕,但是,無法確定是否是有效咨詢。
4、如果在線客服使用的是Flash形式,這種方法無效。
五、完整的代碼示例
function trackChat(){
if (document.getElementById("LR_Tb4")){
var table1=document.getElementById("LR_Tb4")
var links=table1.getElementsByTagName("a")
startListening(links[0],"click",textacc);
startListening(links[1],"click",textre);
}
if (document.getElementById("LRfloater0")){
var _divchat=document.getElementById("LRfloater0")
var _imgchat=_divchat.getElementsByTagName("img")
startListening(_imgchat[1],"click",textacc);
}
}
startListening(window,"load",trackChat);
function startListening (obj,evnt,func) {
if (obj.addEventListener) {
obj.addEventListener(evnt,func,false);
} else if (obj.attachEvent) {
obj.attachEvent("on" + evnt,func);
}
}
function textacc(){
_gaq.push(['_trackPageview','/商務通/接受']);
}
function textre(){
_gaq.push(['_trackPageview','/商務通/拒絕']);
}