swt

SWT (Simple Web Tracker) is a lightweight JavaScript library for tracking user interactions and events on web pages.

웹 페이지의 사용자 상호작용 및 이벤트를 추적하기 위한 경량 자바스크립트 라이브러리입니다.

Installation

To use SWT, include the script in your HTML file from the CDN.

SWT를 사용하려면 CDN을 통해 HTML 파일에 스크립트를 포함시키세요.

npm i @dooboostore/swt

Features

Event Tracking

Monitors clicks, mouse movements, scrolls, page loads, and URL changes.

클릭, 마우스 움직임, 스크롤, 페이지 로드, URL 변경을 모니터링합니다.

Session Management

Automatically handles user sessions, including creation and retrieval.

세션 생성 및 조회를 포함하여 사용자 세션을 자동으로 관리합니다.

Built-in Dashboard

Provides a dashboard to visualize data with path flows, heatmaps, and session replays.

경로 흐름, 히트맵, 세션 리플레이 등으로 데이터를 시각화하는 대시보드를 제공합니다.

Easy Configuration

Configure tracking behavior easily using `data-swt-*` attributes in the script tag.

스크립트 태그의 `data-swt-*` 속성을 사용하여 추적 동작을 쉽게 구성합니다.

Session Replay

Visually replay user sessions to understand their journey and identify issues.

사용자 여정을 이해하고 문제를 식별하기 위해 사용자 세션을 시각적으로 재현합니다.

Data Export

Allows exporting collected session data to a CSV file for further analysis.

수집된 세션 데이터를 추가 분석을 위해 CSV 파일로 내보낼 수 있습니다.

Quick Start

Add the script tag to your HTML. The tracker will start automatically.

HTML에 스크립트 태그를 추가하세요. 트래커가 자동으로 시작됩니다.

&lt;!-- Add this to the &lt;head&gt; or &lt;body&gt; of your HTML --&gt;
&lt;script
    id="swt"
    data-swt-post-url="/api/track"
    data-swt-project-name="My Awesome Project"
    type="module" 
    src="https://cdn.jsdelivr.net/npm/@dooboostore/swt/dist/index.min.js"
&gt;&lt;/script&gt;

Dynamic Script Insertion (for CDN usage)

You can also dynamically insert the SWT script from a CDN into your page. This is useful for external sites or when you prefer not to host the script directly.

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/dist/index.min.js';
document.head.appendChild(script);

Configuration Options

These options are set asdata-swt-*attributes on the<script id="swt">tag:

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

data-swt-target-query-selectorOptional, string

A comma-separated list of CSS selectors for elements you want to specifically track clicks, visibility, and binding events on.

클릭, 가시성 및 바인딩 이벤트를 특별히 추적하려는 요소에 대한 쉼표로 구분된 CSS 선택기 목록입니다.

Example:"a, img, .trackable-div"

data-swt-post-urlOptional, string

The URL where collected log data will be sent via POST requests. If not provided, data will only be stored in sessionStorage.

수집된 로그 데이터가 POST 요청을 통해 전송될 URL입니다. 제공되지 않으면 데이터는 sessionStorage에만 저장됩니다.

data-swt-post-buffer-timeOptional, number

The time in milliseconds to buffer collected events before sending them to the post-url.

수집된 이벤트를 post-url로 보내기 전에 버퍼링할 시간(밀리초)입니다.

Default:0(no buffering)

data-swt-tokenOptional, string

An authentication token to be included in the Authorization header when sending data to the post-url.

post-url로 데이터를 보낼 때 Authorization 헤더에 포함될 인증 토큰입니다.

data-swt-open-dashboard-delayOptional, number

Delay in milliseconds before the dashboard script is loaded when swt.openDashboard() is called.

swt.openDashboard()가 호출될 때 대시보드 스크립트가 로드되기 전 지연 시간(밀리초)입니다.

Default:0

data-swt-disabled-auto-startOptional, boolean

If present, SWT will not automatically start tracking on DOMContentLoaded. You will need to manually callwindow.swt.run().

이 속성이 있으면 SWT는 DOMContentLoaded 시 자동으로 추적을 시작하지 않습니다.window.swt.run()을 수동으로 호출해야 합니다.

data-swt-modeOptional, string

Set to "dashboard" when the script is loaded within the SWT dashboard window. This changes the script's behavior to run the dashboard application instead of the tracker.

스크립트가 SWT 대시보드 창 내에서 로드될 때 "dashboard"로 설정됩니다. 이는 스크립트의 동작을 트래커 대신 대시보드 애플리케이션을 실행하도록 변경합니다.

Usage

Once the script is included, theswtinstance will be available globally on thewindowobject (i.e.,window.swt).

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

Available Methods

You can interact with theswtinstance directly from your browser's developer console or your JavaScript code.

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

window.swt.run()Initialize

Initializes the tracker. This is automatically called on DOMContentLoaded unlessdata-swt-disabled-auto-startis set.

트래커를 초기화합니다.data-swt-disabled-auto-start가 설정되지 않은 경우 DOMContentLoaded 시 자동으로 호출됩니다.

window.swt.help()Info

Displays a help message in the console with available methods.

사용 가능한 메서드와 함께 콘솔에 도움말 메시지를 표시합니다.

window.swt.status()Query

Returns the current session status and a list of past sessions.

현재 세션 상태와 과거 세션 목록을 반환합니다.

window.swt.showSession()Query

Displays the ID of the current active session in the console.

콘솔에 현재 활성 세션의 ID를 표시합니다.

window.swt.newSession()Action

Creates a new session. You can optionally provide a sessionId and additional data for the session. If id is not provided, a random UUID is generated.

새 세션을 생성합니다. 선택적으로 sessionId와 세션에 대한 추가 데이터를 제공할 수 있습니다. id가 제공되지 않으면 임의의 UUID가 생성됩니다.

Signature:newSession(options?: { id?: string, data?: object })

window.swt.openDashboard()Action

Opens a new browser window displaying the SWT Dashboard, which visualizes the collected session data.

수집된 세션 데이터를 시각화하는 SWT 대시보드를 표시하는 새 브라우저 창을 엽니다.

Example

// 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();

Demonstration

Dashboard Features

The SWT Dashboard provides a visual interface to analyze the collected tracking data. It can be opened by callingwindow.swt.openDashboard()from the tracked page.

SWT 대시보드는 수집된 추적 데이터를 분석하기 위한 시각적 인터페이스를 제공합니다. 추적 중인 페이지에서window.swt.openDashboard()를 호출하여 열 수 있습니다.

The dashboard includes:

대시보드에는 다음이 포함됩니다: