Auto-tracking

Last updated 10/03/2026

1. Monitor HTML element click events

To track click events on page elements, you can use trackLink to monitor HTML elements in batches:

ta.trackLink(
  {
    tag: ["a", "button"], //HTML tags
    class: ["class1", "class2"], //Custom class names
    id: ["id1", "id2"] //Custom IDs
  }, //Rules for the elements to monitor
  "click", //Name of the tracked event
  {
    production: "Product name",
    name: "Element identifier"
  } //Event properties
);

• The first parameter is the elements you want to monitor. Its type is a JSON object, and you can specify the page elements to monitor by HTML tag, class, and id. For elements that match the rules, click events are monitored through event listeners. When a monitored element is clicked, an event is reported, with the event name and event properties taken from the values of the next two parameters

• The second parameter is the event name. It is of type string and is required

• The third parameter is the event properties. Its type is a JSON object. If there are no properties to report, you can pass an empty JSON object

• The event property 'name' is the element identifier. If the event property 'name' is not set in the third parameter, the element identifier is taken from the attribute values of the monitored element, in the following order of priority:

  1. The element's custom attribute 'td-name'

  2. The element's innerHTML

  3. The element's value

  4. If none of the above is available, '未获取标识' is passed.

When trackLink is called, it sets event listeners on the elements that match the rules. If an element's identifier changes after the call, or new elements that match the rules are created, the events reported by the listeners do not change accordingly. To monitor newly created elements, call trackLink after the elements are created.

2. Page show and hide events

• How to enable

  • Starting from v1.6.0, the ta_page_show and ta_page_hide events are added.
  • By default, the SDK does not collect these events. You can enable them in the config used to initialize the SDK.

  var config = {
      appId: 'xxx',
      serverUrl: 'xxx',
      autoTrack: {
           //Enable the ta_page_show event
           pageShow: true,
           //Enable the ta_page_hide event
           pageHide: true,
           properties: { // Custom properties for auto-tracked events
               staticKey: 'staticValue'
           }, 
           callback: (eventType) => { // Auto-tracking callback
                if (eventType === 'pageShow') {
                    return { appShowKey: 'appShowValue' };
                } else if (eventType === 'pageHide') {
                    return { appHideKey: 'appHideValue' };
                } else {
                    return {};
                }
           }
      }
  };

  • Starting from v2.1.2, page show and hide events support custom properties for auto-tracked events and the auto-tracking callback.
  • The ta_page_hide event puts the duration from when the page was shown to when it was closed into the #duration property.
  • If you need the first ta_page_show event to carry user information, pass it in during initialization.

  var config = {
      appId: 'appId',
      serverUrl: 'serverUrl',
      send_method: 'ajax',
      accountId: 'xx',//Set the account ID
      distinctId: 'xx',//Set the distinct ID
      superProperties: {//Set static super properties
          super1: 'xx',
          super2: 'xx'
      }
  };

3. Page view event

AE provides an API for automatically collecting page view events. Use the following code, and the JS SDK automatically uploads events when users view pages. The event name is ta_pageview:

ta.quick("autoTrack");

Starting from v1.6.0, custom properties are supported.

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

When this API is called, a page view event is reported immediately

Starting from 2.4.0, automatic page view events are supported for single-page applications. Enable them as follows:

var config = {
    appId: 'xxx',
    serverUrl: 'xxx',
    autoTrack: {
         //Enable the ta_page_show event
         pageShow: true,
         //Enable the ta_page_hide event
         pageHide: true,
         //Enable the ta_pageview event
         pageView: true,
         properties: { // Custom properties for auto-tracked events
             staticKey: 'staticValue'
         }, 
         callback: (eventType) => { // Auto-tracking callback
              if (eventType === 'pageShow') {
                  return { appShowKey: 'appShowValue' };
              } else if (eventType === 'pageHide') {
                  return { appHideKey: 'appHideValue' };
              }else if (eventType === 'pageView') {
                  return { pageViewKey: 'pageViewValue' };
              }else {
                  return {};
              }
         }
    }
};

4. Element click event

Starting from 2.5.0, you can configure the pageClick parameter to automatically collect element click events. The event name is ta_page_click.

var config = {
    appId: 'xxx',
    serverUrl: 'xxx',
    autoTrack: {
         //Enable the ta_page_show event
         pageShow: true,
         //Enable the ta_page_hide event
         pageHide: true,
         //Enable the ta_pageview event
         pageView: true,
         //Enable element click events
         pageClick:true
    }
};

• After you set pageClick: true, click events are collected by default for all elements that have onclick or td-track-id set. Sample code:

<button onclick="testFun()" td-track-id="buttonId">Test button</button>

note

Note: Elements in Vue projects do not have the onclick attribute. Use td-track-id to filter the elements to collect

After td-track-id is set, #element_id is automatically included when the click event is reported.

• To ignore click events on an element, use td-track-ignore or td-track-ignore="true". Sample code:

    <button onclick="testFun()" td-track-ignore >Test button</button>

note

Note: React projects must use td-track-ignore="true" to ignore elements