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

This feature is supported in React 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

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

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])
}

'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
}

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} />

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

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 config = {
  automaticRouteTracking: false
};

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

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

PreviousEvent Tracking NextUser Explorer

Last updated 3 months ago