神策分析 JavaScript SDK AutoTrack 使用说明

最后更新于:2018-09-27 10:26:05

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 就会发送一次 页面停留事件。