> For the complete documentation index, see [llms.txt](https://docs.hackle.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.hackle.io/en/development-guide/react/event-tracking/react-track-page.md).

# Screen Tracking

The Hackle SDK automatically detects URL changes in the browser and collects page view information. However, when pages do not have distinct URLs, 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 React 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

In React, it is recommended to track screens at the point when a route change is complete.

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

```javascript
import { useEffect } from 'react'
import { useLocation } from 'react-router-dom'
import { useHackleClient } from '@hackler/react-sdk'

function usePageTracking() {
  const location = useLocation()
  const hackleClient = useHackleClient()
  useEffect(() => {
    hackleClient.setCurrentPage({
      pageName: "pageName"
    })
  }, [location, hackleClient])
}
```

{% endtab %}

{% tab title="Next.js (App Router)" %}

```javascript
'use client'

import { useEffect } from 'react'
import { usePathname, useSearchParams } from 'next/navigation'

export function PageTracker() {
  const pathname = usePathname()
  const searchParams = useSearchParams()

  useEffect(() => {
    // 페이지 경로(pathname) 또는 쿼리 파라미터(searchParams)가 변경될 때마다 실행
    hackleClient.setCurrentPage({
      pageName: "pageName"
    })
  }, [pathname, searchParams])

  return null
}
```

{% endtab %}

{% tab title="Next.js (Pages Router)" %}

```javascript
import { useEffect } from 'react'
import { useRouter } from 'next/router'

export default function App({ Component, pageProps }) {
  const router = useRouter()

  useEffect(() => {
    // 페이지 변경 시 호출될 핸들러 함수
    const handleRouteChange = (url: string) => {
      hackleClient.setCurrentPage({
        pageName: "pageName"
      })
    }

    handleRouteChange(router.asPath)
    router.events.on('routeChangeComplete', handleRouteChange)

    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router])

  return <Component {...pageProps} />
```

{% 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="200">Type</th><th>Constraints</th></tr></thead><tbody><tr><td>Property Key (key)</td><td><code>string</code></td><td><ul><li>Character limit is 128 characters.</li><li>Case-insensitive. For example, amount and AMOUNT are recognized as the same key.</li></ul></td></tr><tr><td>Property Value (value)</td><td><code>boolean</code>, <code>string</code>, <code>number</code>, <code>array</code></td><td><ul><li>For string type, character limit is 1024 characters.</li><li>For number type, a maximum of 15 integer digits and 6 decimal places are supported.</li></ul></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

```jsx
const config = {
  automaticRouteTracking: false
};

const hackleClient = createInstance("YOUR_BROWSER_SDK_KEY", config);

ReactDOM.render(
  <HackleProvider hackleClient={hackleClient}>
    <YourApp />
  </HackleProvider>,
  document.getElementById('root')
);
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.