> 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/documentation/api-and-sdk-en/common/growth/analytics/toss-ads-pixel.md). # Toss Ads pixel integration If you're using Toss Ads, you can install Toss Pixel in the App in Toss mini app to collect conversion events. Based on the collected data, you can optimize ad performance. {% hint style="info" %} **Toss Pixel only works in web environments** It's not supported in React Native environments. {% endhint %} ### 1. Get a conversion tracking code Please log in to the Toss Ads Console with the account you were given. Please select Ads Tools > Conversion and Tracking Integration. Please generate a conversion tracking code. Conversion tracking codes are issued per ad account. Please copy the generated conversion tracking code ID. ### 2. Install the pixel script To use the pixel, in the HTML `inside ,` area, please add the script below. ```html ``` ### 3. Integrate events To collect accurate data, you need to call pixel events at the time the event occurs. {% hint style="info" %} **Use one conversion tracking code** You can manage all events with a single conversion tracking code. {% endhint %} | Category | Event name | Event label | | --------- | ------------------------------------------- | --------------- | | Payment | Product detail page view for a payment item | PRODUCT\_VIEW | | | Payment completed | PURCHASE | | | First purchase completed | FIRST\_PURCHASE | | | Subscription completed | SUBSCRIBE | | Ads | In-app ad impression | AD\_IMPRESSION | | Login | Toss login completed | SIGNIN | | Page view | Conversion-driven page view | PAGE\_VIEW | | Custom | Custom event | - | ### 4. Event integration methods **Payment** If you use in-app payments or Toss Pay, you can collect payment data. **Payment product detail page view (`PRODUCT_VIEW`)** Please call it when the product detail page is viewed. ```html ``` **Payment completed (`PURCHASE`)** Please call it immediately after the payment is successfully completed. ```html ``` **First purchase completed (`FIRST_PURCHASE`)** Please call it when the user's first purchase is completed. ```html ``` **Subscription completed (`SUBSCRIBE`)** Please call it when the subscription payment starts. ```html ``` *** **Ads** **In-app ad impression (`AD_IMPRESSION`)** When the ad is displayed (e.g., `show` call immediately after the function call). ```html ``` *** **Login** **Toss login completed (`SIGNIN`)** Please call it when Toss login is completed. ```html ``` *** **Page view** **Conversion-driven page view (`PAGE_VIEW`)** Please call it when a specific page is visited. It's useful when measuring pages closely related to conversions. ```html ``` *** **Custom event** Use this when tracking conversions that do not correspond to standard events. You can freely define the event name. ```html ``` *** **Custom properties** You can add custom\_param1 to custom\_param5 to all events (standard events, custom events). Use this to pass additional information that's hard to express with standard parameters. For example, you can include campaign identifier, promotion code, A/B test group, traffic source, etc. ```html ``` *** ### 5. Test it Using Toss Pixel Helper, you can verify whether pixel events work properly in the local environment. **Install Toss Pixel Helper** Toss Pixel Helper is a Chrome extension that lets you check whether the Toss Pixel installed on your website is working properly. * It automatically detects websites where Toss Pixel is installed. * You can check in real time whether events such as payments, ads, and logins are being collected. [Toss Pixel Helper Chrome extension](https://chromewebstore.google.com/detail/toss-pixel-helper/kbbggbgnfmbpjpaieklnbbjfkjkkpcbi?utm_source=item-share-cb) On the page **Add to Chrome** Please click the button to install it. **Check in the Chrome browser** 1. Please run the project with the command below. {% tabs %} {% tab title="npm" %} ```sh npm run dev ``` {% endtab %} {% tab title="yarn" %} ```sh yarn dev ``` {% endtab %} {% tab title="pnpm" %} ```sh pnpm run dev ``` {% endtab %} {% endtabs %} 2. Please access the local service in the Chrome browser. `http://localhost:5173` 3. Please click the Toss Pixel Helper icon in the top right of the browser. 4. If Toss Pixel is installed correctly, a list of collected events (PURCHASE, PAGE\_VIEW, etc.) will be shown. You can also check whether events are being sent and whether parameters (amount, ID, etc.) are included. *** ### Frequently asked questions
If the SDK script fails to load, will it affect the mini app? No, it won't. If SDK loading fails, only TossPixel calls are ignored, and it does not affect the normal operation of the mini app.
If I refresh on the purchase completion page, will the event be sent twice? It can be sent twice. You need to prevent duplicate calls based on the order ID.
Do I not need to send parameters? Yes, you can. All parameters are optional. It will be collected properly even if you only call the method. However, if you pass the parameters along, you can analyze ad performance more accurately.
--- # 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/documentation/api-and-sdk-en/common/growth/analytics/toss-ads-pixel.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.