JS 开源流量统计代码 sourcebuster.js 使用教程

原创 tiangr  2016-10-18 11:04  阅读 195 次

Sourcebuster JS【Github】 是一款开源的流量统计软件。

  1. Sourcebuster 追踪你站点访问者的来源并且将数据存在Cookie中以做进一步的分析。
  2. 它采用和Google Analytics相同的方式处理访问来源覆盖。
  3. 纯JavaScript,不依赖任何的第三方类库。

安装

你可以将安装代码放在<head>标签中,这样你就可以尽可能快的获取到cookie值,以便于数据可以用于DOM的对象操作(比如手机适配等.)Sourcebuster也可用于 CommonJS/AMD模块,因此你可以使用require方式依赖加载。

  1. <script src="/path/to/sourcebuster.min.js"></script>

或者使用 require

  1. var sbjs = require('sourcebuster');

这段JS会导出对象sbjs,包含两个方法initget,第一个方法用来设置参数setter,第二个方法用来获取返回值getter

  1. <script src="/path/to/sourcebuster.min.js"></script>
  2. <script>
  3.   sbjs.init();
  4. </script>

这段代码将所有获取到的数据存于cookie中以便于获取。

配置

sbjs.init 接收对象参数,例如:

  1. sbjs.init({
  2.   domain: 'alexfedoseev.com',
  3.   lifetime: 3,
  4.   callback: doSmth
  5. });

共有11个参数

  • lifetime
  • session_length
  • domain
  • referrals
  • organics
  • typein_attributes
  • timezone_offset
  • campaign_param
  • user_ip
  • promocode
  • callback
  1. sbjs.init({
  2.   // Set custom expiration period for cookies in months
  3.   // 6 months is default
  4.   lifetime: 6,
  5.   // Set custom session length in minutes
  6.   // 30 minutes is default
  7.   session_length: 30,
  8.   // Set domain name in cookies
  9.   domain: {
  10.     host: 'alexfedoseev.com',
  11.     isolate: false
  12.   },
  13.   // Set custom referral sources
  14.   referrals: [
  15.     {
  16.       host: 't.co',          // This is host from Twitter's `http referer`
  17.       medium: 'social',      // This is custom `utm_medium`, you can drop it and it'll be `referral`
  18.       display: 'twitter.com' // And this is how you'll see it in the result data
  19.     },
  20.     {
  21.       host: 'plus.url.google.com',
  22.       display: 'plus.google.com'
  23.     }
  24.   ],
  25.   // Set custom organic sources
  26.   organics: [
  27.     {
  28.       host: 'bing.com',
  29.       param: 'q',
  30.       display: 'bing'
  31.     }
  32.   ],
  33.   // Set `utm_source` & `utm_medium` values for `typein` traffic
  34.   // Defaults are `(direct)` & `(none)`
  35.   typein_attributes: {
  36.     source: '(direct)',
  37.     medium: '(none)'
  38.   },
  39.   // Set time zone
  40.   timezone_offset: 3,
  41.   // Set custom `utm_campaign` param
  42.   campaign_param: 'my_adwords_campaign',
  43.   // Set user ip
  44.   user_ip: '192.168.1.1',
  45.   // Set promocode
  46.   // Default range is [100000..999999]
  47.   promocode: {
  48.     min: 100000,
  49.     max: 999999
  50.   },
  51.   // Set callback-function,
  52.   // It will be executed right after `sbjs` cookies will be set
  53.   callback: doSmth
  54. });

lifetime

自定义Cookie sbjs 的过期时间。默认值为 6,单位为月。

session_length

设置用户的持续会话时间。默认为30,单位为分钟。

此参数仅会影响访问来源是否覆盖。当访问者第一次访问你的站点,我们接收并存储来源的数据。过了一段时间后,这个访问者回到你的站点,但是来自于不同的来源地址,我们需要有个规则来确定是否覆盖掉之前的来源地址。

此规则和Google Analytics相同:

  • UTM 和 Organic 总是会覆盖掉之前的来源.
  • Typein 将不会覆盖任何之前的来源.
  • Referral source overrides previous source only if there is no user session at the moment. If it’s inside the same session — a referral source will never override previous source.

UTM 是Google分析用于追踪事件,放在URL中的参数。

qq20120729165719

