神策分析 JavaScript SDK AutoTrack 使用说明

最后更新于:2019-03-19 15:16:23

1. 全埋点代码生成

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

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

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

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

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

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

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

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

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

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

第一种 配置参数 is_track_single_page ,默认值为 false ,表示是否开启自动采集 web 浏览事件 $pageview 的功能,其原理是修改 window 对象的 pushState 和 replaceState 原生方法,在页面的 url 改变后自动采集 $pageview 事件,若用户浏览器不支持这两种方法或者是使用 hash 的路由模式,我们也会监听 popstate 和 hashchange 事件来自动触发 $pageview 事件。使用该方法时首次进入页面可能不会自动触发 $pageview ,需要用户手动调一次 sensors.quick('autoTrack');。

//SDK版本1.12.18以上支持,默认值为false
is_track_single_page:true

第二种 手动调用 sensors.quick('autoTrackSinglePage') 来采集 web 浏览事件 $pageview ,这个方法在页面 url 切换后调用,比如 react 可以在全局的 onUpdate 里来调用。其他框架使用类似的在全局的在页面切换后调用。

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

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

此方法也可添加自定义属性,

sensors.quick("autoTrackSinglePage",{platForm:"H5"});

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

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 ),如果你想要对其他元素采集的话,请在元素发生点击的时候,调用我们的这个方法。

// 下面演示一个 div 标签被点击时触发预置的元素点击事件
<div id="submit_order">提交订单</div>

<script type="text/javascript">

  $("#submit_order").click(function(event) {
      sa.quick('trackHeatMap',this); //第二个参数是发生事件的dom元素
  });

</script>

3.2 视区停留事件($WebStay)

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

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