Screen Tracking

The Hackle SDK automatically detects URL changes in the browser and collects page view information. However, in Single Page Application (SPA) or dynamic page environments, automatic collection may be difficult.

In such cases, you can manually track page views by calling the setCurrentPage method directly.

setCurrentPage

This feature is supported in JavaScript SDK version 11.53.0 and above.

You can manually set the current page information by calling the setCurrentPage method.

• The minimum tracking time unit for screen tracking is 1 second.

• The $engagement for pages changed within 1 second is not measured.

Parameter	Type	Required	Description
pageName	string	Required	Page name
properties	object	Optional	Custom properties to add to the page

setCurrentPage collects page information every time it is called.

Even if the same pageName is provided, $page_view and $engagement are collected.

Example

It is recommended to use event listeners to trigger screen tracking when an event occurs.

JavaScript

// 1. 페이지 로드 + 뒤로가기/앞으로가기 (bfcache 복원)
window.addEventListener('pageshow', (event) => {
  hackleClient.setCurrentPage({pageName: "page"})
)

// 2. 탭 복귀 / 최소화 복귀
document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'visible') {
        hackleClient.setCurrentPage({pageName: "page"})
    }
})

Vue.js

Property

The Hackle SDK supports adding properties to Event objects.

• The maximum number of properties that can be added to an event object is 64.

Type	Type	Constraints
Property Key (key)	string	Character limit is 128 characters. Case-insensitive. For example, amount and AMOUNT are recognized as the same key.
Property Value (value)	boolean, string, number, array	For string type, character limit is 1024 characters. For number type, a maximum of 15 integer digits and 6 decimal places are supported.

Example

hackleClient.setCurrentPage({
  pageName: "Product Detail",
  properties: {
    productId: "12345",
    category: "Electronics",
    price: 99000,
    inStock: true
  }
});

Disabling automaticRouteTracking

By default, automaticRouteTracking is enabled in the SDK. If you do not want automatic screen information collection when navigating between pages, you must disable automaticRouteTracking.

You can configure automaticRouteTracking when initializing the SDK.

If you manually collect screen information via setCurrentPage while automaticRouteTracking is enabled, $page_view and $engagement may be over-collected or collected with unintended properties.

When manually collecting screen information, it is recommended to disable automaticRouteTracking.

Example

const hackleClient = HackleClient.create("YOUR_SDK_KEY", {
  automaticRouteTracking: false
});