Organic 代表的是来自搜索引擎的流量(正常情况下包括竞价+非竞价)。Referral的流量就是除organic以外其他网站带过来的流量。

Google Analytics中organic和referral的区别

Typein 直接输入网址。

domain

  1. domain: {
  2.   host: 'alexfedoseev.com',
  3.   isolate: false
  4. }

设置Cookie域名。不设置这两个参数的情况下,Cookie会自动设置到当前域名,并包含所有该域名的子域名。使用 isolate: true,可以将二级域名和首级域名Cookie分离,这样从二级域名点击去主域就被认为是 referral 类型的流量。

两种情况:

No. 1
假设你的站点是: wow.com. 同时二级域名为: blog.wow.com. 如果你不想要分开这两种流量,即访问者从blog.wow.com 跳转至 wow.com,访问者不会被认为是wow.com 的新访客,这就相当是一次站内跳转(比如从wow.com/about 跳转至 wow.com/contacts) ,在wow.com & blog.wow.com 的页面都设置domain: 'wow.com'即可。

No. 2
相反的一种情况 — 你想要分隔来自子域名的流量并将其视为 Referral. 主域名仍为 — wow.com, 子域名为 — blog.wow.com, 用户获取到的三级域名 — alex.blog.wow.com. 如果你不想区分来自 blog.wow.com 和 alex.blog.wow.com的流量, 但又想区分所有三级域名下的博客和主域名的流量,需要如下配置:

// 放置主域下 wow.com
domain: {
  host: 'wow.com',
  isolate: true
}

// 放置子域名下(blog.wow.com & alex.blog.wow.com) 
domain: 'blog.wow.com'

注意!在统计代码部署至生产环境中后不要再次修改isolate的值。可能会导致不可预估的错误。

如何检查 isolate 参数是否设置正确。

  1. // 在 wow.com 的页面上设置正确
  2. domain: {
  3.   host: 'wow.com',
  4.   isolate: true
  5. }
  6. // 在 blog.wow.com  的页面上设置无任何意义
  7. domain: {
  8.   host: 'wow.com',
  9.   isolate: true
  10. }

referrals

  1. referrals: [
  2.   {
  3.     host: 't.co',            // This is host from Twitter's `http referer`
  4.     medium: 'social',        // This is custom `utm_medium`, you can drop it and it'll be `referral`
  5.     display: 'twitter.com'   // And this is how you'll see it in the result data
  6.   },
  7.   {
  8.     host: 'plus.url.google.com',
  9.     display: 'plus.google.com'
  10.   }
  11. ]

添加自定义的来源类型

一般情况下,facebook.com 这种类型的来源都被标记为referral类型,但是如果你想标记为  social (utm_medium=social), 你可以使用 referrals设置. 第一个参数是从http referer中获取到的 host,第二个参数 — medium — 将优先于 utm_medium.

此外,一些来源有不同的host值(比如,Twitter (host: 't.co', display: 'twitter.com') ,Google+ (host: 'plus.url.google.com', display: 'plus.google.com') ),这种情况下,你可以给来源添加可选参数 display。

organics

一些已经预定义的 organic:

Source         ->  Alias
-------------------------
google.all     ->  google
yandex.all     ->  yandex
bing.com       ->  bing
yahoo.com      ->  yahoo
about.com      ->  about
aol.com        ->  aol
ask.com        ->  ask
globososo.com  ->  globo
go.mail.ru     ->  go.mail.ru
rambler.ru     ->  rambler
tut.by         ->  tut.by

如果你想要添加organic来覆盖以前预先设置的来源。

  1. organics: [
  2.   {
  3.     host: 'bing.com',
  4.     param: 'q',
  5.     display: 'bing_in_da_house'
  6.   }
  7. ]

 

特别提示:本站资源全部免费下载,因服务器需经费维护,文中部分外链点击后会进入广告,请耐心等待5秒即可跳过广告进入目标页面。如遇页面外链打不开或下载地址失效,您可以在评论中指出错误,或扫描页面底部二维码。
本文地址:http://www.tiangr.com/js-kai-yuan-liu-liang-tong-ji-dai-ma-sourcebuster-js-shi-yong-jiao-cheng.html
版权声明:本文为原创文章,版权归 tiangr 所有,欢迎分享本文,转载请保留出处!

发表评论


表情