干货：如何在前端统计用户访问来源？

用户来源是网站数据分析中一个重要的指标，然而想要准确的统计来源却并没有唯一的方法。下面我们针对获取来源的方式、来源的定义做一些具体的阐述；并且以 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。

比如用户在 baidu 中搜 'sensorsdata'，然后跳转到了 'www.sensorsdata.cn'。那我们通过document.referrer能取到来源是'http://www.baidu.com/link?url=2fhHMI-7QopsGnGaJppRU8suX290yzANr3PNY8fupUy&wd=&eqid=bbd4f5c00001ec4a0000000356a83851'。

由于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_referrer和initial_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:自定义来源});
}