# 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

{% hint style="info" %}
This feature is supported in JavaScript SDK version 11.53.0 and above.
{% endhint %}

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.

<table><thead><tr><th width="150">Parameter</th><th width="120">Type</th><th width="110">Required</th><th>Description</th></tr></thead><tbody><tr><td><code>pageName</code></td><td><code>string</code></td><td>Required</td><td>Page name</td></tr><tr><td><code>properties</code></td><td><code>object</code></td><td>Optional</td><td>Custom properties to add to the page</td></tr></tbody></table>

{% hint style="warning" %}
`setCurrentPage` collects page information every time it is called.

Even if the same pageName is provided, `$page_view` and `$engagement` are collected.
{% endhint %}

#### Example

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

{% tabs %}
{% tab title="JavaScript" %}

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

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

{% endtab %}

{% tab title="Vue.js" %}

```javascript
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // ... routes definitions
  ]
})

// 네비게이션이 완료된 후 호출되는 전역 가드
router.afterEach((to) => {
  hackleClient.setCurrentPage({
    pageName: "pageName"
  })
})

export default router
```

{% endtab %}
{% endtabs %}

### 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.

<table><thead><tr><th width="150">Type</th><th width="120">Type</th><th>Constraints</th></tr></thead><tbody><tr><td>Property Key (key)</td><td><code>string</code></td><td>Character limit is 128 characters.<br>Case-insensitive. For example, amount and AMOUNT are recognized as the same key.</td></tr><tr><td>Property Value (value)</td><td><code>boolean</code>, <code>string</code>, <code>number</code>, <code>array</code></td><td>For string type, character limit is 1024 characters.<br>For number type, a maximum of 15 integer digits and 6 decimal places are supported.</td></tr></tbody></table>

#### Example

```javascript
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.

{% hint style="danger" %}
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`.**
{% endhint %}

#### Example

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.hackle.io/en/development-guide/javascript/event-tracking/js-track-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.