---
code: javascript_sdk_autotrack
name: "自动采集"
wikiToken: M0bfwXKoSihigKk8UJecmbu6nWc
parentWikiToken: XB4ywbB3LiMvFWkDUVDcRY0pnlm
updateTime: 1763108735000
sourceUrl: https://docs-v2.thinkingdata.cn/?version=v5.0&lan=zh-CN&code=javascript_sdk_autotrack
---
# 自动采集

### 一、监控 HTML 元素点击事件

如果您想要追踪页面上元素的点击事件，可以使用 `trackLink` 对 HTML 元素进行批量监控：

```
ta.trackLink(
  {
    tag: ["a", "button"], //HTML标签
    class: ["class1", "class2"], //自定义的Class名称
    id: ["id1", "id2"] //自定义的ID名称
  }, //监控元素的规则
  "click", //追踪事件的名称
  {
    production: "产品名",
    name: "元素标识名"
  } //事件的属性
);
```

- 第一个参数是您需要监控的元素，类型是 JSON 对象，支持根据 HTML 标签、Class 以及 id 追踪需要监控的页面元素。对于满足规则的元素，会通过事件监听器的方式监控元素的点击事件，当监听元素被点击时，将会上报一个事件，事件名和事件属性取后续两个参数的值
- 第二个参数是事件的名称，为 `string` 类型,必须填写
- 第三个参数是事件的属性，类型是 JSON 对象，如果没有需要上报的属性，可传入空 JSON
- 事件属性 `'name'`为元素的标识，如果参数三中没有设置事件属性 `'name'`，我们将会根据被监控元素的属性值作为元素标识。取值优先级如下:
1.取值元素的自定义属性 `'td-name'`

2.元素的 `innerHTML`

3.元素的 value 

4.如果都没有取到则传 `'未获取标识'`.

<!-- unsupported block: 34 -->

trackLink在被调用时会为符合规则的元素设置事件监听器.在调用接口后元素的标识发生变化，或者新生成了符合规则的元素，监听器上报的事件不会做出相应的改变。如果需要监控新生成元素，可在元素生成后调用trackLink。

### 二、页面显示和隐藏事件

- 开启方式
- 从v1.6.0版本开始，增加`ta_page_show` 和 `ta_page_hide` 事件。
- SDK默认是不采集这些事件，可以通过SDK初始化的config来配置。
```
var config = {
    appId: 'xxx',
    serverUrl: 'xxx',
    autoTrack: {
         //开启ta_page_show事件
         pageShow: true,
         //开启ta_page_hide事件
         pageHide: true,
         properties: { // 自动采集自定义属性
             staticKey: 'staticValue'
         }, 
         callback: (eventType) => { // 自动采集回调
              if (eventType === 'pageShow') {
                  return { appShowKey: 'appShowValue' };
              } else if (eventType === 'pageHide') {
                  return { appHideKey: 'appHideValue' };
              } else {
                  return {};
              }
         }
    }
};
```

- 从v2.1.2版本开始，页面显示和隐藏事件支持自动采集自定义属性以及自动采集回调。
- `ta_page_hide`事件会将页面本次展示到关闭的时长放到属性`#duration`中。
- 如果需要第一个ta_page_show带上用户相关的信息，可以在初始化的时候传入。
```
var config = {
    appId: 'appId',
    serverUrl: 'serverUrl',
    send_method: 'ajax',
    accountId: 'xx',//设置账号ID
    distinctId: 'xx',//设置访客ID
    superProperties: {//设置静态公共属性
        super1: 'xx',
        super2: 'xx'
    }
};
```

### 三、页面浏览事件

AE 提供自动采集页面浏览事件的接口。您只需使用以下代码，JS SDK 将会自动上传用户浏览页面的事件，事件名称为ta_pageview：

```
ta.quick("autoTrack");
```

从v1.6.0版本开始，可以支持自定义属性。

```
ta.quick('autoTrack', {
    name: 'test_name',
    time: new Date(),
    pro: [1, 2, 3, 4],
})
```

<!-- unsupported block: 34 -->

该接口在调用时，会立即上报一次页面浏览事件
