User Behavior Logging

Analyticsis an object for recording and analyzing user behavior. It collects events such as screen entry, button clicks, and component impressions, and can be used to improve the service and analyze user flows.

Please check the prerequisites

• SDK version v1.0.3 must be at least that.
• No events are collected in Sandbox or QR test environments. They are collected only in the live environment.
• Service launch The next day (+1 day) from the console Analytics > Events You can check the data on the screen.

Log (event) guideplease refer to.

---

Signature

Analytics: {
    readonly init: typeof init;
    readonly Screen: typeof LoggingScreen;
    readonly Press: import("react").ForwardRefExoticComponent<import(".").LoggingPressProps & import("react").RefAttributes<unknown>>;
    readonly Impression: typeof LoggingImpression;
    readonly Area: typeof LoggingArea;
}

Properties

• inittypeof init

  This is a function that applies settings when starting the analytics feature. It must be called once during app initialization.
• Presstypeof LoggingPress

  It is a component that logs click events when the user presses a button or touchable component.
• Impressiontypeof LoggingImpression

  It is a component that determines whether the user has actually seen a specific component on the screen and logs it.
• Areatypeof LoggingArea

  It is a component that groups multiple components into one area for analysis.

---

Initialize analytics

Analytics.init

Analytics.initis a function that applies settings when starting analytics. Analytics.Press, Analytics.Impression, Analytics.Areamust be called before using it.

Signature

declare function init(options: AnalyticsConfig): void;

Parameters

• options · Required · AnalyticsConfig

  A configuration object for using analytics features.

---

Record click events

Analytics.Press

Analytics.Pressis a component that records click events when the user presses an element. Use it to wrap points where user interactions occur, such as button clicks or purchase actions.

Click events are collected only in the live environment

In Sandbox or QR test environments, click events are not actually accumulated. The point at which you can check the data in the console is The day after launch (+1 day) .

Signature

LoggingPress: import('react').ForwardRefExoticComponent<LoggingPressProps & import('react').RefAttributes<unknown>>;

Example

import { Analytics } from '@apps-in-toss/framework';
import { Button } from 'react-native';

// Automatically collects click events for clickable elements.
function TrackElements() {
  return (
    <Analytics.Press>
      <Button label="Press Me" />
    </Analytics.Press>
  );
}

---

Record impression events

Analytics.Impression

Analytics.Impressionis a component that detects whether an element is displayed in the viewport and records impression events. It is used to track whether products, banners, and cards located below the scroll are viewed.

Signature

function LoggingImpression({
  enabled,
  impression: impressionType,
  ...props
}: LoggingImpressionProps): import('react/jsx-runtime').JSX.Element;

Example

import { Analytics } from '@apps-in-toss/framework';

// Automatically collects impression information within the area.
function TrackElements() {
  return (
    <Analytics.Impression>
      <Text>Hello</Text>
    </Analytics.Impression>
  );
}

---

Group and record by area

Analytics.Area

Analytics.Areais a component that groups multiple components into one area and records impression and click events together. You can aggregate them into a single log when the specified area is viewed or clicked.

Signature

function LoggingArea({
  children,
  params: _params,
  ...props
}: LoggingAreaProps): import('react/jsx-runtime').JSX.Element;

Example

import { Analytics } from '@apps-in-toss/framework';
import { View, Text } from 'react-native';

// Automatically collects impression or click information within the area.
function TrackElements() {
  return (
    <Analytics.Area>
      <View>
        <Text>Hello</Text>
        <Text>World!</Text>
      </View>
    </Analytics.Area>
  );
}