1. 程式人生 > >乾貨:如何在前端統計使用者訪問來源?

乾貨:如何在前端統計使用者訪問來源?

使用者來源是網站資料分析中一個重要的指標,然而想要準確的統計來源卻並沒有唯一的方法。下面我們針對獲取來源的方式、來源的定義做一些具體的闡述;並且以 sensorsdata.cn 這個網站為例來做具體的來源分析。

1.前端獲取來源的兩種方式

1.1 通過給頁面加自定義引數來標誌

第一種方案,是通過給頁面加自定義引數來標註使用者的來源,我們暫且把這個來源叫做from

例如,我們將這個地址www.sensorsdata.cn?from=weibo通過營銷人員在微博中轉發,然後我們網站通過解析引數from就能取到來源weibo。 
對於這裡的 from 這個自定義的引數,谷歌有個標準。一般來說可以用utm_source=weibo

這樣來標記來源。其他的還有utm_medium utm_campaign utm_content utm_term等等,可以自行搜尋下。

1.2 通過referrer實現

第二種方案,是通過使用者訪問的referer來定義使用者的來源,我們暫且把這個來源叫做referrer

由於referer的 URL 可能取值太多,那麼更進一步,可以專門取一下 referer 的 host,用這個來做來源的標誌。

1.3 兩種來源的綜合

如上面所描述的那樣,我們會有兩種來源方式,一個是我們做標記的來源 from,一個是固有的 referrer。我們既可以把這兩個來源都統計,也可以先取自定義標籤 from 再取 referrer(示例如下)。

if(自定義from){  
  來源 = 自定義from
}else{
  來源 = document.referrer
//因為referrer取的過長,可以只取host如`baidu.com`
  來源 = 只擷取referrer的host
}

sa.track('user_from',{from:來源,detail:document.referrer})  

2. 來源的3種定義

2.1. 使用者首次開啟頁面的時候的首次來源

在這裡,我們把使用者首次開啟頁面的時候的首次來源叫initial_referrer。 這裡的 referrer 可以作為使用者的固有屬性,類似於姓名,也即是 Sensors Analytics 中的 profile 屬性。

在 JS-SDK 中可以這麼實現:

//在引入js-sdk後加入以下程式碼
sa.setOnceProfile({initial_referrer:document.referrer})  

這個來源只會 set 一次,也就是一個瀏覽器端,只會有一個來源。

2.2 一個訪問週期內的訪問來源

一個訪問週期,也即使用者開啟瀏覽器到關閉瀏覽器這個週期內的第一次來源,我們把他叫做session_referrer

正常情況下,我們可以設定一個不加時間的 cookie 來標誌這個網站的session週期。然而我在測試了一些瀏覽器後,發現並不理想。mac下safari和firefox,直接按關閉按鈕關閉瀏覽器,cookie還是存在的,但是點瀏覽器退出後,cookie是會清除掉的。而在mac下的chrome瀏覽器,設定cookie後,關閉瀏覽器,重新開啟還是會存在。所以通過這個方式並不靠譜。 
不過我們可以通過設定一個限時的cookie來實現,比如60分鐘的session週期。這樣所有瀏覽器都能實現。也就是使用者開啟頁面,然後60分鐘內的操作,這裡的來源都認為是一個來源。60分鐘後再開啟頁面,就認為是新的來源。

//頁面開啟後
if(cookie中取到startFrom){  
  來源 = cookie中的來源
}else{
  來源 =  當前來源
  setCookie('startFrom', 當前來源, 60分鐘)
}

2.3 每個頁面的訪問來源

這個就是通常意義上的referrer 了,在每個頁面訪問時,都取referrer。

3. sensorsdata.cn的來源分析

sensorsdata會獲取initial_referrerinitial_from

sa.setProfileOnce({  
  initialReferrerUrl: document.referrer,
  initFromUrl: '根據url解析出來的來源'
})

sensorsdata會在每次頁面開啟的時候,取from和referrer

sa.track('page_open',{from:'解析url來源',referrer:document.referrer,referrerHost:''})  

當然這裡會有重複,如果是自己網站內的跳轉,如果需要過濾的話,可以自行做判斷過濾。

4. 其它

客戶 A 只想取某個頁面的自定義來源做為需求的來源

if(這個頁面有自定義來源){  
  sa.setProfileOnce({fromUrl:自定義來源});
}