Log (event) guide

Data logging is the most important tool for improving mini app performance. By recording user behavior and element exposure, you can find drop-off points, improve conversion rates, and refine marketing strategies. The goal is not simply to accumulate data, where the user stopsand what they respond tois key.

---

Quick summary

• Page navigation logs are recorded automatically. No additional setup required.
• Click events and element impression events can be analyzed more precisely if you configure them directly.
• SDK version 0.0.26 or later, you can view the data.

---

Principles for using logging well

• Record only meaningful interactions. Focus on events with real analytical value, such as button clicks, product views, and payment completion.
• Set parameters specifically. For example, button_name: "subscribe_button"if you specify them concretely like this, it becomes clear what drives performance.
• Design around the conversion funnel. Measure drop-off at each stage and use it to improve UI or target promotions.

---

Prerequisites

• SDK version 0.0.26 or later.
• Sandbox or pre-launch data is not provided, and data is aggregated only after the actual launch.
• You can view the data in the analysis screen starting the day after the service launches.

In the SDK, Analytics For how to use the object, please refer to the document on recording user actions.

---

Click event logging example

This is the basic pattern for sending an event when a user clicks a button.

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

document.getElementById('myButton').addEventListener('click', function () {
  Analytics.click({ button_name: 'my_button' });
  // Write any additional actions to run after the click here.
});

• Analytics.clicklogs click events.
• button_nameis the value that identifies the button. Use a name that makes it easy to distinguish the screen and function as much as possible.

---

Element impression event logging example

When a specific element becomes visible on the screen, sending an impression event lets you know which content draws attention.

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

const target = document.getElementById('impressionItem');

const observer = new IntersectionObserver(
  ([entry]) => {
    if (entry.isIntersecting) {
      Analytics.impression({ item_id: target.dataset.itemId });
      observer.disconnect();
    }
  },
  { threshold: 0.1 },
);

observer.observe(target);

• IntersectionObserverexecutes the callback when an element is visible on screen by 10% or more.
• Analytics.impressionlogs impression events.
• item_idis the value that identifies the displayed item.

HTML example

<div id="impressionItem" data-item-id="1234">Element to detect impressions

---

Event parameters

Event parameters are additional information sent along with an event. Even for the same event, depending on which parameters you send together, more detailed analysis is possible in the console.

At this point, log_nameis the event name displayed in the console. In the console's Analysis > Events screen, it serves as the basis for distinguishing events, so it is important to use a name with a clear meaning.

For example product_detail_screenfor a screen event called product_id, product_category if you send parameters like these together, you can check which products or categories are viewed more often.

Example event parameters

When entering the product detail screen, you can pass the information of the product being viewed as parameters along with the screen event.

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

Analytics.screen({
  log_name: 'product_detail_screen',
  product_id: 'prod_123',
  product_name: 'wireless earbuds',
  product_category: 'electronics',
  price: 29900,
});

• log_name is the event name displayed in the console.
• The remaining values are custom parameters saved along with the event.

How does it look in the console

If you send events like above, you can check them in Console > Analysis > Events menu. On the event detail screen, you can see the following information.

• Event occurrence trend (graph)
• Recent occurrences
• List of parameters sent together

  • product_id
  • product_name
  • product_category
  • price

If you select a specific key from the parameter list, you can see the actual value of that parameter and its occurrence status.

Click event parameter example

When a user clicks the product purchase button, you can pass product information along with the click event.

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

Analytics.click({
  log_name: 'purchase_button_click',
  product_id: 'prod_123',
  product_name: 'wireless earbuds',
  product_price: 29900,
  product_category: 'electronics',
});

The event sent this way is aggregated in the console as purchase_button_click event. Through this, the following analyses are possible.

• Which product was clicked the most
• Which product categories lead to conversions
• Compare click patterns by price range

---

View data in the console

Logging data can be found in the management console's Analysis > Events menu. On that screen, you can instantly see click-through rate, impression-to-conversion rate, and major drop-off points.

---

Best practices

• Standardize event names and parameters. Establish naming rules for events within the team and use them consistently. Example: category_action_label format
• Don't record unnecessary events. Too many events become noise. Select them based on the analytical purpose.
• Send additional properties in a structured way. Example: item_id, item_category, price, position Including things like these enables more granular analysis.
• Do not log personal or sensitive information. When using user identifiers, follow anonymization or hashing policies.
• Prepare error handling and retry logic. To account for cases where event transmission fails due to network errors, applying a queuing or retry strategy can reduce data loss.

---

Troubleshooting summary

• When item impressions or clicks are not recorded

  1. Analytics Check whether the call site exists in the DOM.
  2. Make sure the callback registration timing was not too late and that the event was not missed. Place scripts as high in the page as possible.
• When no data appears in the console

  1. Check whether the SDK version is 0.0.26 or higher.
  2. Make sure the service has actually launched. Sandbox data is not provided.
• When event parameters are empty

  1. Check whether the keys and values of the object being sent are correct.
  2. Check whether there are client-side errors such as JSON serialization errors.