Screen Tracking

For screen navigation in React Native, refer to the following React Native developer documentation.

React Native uses a single Activity/ViewController structure by default, making automatic screen information collection difficult.

To properly collect $page_view and $engagement events, you must directly call the setCurrentScreen method every time the screen changes.

setCurrentScreen

This feature is supported in React Native SDK version 3.30.0 and above.

Track screens using the setCurrentScreen(screen) 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

name

string

Required

The name of the current screen.

screenClass

string

Required

If you do not need a separate class name, enter the same value as name.

Screen tracking for the same screen is not possible.

If setCurrentScreen is called with the same Screen (where both name and screenClass are identical) as the previous screen, it is recognized as no screen transition and nothing happens.

$page_view and $engagement are not called.

Example

hackleClient.setCurrentScreen({
    name: screenName,
    screenClass: className,
});

import * as React from 'react';
import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
import { createInstance } from '@hackler/react-native-sdk';

export const hackleClient = createInstance('YOUR_SDK_KEY');

export default function App() {
  const navigationRef = useNavigationContainerRef();
  const routeNameRef = React.useRef<string | undefined>();

  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={() => {
        const routeName = navigationRef.current?.getCurrentRoute()?.name;
        routeNameRef.current = routeName;

        if (initialRouteName) {
          hackleClient.setCurrentScreen({ name: routeName, screenClass: routeName });
        }
      }}
      onStateChange={() => {
        const previousRouteName = routeNameRef.current;
        const currentRouteName = navigationRef.current?.getCurrentRoute()?.name;

        if (currentRouteName && previousRouteName !== currentRouteName) {
          hackleClient.setCurrentScreen({ name: currentRouteName, screenClass: currentRouteName });
        }

        routeNameRef.current = currentRouteName;
      }}
    >
      {/* Navigator 구성 */}
    </NavigationContainer>
  );
}

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.setCurrentScreen({
    name: screenName,
    screenClass: className,
    properties: {
        productId: "12345",
        category: "Electronics",
        price: 99000,
        inStock: true,
    },
});

Disabling automaticScreenTracking

By default, automaticScreenTracking is enabled in the SDK. If you do not want automatic screen information collection at the Activity/ViewController level, you must disable automaticScreenTracking.

You can configure automaticScreenTracking when initializing the SDK.

If you manually collect screen information via setCurrentScreen while automaticScreenTracking 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 automaticScreenTracking.

Example

import { HackleApp } from '@hackler/react-native-sdk';

export const hackleClient = createInstance('YOUR_SDK_KEY', {
  automaticScreenTracking: false,
});

PreviousEvent Tracking NextUser Explorer

Last updated 3 months ago