跳到主要内容

自动采集

最近更新 2026/10/03

一、监控 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.如果都没有取到则传 '未获取标识'.

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],
})

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

从2.4.0版本开始，支持单页面的自动浏览事件，具体开启方式如下：

var config = {
    appId: 'xxx',
    serverUrl: 'xxx',
    autoTrack: {
         //开启ta_page_show事件
         pageShow: true,
         //开启ta_page_hide事件
         pageHide: true,
         //开启ta_pageview事件
         pageView: true,
         properties: { // 自动采集自定义属性
             staticKey: 'staticValue'
         }, 
         callback: (eventType) => { // 自动采集回调
              if (eventType === 'pageShow') {
                  return { appShowKey: 'appShowValue' };
              } else if (eventType === 'pageHide') {
                  return { appHideKey: 'appHideValue' };
              }else if (eventType === 'pageView') {
                  return { pageViewKey: 'pageViewValue' };
              }else {
                  return {};
              }
         }
    }
};

四、元素点击事件​

从2.5.0版本开始，可以通过配置pageClick参数自动采集元素点击事件，事件名称为ta_page_click。

var config = {
    appId: 'xxx',
    serverUrl: 'xxx',
    autoTrack: {
         //开启ta_page_show事件
         pageShow: true,
         //开启ta_page_hide事件
         pageHide: true,
         //开启ta_pageview事件
         pageView: true,
         //开启元素点击事件
         pageClick:true
    }
};
  • 设置pageClick：true之后，默认会采集所有设置onclick或者设置td-track-id的元素的点击事件，示例代码如下：
<button onclick="testFun()" td-track-id="buttonId">测试按钮</button>
备注

注意：Vue项目元素没有onclick属性，需要使用td-track-id来做筛选采集目标

设置td-track-id 之后，在点击事件上报的时候会自动带上#element_id。

  • 如果你想忽略该元素的点击事件，可以通过td-track-ignore或者td-track-ignore="true"来忽略，示例代码如下：
    <button onclick="testFun()" td-track-ignore >测试按钮</button>
备注

注意：React项目需要使用td-track-ignore="true" 来忽略

这篇文档对你有帮助吗？
本页内容