# 全埋点(AutoTrack)

## 1. 全埋点代码生成

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

![](/files/-Leydck2ctJbhNeQRsjz)

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

![](/files/-LeydkKY7aK5ITw9lhdQ)

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

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

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

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

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

```javascript
  // 如果需要调用 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 事件

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

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

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

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

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

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

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

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

必填参数：

* **web\_url**: 神策分析后台地址，神策分析中点击分析及触达分析功能会用到此地址，代码生成工具会自动生成。如果神策后台版本及 `sensorsdata.min.js` 均是 1.10 及以上版本，这个参数不需要配置。
* **heatmap\_url**: 神策分析中点击分析及触达分析功能代码，代码生成工具会自动生成。如果神策代码中 `sensorsdata.min.js` 版本是 1.9.1 及以上版本，这个参数必须配置，低于此版本不需要配置。
* **heatmap**: 必须在 SDK 初始化代码里面配置这个参数才会采集事件。可以使用这种配置方式 `heatmap:{}` ，那么会默认采集两个事件。具体参数配置如下:

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

```javascript
// 下面演示一个 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 就会发送一次 页面停留事件。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://54td.gitbook.io/shence/technical_guide/detailed_guide/js_sdk/js_sdk_autotrack.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.