menu
Is this helpful?

# JavaScript SDK의 자동 수집 가이드

# HTML 요소 클릭 이벤트의 모니터링

페이지 상의 엘리먼트 클릭 이벤트를 트래킹하고 싶다면, trackLink을 이용할 수 있습니다.

ta.trackLink(
  {
    tag: ["a", "button"], //HTML tag
    class: ["class1", "class2"], //Custom Class name
    id: ["id1", "id2"] //custom ID name
  }, 
  "click", //he name of the trace event
  {
    production: "production",
    name: "name"
  } //event properties
);
  • 첫 번째 파라미터는 모니터링하고자 하는 엘리먼트로, JSON object 타입입니다. HTML 태그나 Class 및 id 추적을 지원합니다. 규칙을 만족하는 엘리먼트의 클릭 이벤트를 모니터링하고, 클릭되면, 이벤트로 전송되며, 이벤트 이름과 이벤트 속성은 그 다음 두 개의 파라미터 값으로 얻어집니다.
  • 두 번째 파라미터는 이벤트 이름이며, string 유형이고, 기입 필수입니다.
  • 세 번째 파라미터는 이벤트 속성이며, JSON object 타입이고, 전송되는 속성이 비어 있는 경우는, Null의 상태로 JSON으로 전송해 주세요.
  • 이벤트 속성'name'은 요소의 식별이 되며, 세 번째 매개변수에 이벤트 속성에 'name'이 설정되어 있지 않은 경우, 모니터링된 요소의 속성 값에 기반하여 요소의 식별로 사용됩니다. 값의 부여 우선순위：
    1. 사용자 지정 속성'td-name'
    2. innerHTML의 리스트 요소 중복 제외 수
    3. 요소의 데이터 가치
    4. abc를 가져올 수 없는 경우는 'ID not obtained'

trackLink가 호출되면, 룰을 만족하는 요소의 이벤트 리스너가 설정됩니다. 인터페이스가 호출된 후, 엘리먼트의 ID가 변경되거나 룰을 만족하는 새로운 엘리먼트가 생성되어 리스너에 의해 보고되는 이벤트가 그에 따라 변경되지 않습니다. 새롭게 생성된 엘리먼트를 모니터링할 필요가 있는 경우는, 엘리먼트가 생성된 후에 trackLink를 호출할 수 있습니다.

# 페이지 이벤트의 표시와 비표시

버전 1.6.0 이후로, ta_page_show와 ta_page_hide의 이벤트가 추가됩니다.

SDK는 기본적으로 해당 이벤트를 수집하지 않지만, SDK 초기 설정의 config에서 설정할 수 있습니다.

var config = {
    appId: 'xxx',
    serverUrl: 'xxx',
    autoTrack: {
     //enable ta_page_show event
     pageShow: true,
     //enable ta_page_hide event
     pageHide: true,
    }
};

ta_page_hide 이벤트는 페이지가 이번에 표시된 후 닫힌 시점의 시간 경과를 #duration에 저장됩니다.

# 페이지 조회 이벤트

TE는 자동 수집 페이지 조회 이벤트의 인터페이스를 제공하고 있습니다. 아래의 코드로 JS SDK는 자동으로 사용자의 조회 페이지 이벤트를 수집하여 전송할 수 있습니다. 이벤트 이름은 ta_pageview입니다.

ta.quick("autoTrack");

v1.6.0 버전 이후에는 사용자 지정 속성을 지원합니다.

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

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

← 데이터 블록킹 →