Skip to main content

Analytics.screen

Records a screen (page) view event at the moment the user enters a page. Use this for page-view tracking. In a SPA, call it on every route change.

Signature​

screen is a member of the Analytics namespace object. It is not imported as a standalone function.

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

type Primitive = string | number | boolean | null;

type LoggerParams = {
  log_name?: string;
} & {
  [key: string]: Primitive;
};

declare const Analytics: {
  screen: (params?: LoggerParams) => Promise<void> | undefined;
};

Parameters​

NameTypeRequiredDescription
paramsLoggerParams—Key-value pairs to log. Use log_name to identify the event; add any extra keys as event properties. Optional.
params.log_namestring—Event identifier used to distinguish events in the analytics dashboard.
params[key]string | number | boolean | null—Additional context fields. Only Primitive values are allowed.

Returns​

  • Promise<void> | undefined — resolves after the event is logged. The return value can be undefined depending on the environment — do not rely on it.

Permission​

No permission required — Analytics.screen is not bound to any PermissionName. For how permissions work in other namespaces see Guides — Permissions pattern.

Examples​

Minimal​

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

function HomePage() {
  useEffect(() => {
    Analytics.screen({ page: 'home' });
  }, []);

  return <main>Home</main>;
}

Realistic — record additional context on page entry​

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

function ProductDetailPage({ productId, category }: { productId: string; category: string }) {
  useEffect(() => {
    Analytics.screen({
      log_name: 'product_detail_screen',
      page: 'product_detail',
      product_id: productId,
      category,
    });
  }, [productId, category]);

  return <main>Product detail</main>;
}

Try it live​

Run the Analytics.screen card on the Analytics page in sdk-example.

Open in sdk-example

External references​