본문으로 건너뛰기

자동 수집

최근 업데이트 2026. 10. 03.

1. 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를 호출하십시오.

2. 페이지 표시 및 숨김 이벤트​

  • 활성화 방법

    • 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'
        }
    };

3. 페이지 조회 이벤트​

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

이 인터페이스를 호출하면 페이지 조회 이벤트가 즉시 1회 전송됩니다

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 {};
              }
         }
    }
};

4. 요소 클릭 이벤트​

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"를 사용하여 무시해야 합니다

이 문서가 도움이 되었나요?
이 페이지의 내용