神策分析 JavaScript SDK AutoTrack 使用说明

最后更新于：2018-08-24 12:04:22

1. 全埋点的涵义

神策 JavaScript SDK 的全埋点指的是 sdk 自动采集全部的预置事件。
全部预置事件有三个：页面浏览事件($pageview)，点击事件($WebClick)，页面停留事件($WebStay)。
预置事件的数据采集是相互独立的，sdk 初始化话的时候可以分别独立的控制预置事件的自动采集。

2. 页面浏览事件采集(`$pageview`)

2.1 非单页面采集页面浏览事件

sdk 初始化完成之后，就可以开启 pageview 事件自动采集。如果不调用，就不开启页面浏览事件的自动采集。
如果要自动解析 utm 系列广告参数，需要开启。如果用户首次使用的时候需要自动记录用户首次来源信息，自动记录用户首次使用时间，需要开启。

  // 如果需要调用 login 来重新设置用户标识，必须在此之前调用
  sa.quick('autoTrack')

另外，如果想加额外的属性，可以如下方式（添加 platForm 属性为 h5）

 sa.quick('autoTrack', {
   platForm:'h5'
 })

而如果只想追踪事件，不想设置首次来源到 profile 里，可以使用sa.quick('autoTrackWithoutProfile')来替代。

2.2 单页面采集页面浏览事件

第一种 pushState/replaceState 方式如果用的是这种方式，因为 popstate 事件只有在浏览器后退前进才会触发，所以正常情况下的跳转页面，没法自动监听到。这种情况下，需要手动调用我们提供的 sa.quick('autoTrackSinglePage') 方法( SDK 1.8.5 版本以上可用)来封装 $pageview 的相关属性。这个方法在页面 url 切换后调用，比如 react 可以在全局的 onUpdate 里来调用。其他框架使用类似的在全局的在页面切换后调用。

// 比如现在是在 react 中
onUpdate: function(){
    sa.quick('autoTrackSinglePage');
}

  //vue 项目在路由切换的时候调用  
router.afterEach((to,from) => {
    Vue.nextTick(() => {
        sa.quick("autoTrackSinglePage");
    });
});

这里注意一下，代码生成工具中的自动生成的 sa.quick('autoTrack') 还是需要的，因为这里是首次发送页面浏览事件，切换页面后再调用上面的方法。
vue 页面如果首页打开的时候就触发了路由切换，就不需要sa.quick('autoTrack')了，否则首页会触发两次页面浏览事件。

第二种监听 hashchange 和 popstate 方式 (不建议使用) hashchange 这种切换 url 的方式已经用的越来越少了。不过这种方式的页面切换，是可以自动监听到的。popstate 这个事件可以监听，但是因为只有在浏览器前进后退才会触发，页面跳转并不会触发，所以意义不大。针对上面这两种能自动监听到的事件，我们提供了 is_single_page的参数配置，只要设置 is_single_page:true 就会自动在监听到 hashchange 或 popstate 事件，并自动发送页面浏览数据。

3. 页面点击事件及视区停留事件的采集

必填参数：

heatmap_url:（1.9以上版本新加） heatmap.min.js 文件的地址，在热力分析渲染页面时会用到，采集数据时候不会加载。
heatmap: 必须在 SDK 初始化代码里面配置这个参数才会采集事件。可以使用这种配置方式 heatmap:{} ，那么会默认采集两个事件。具体参数配置如下。详细的配置

heatmap: {
    //是否开启点击图，默认 default 表示开启，自动采集 $WebClick 事件，可以设置 'not_collect' 表示关闭
     clickmap:'default',
     //是否开启触达注意力图，默认 default 表示开启，自动采集 $WebStay 事件，可以设置 'not_collect' 表示关闭
     scroll_notice_map:'not_collect'
}

3.1 页面点击事件(`$WebClick`)

开启全埋点，SDK 就会自动追踪页面上的按钮( a button input )这种 html 标签类型的点击情况，一旦页面某一个按钮发生了点击行为，我们就会去采集此按钮的一些信息，例如: 这个按钮的标签类型( a button input )，这个按钮的文本内容，这个按钮的 name ，这个按钮的 id 、 class 名，还有一些按钮特有的属性如 href 等。

点击图默认只采集这些交互元素（ a input button ），如果你想要对其他元素采集的话，请在元素发生点击的时候，调用我们的这个方法。

// 下面演示点击图片的时候也触发点击图事件
$('img').on('click',function(){
    sa.quick('trackHeatMap',this); //第二个参数是发生事件的dom元素
});

3.2 视区停留事件(`$WebStay`)

有效停留：关注网页区域不滚动，期间鼠标可以移动，可以点击等操作。
有效停留时间：停留时间超过规定的时间，javascript sdk 中默认为 4 秒, 这个参数可以设置。

如果发生页面滚动时候，之前的页面停留是有效停留，也就是超过默认的 4 秒或者自定义的时间，javascript sdk 就会发送一次页面停留事件。