> For the complete documentation index, see [llms.txt](https://developers-apps-in-toss.toss.im/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers-apps-in-toss.toss.im/guide/en/analytics/logging.md). # 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 stops**and **what they respond to**is 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. ```javascript 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.click`logs click events. * `button_name`is 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. ```javascript 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); ``` * `IntersectionObserver`executes the callback when an element is visible on screen by 10% or more. * `Analytics.impression`logs impression events. * `item_id`is the value that identifies the displayed item. **HTML example** ```html
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_name`is 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_screen`for 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. ```javascript 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. ```javascript 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. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://developers-apps-in-toss.toss.im/guide/en/analytics/logging.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.