全埋点(AutoTrack)

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 事件

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

//注意默认的： sa.quick('autoTrack') 是需要的

第二种 手动模式 在页面切换的时候，手动调用 sensors.quick('autoTrackSinglePage') 来采集 web 浏览事件 $pageview ,这个方法在页面 url 切换后调用

// 比如现在是在 react 中可以在全局的 onUpdate 里来调用
onUpdate: function(){
    sensors.quick('autoTrackSinglePage');
}

  //vue 项目在路由切换的时候调用
router.afterEach((to,from) => {
    Vue.nextTick(() => {
        sensors.quick("autoTrackSinglePage");
    });
});
//注意： vue下因为首页打开时候就会默认触发页面更细，所以需要去掉默认加的 sa.quick('autoTrack')

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

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

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