Hướng dẫn tích hợp SDK tracking phiên bản 2.0 cho Frontend

1. Đối tượng toàn cục _jt_ được gắn trên window

Đối tượng này cung cấp các phương thức sau:

  1. Thiết lập hoặc cập nhật dữ liệu gửi lên SDK: _jt_.setData(obj)
  2. Kích hoạt khởi động nguội: _jt_.coldStart()
  3. Lấy pathname hiện tại trong SDK: _jt_getPathName
  4. Lấy thông tin nguồn trang hiện tại trong SDK: _jt_getPageDesc
  5. Gửi sự kiện tracking thủ công: _jt_.sendTracker
  6. Thu thập lại các block exposure: _jt_.refreshBlockExposure
  7. Thu thập lại các phần tử ẩn bị exposure: _jt_.refreshHideElementExposure
  8. Hàm xử lý bắt đầu sự kiện chạm: _jt_.touchStart
  9. Hàm xử lý kết thúc sự kiện chạm: _jt_.touchEnd
  10. Làm mới dữ liệu lưu trong sessionStorage: _jt_.sessionStore

2. Bốn phương pháp tracking nghiệp vụ

2.1. Tracking thủ công tổng quát

Phương pháp này được dùng như một lời gọi API, thích hợp khi cần gửi dữ liệu sau khi nhận kết quả từ server:

/* 
  type: chiến lược xử lý do frontend định nghĩa, mặc định để trống. 
  Khi chuyển trang cần mang thông tin spm thì điền:
    - 'clickAndSpm': gửi click tracking + kèm spm vào URL trang tiếp
    - 'spm': không gửi tracking, chỉ kèm spm vào URL
*/
_jt_.sendTracker({
    type: 'clickAndSpm', // do frontend định nghĩa, mặc định không có
    event_type: 'page_exp',
    block_desc: '',
    button_desc: '',
    parameters: { objId },
});

2.2. Tracking qua thuộc tính HTML

Sự kiện thông thường:

/* 
  type: chiến lược xử lý (như trên)
*/
data-jt-sender={JSON.stringify({
    type: 'clickAndSpm', // do frontend định nghĩa, mặc định không có
    event_type: 'popup_window',
    block_desc: 'tel_page',
    button_desc: 'enter_btn',
    parameters: { objId },
})}

Exposure của block (module): Thêm hai thuộc tính vào phần tử ngoài cùng:

<div
    data-jt-block-exposure={JSON.stringify(data)}
    ref={_jt_.refreshBlockExposure}
>
    {children}
</div>

Exposure của phần tử ẩn: Dùng thẻ div trong suốt với hai thuộc tính:

<div 
    data-jt-hide-element-exposure={JSON.stringify(data)}
    ref={_jt_.refreshHideElementExposure}
/>

2.3. Component tracking dùng trong React

import Tracker from '@components/jimoTracker';

/* 
  type: chiến lược, mặc định là 'click'
    - 'click': chỉ gửi click tracking
    - 'clickAndSpm': click tracking + kèm spm vào URL
    - 'spm': chỉ kèm spm vào URL
    - 'block': exposure của block
    - 'hide': exposure của phần tử ẩn
*/
<Tracker
    type="block"
    data={{
        event_type: 'block_exp',
        block_desc: '',
        button_desc: '',
        parameters: { objId: newsPaperSensorsData.properties.paper_id },
    }}
>
    {'Nội dung được bọc bên trong'}
</Tracker>

2.4. Sự kiện chạm (touch) để kéo thả

<div
    onTouchStart={_jt_.touchStart}
    onTouchEnd={(e) => {
        _jt_.touchEnd(e, this.scrollDom, {
            event_type: 'click',
            block_desc: '',
            button_desc: 'slide_btn',
            parameters: { objId },
        });
    }}
    ref={(dom) => (this.scrollDom = dom)}
>
    {/* Nội dung */}
</div>

Thẻ: SDK tracking frontend tracking event tracking React tracking business tracking

Đăng vào ngày 17 tháng 6 lúc 16:41