SWT (Simple Web Tracker) 웹 상호작용 및 이벤트를 추적

SWT(Simple Web Tracker)는 웹 페이지에서 사용자 상호작용 및 이벤트를 추적하도록 설계된 경량 JavaScript 라이브러리입니다. 다양한 사용자 활동을 기록하고, 세션을 관리하고, 내장 대시보드를 통해 데이터를 시각화하는 기능을 제공합니다.

github, npm

특징

이벤트 추적 : 클릭, 마우스 움직임, 스크롤, 페이지 로드, URL 변경을 추적합니다.
세션 관리 : 사용자 세션을 자동으로 관리하여 새로운 세션을 생성하고 세션 데이터를 검색할 수 있습니다.
구성 가능 : HTML 속성을 통해 추적 동작을 쉽게 구성합니다 data-*.
대시보드 : 경로 흐름, 이벤트 분포, 히트맵을 포함하여 수집된 세션 데이터를 시각화하기 위한 내장 대시보드입니다.
데이터 내보내기 : 수집된 데이터를 대시보드에서 CSV 형식으로 내보냅니다.

설치

SWT를 사용하려면 dist/index.jsHTML에 스크립트를 포함하세요. data-swt-*스크립트 태그의 속성을 사용하여 SWT를 구성할 수 있습니다.

<script
    id="swt"
    data-swt-target-query-selector="a, img, div.wow"
    data-swt-post-url="http://your-backend-url.com/track"
    data-swt-post-buffer-time="5000"
    data-swt-token="your-auth-token"
    data-swt-open-dashboard-delay="0"
    type="module" src="./dist/index.js"
></script>

동적 스크립트 삽입(CDN 사용용)

CDN에서 SWT 스크립트를 페이지에 동적으로 삽입할 수도 있습니다. 이 기능은 외부 사이트에 사용하거나 스크립트를 직접 호스팅하지 않으려는 경우에 유용합니다.

const script = document.createElement('script');
script.id = 'swt';
script.type = 'module';
script.setAttribute('data-swt-target-query-selector', '#portal, #scriptHolder, #home_banner, #viewport-box');
script.src = 'https://cdn.jsdelivr.net/npm/@dooboostore/swt@1.0.1/+esm'; // Replace with the actual CDN URL and version
document.head.appendChild(script);

구성 옵션

data-swt-*이러한 옵션은 태그 의 속성 으로 설정됩니다 <script id="swt">.

data-swt-target-query-selector(선택 사항, string): 클릭, 가시성 및 바인딩 이벤트를 구체적으로 추적하려는 요소에 대한 CSS 선택자의 쉼표로 구분된 목록입니다. 예: "a, img, .trackable-div".
data-swt-post-url(선택 사항, string): 수집된 로그 데이터가 요청을 통해 전송될 URL입니다 POST. 지정하지 않으면 데이터는 .에만 저장됩니다 sessionStorage.
data-swt-post-buffer-time(선택 사항, number): 수집된 이벤트를 .로 전송하기 전에 버퍼링하는 데 걸리는 시간(밀리초). post-url기본값은 0(버퍼링 안 함)입니다.
data-swt-token(선택 사항, ): 데이터를 보낼 때 헤더 string에 포함될 인증 토큰입니다 .Authorizationpost-url
data-swt-open-dashboard-delay(선택 사항, ): 호출 number시 대시보드 스크립트가 로드되기 전 지연 시간(밀리초) . 기본값은 .입니다 .swt.openDashboard()0
data-swt-disabled-auto-start(선택 사항, boolean): 이 옵션이 있는 경우 SWT는 에서 자동으로 추적을 시작하지 않습니다 DOMContentLoaded. 를 수동으로 호출해야 합니다 window.swt.run().
data-swt-mode(선택 사항, string): SWT 대시보드 창에 스크립트가 로드될 때 설정합니다 "dashboard". 이렇게 하면 스크립트의 동작이 변경되어 추적기 대신 대시보드 애플리케이션을 실행합니다.

용법

스크립트가 포함되면 swt인스턴스는 해당 객체에서 전역적으로 사용할 수 있습니다 window(예: window.swt).

사용 가능한 방법

swt브라우저의 개발자 콘솔이나 JavaScript 코드에서 직접 인스턴스 와 상호 작용할 수 있습니다 .

window.swt.run()DOMContentLoaded: 추적기를 초기화합니다. 이 함수는 가 설정되어 있지 않으면 자동으로 호출됩니다 data-swt-disabled-auto-start.
window.swt.help(): 사용 가능한 방법과 함께 콘솔에 도움말 메시지를 표시합니다.
window.swt.status(): 현재 세션 상태와 지난 세션 목록을 반환합니다.
window.swt.showSession(): 콘솔에서 현재 활성 세션의 ID를 표시합니다.
window.swt.newSession(options?: { id?: string, data?: object }): 새 세션을 생성합니다. 세션에 대한 sessionId추가 정보를 제공할 수 있습니다. 를 제공하지 않으면 무작위 UUID가 생성됩니다.dataid
window.swt.openDashboard(): 수집된 세션 데이터를 시각화하는 SWT 대시보드를 표시하는 새 브라우저 창을 엽니다.

예

// Check the current status
console.log(window.swt.status());

// Create a new session with custom data
window.swt.newSession({ data: { user: 'john.doe', campaign: 'summer_sale' } });

// Open the dashboard
window.swt.openDashboard();