> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tapcart에 Rokt Thanks 설치하는 방법

> TapCart App Studio 설정 가이드

<div id="what-is-rokt-thanks">
  ## Rokt Thanks란 무엇인가요?
</div>

Rokt Thanks는 구매 후 확인 화면에서 고객에게 개인화된, 방해되지 않는 오퍼를 표시해요. 고객 경험에 영향을 주지 않으면서 모든 주문에서 수동적 수익을 창출할 수 있는 간단한 방법이에요.

이 가이드는 Custom Code Block을 사용해 TapCart 모바일 앱에 Rokt Thanks를 설치하는 방법을 안내해요. 설정은 몇 분이면 끝나요.

<div id="before-you-start">
  ## 시작하기 전에
</div>

다음이 필요해요:

* **TapCart Enterprise 요금제** - Custom Code Block은 Enterprise에서만 사용할 수 있어요. 사용 중인 요금제가 확실하지 않다면 TapCart 계정 담당자에게 확인하세요.
* **Rokt Account ID** - Aftersell 계정 관리자가 제공해 드려요. 아직 받지 못했다면 연락 주시면 보내 드릴게요.

<div id="step-1-create-a-custom-block">
  ## 1단계: Custom Block 만들기
</div>

TapCart 대시보드에 로그인하고 App Studio 편집기를 여세요. 새 Custom Block을 만드세요.

<div id="step-2-paste-the-code-snippet">
  ## 2단계: 코드 스니펫 붙여넣기
</div>

Custom Block 편집기에서 Dev 섹션으로 전환하세요. 자리 표시자 코드를 모두 지우고 아래 스니펫을 붙여넣으세요:

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
import * as React from "react"
 
export default function RoktPlacement({
  blockConfig,
  tapcartData,
  translations,
  pageState,
  useActions,
}) {
  const containerRef = React.useRef(null)
 
  React.useEffect(() => {
    const loadRokt = async () => {
      try {
        await new Promise((resolve, reject) => {
          if (document.getElementById("rokt-launcher")) {
            resolve()
            return
          }
          const script = document.createElement("script")
          script.type = "text/javascript"
          script.src =
            "https://apps.rokt.com/wsdk/integrations/launcher.js"
          script.fetchPriority = "high"
          script.crossOrigin = "anonymous"
          script.async = true
          script.id = "rokt-launcher"
          script.addEventListener("load", () => resolve())
          script.addEventListener("error", (error) => reject(error))
          document.head.appendChild(script)
        })
 
        const launcher = await window.Rokt.createLauncher({
          accountId: "YOUR_ACCOUNT_ID",
          sandbox: true,
        })
 
        await launcher.selectPlacements({
          identifier: "TapCart.success",
          attributes: {
            email: tapcartData?.customer?.email || "",
            firstname:
              tapcartData?.customer?.firstName || "",
            lastname:
              tapcartData?.customer?.lastName || "",
          },
        })
      } catch (error) {
        console.error("Rokt SDK failed to load:", error)
      }
    }
 
    loadRokt()
  }, [])
 
  return <div id="rokt-placeholder" ref={containerRef} />
}
```

<Info>
  <div id="replace-your-account-id">
    ### Account ID 교체하기
  </div>

  위 스니펫에서 `accountId: "YOUR_ACCOUNT_ID"` 줄을 찾아 `YOUR_ACCOUNT_ID`를 Aftersell 계정 관리자가 제공한 Account ID로 교체하세요.

  업데이트한 후 Custom Block을 저장하세요.
</Info>

<div id="step-3-add-to-your-post-purchase-page">
  ## 3단계: Post Purchase 페이지에 추가하기
</div>

TapCart의 비주얼 편집기에서 Post Purchase 페이지로 이동하세요. 방금 만든 Custom Block을 페이지로 드래그해 오퍼를 표시하고 싶은 위치에 놓으세요.

<div id="step-4-let-us-know">
  ## 4단계: 저희에게 알려 주세요
</div>

위 단계를 완료했다면 Aftersell 계정 관리자에게 알려 주세요. 저희 쪽에서 간단한 구성을 마무리하고 모든 것이 라이브 상태가 되면 확인해 드릴게요.

스니펫은 처음에 샌드박스 모드(`sandbox: true`)로 설정되어 있어, 배치를 미리 볼 수 있도록 테스트 오퍼가 로드돼요. `sandbox`는 저희 쪽 설정이 아니라 스니펫 자체의 런처 옵션이에요 — 모든 것이 정상적으로 보이는지 확인해 드리면, Custom Block을 편집해 `sandbox: true`를 `sandbox: false`로 변경하고 저장하세요. 그 시점부터 수익이 발생하기 시작해요.

<div id="summary">
  ## 요약
</div>

| 단계 | 작업                                                         |
| -- | ---------------------------------------------------------- |
| 1  | TapCart의 App Studio 편집기에서 Custom Block 만들기                 |
| 2  | Dev 섹션에 코드 스니펫 붙여넣기 (`YOUR_ACCOUNT_ID`를 실제 Account ID로 교체) |
| 3  | Custom Block을 Post Purchase 페이지로 드래그하기                     |
| 4  | 설정을 마무리할 수 있도록 Aftersell 계정 관리자에게 알리기                      |

<div id="frequently-asked-questions">
  ## 자주 묻는 질문
</div>

**TapCart Enterprise를 사용해야 하나요?**

네. App Studio의 Custom Code Block은 TapCart Enterprise 요금제가 필요해요.

**앱이 느려지지 않나요?**

아니요. 스크립트는 비동기적으로 로드되며 페이지 렌더링을 차단하지 않아요.

**페이지에서 오퍼가 표시되는 위치를 선택할 수 있나요?**

물론이에요. Custom Block을 저장한 후, TapCart의 비주얼 편집기를 사용해 Post Purchase 페이지의 원하는 위치로 드래그할 수 있어요.

**고객에게 어떤 종류의 오퍼가 표시되나요?**

Rokt Thanks는 각 고객에게 맞춤화된, 프리미엄 광고주의 관련성 높고 방해되지 않는 오퍼를 제공해요.