神策分析 JavaScript SDK AutoTrack 使用说明

最后更新于：2018-10-26 09:12:34

1. 全埋点代码生成

首先从神策分析的主页中，进入数据接入向导页面：

然后在右上角点击数据接入显示如下界面，然后点击 生成导入代码，进入代码生成页面，按需选择合适的选项，然后点击生成代码，如下图：

这段代码是每个需要采集数据的页面都要引入的，所以建议放在页面的公共部分，比如页面头部或者尾部。

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

为了方便使用，神策分析的 SDK 也提供了一些默认事件的收集，例如如果需要采集页面浏览事件（即 PageView），可以通过增加如下代码：

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

设置之后，SDK 就会自动收集页面浏览事件，以及设置初始来源。另外，如果想加额外的属性，可以如下方式（添加 platForm 属性为 h5）

  // 如果需要调用 login 来重新设置用户标识，必须在此之前调用
 sensors.quick('autoTrack', {
   platForm:'h5'
 })

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

注意：单页面中发送页面浏览事件($pageview)

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

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

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

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

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

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

必填参数：

web_url: 神策分析后台地址，神策分析中点击分析及触达分析功能会用到此地址，代码生成工具会自动生成。如果神策后台版本及 sensorsdata.min.js 均是 1.10 及以上版本，这个参数不需要配置。
heatmap_url: 神策分析中点击分析及触达分析功能代码，代码生成工具会自动生成。如果神策代码中 sensorsdata.min.js 版本是 1.9.1 及以上版本，这个参数必须配置，低于此版本不需要配置。
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(){
    sensors.quick('trackHeatMap',this); //第二个参数是发生事件的dom元素
});

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

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

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

神策分析 JavaScript SDK AutoTrack 使用说明

1. 全埋点代码生成

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

注意： 单页面中发送页面浏览事件($pageview)

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

3.1 页面点击事件($WebClick)

3.2 视区停留事件($WebStay)

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

注意：单页面中发送页面浏览事件($pageview)

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

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