> ## 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 套餐** - 自定义代码块仅在 Enterprise 套餐中提供。如果不确定自己的套餐，请与你的 TapCart 客户代表确认。
* **你的 Rokt Account ID** - 由你的 Aftersell 客户经理提供。如果你还没有，请与我们联系，我们会发送给你。

<div id="step-1-create-a-custom-block">
  ## 第 1 步：创建自定义代码块
</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 步：添加到你的购买后页面
</div>

在 TapCart 的可视化编辑器中，前往你的 Post Purchase 页面。将你刚刚创建的 Custom Block 拖到页面上，放置在你希望优惠展示的位置。

<div id="step-4-let-us-know">
  ## 第 4 步：告知我们
</div>

完成上述步骤后，请告知你的 Aftersell 客户经理。我们会在我们这边完成一个快速配置，并在一切上线后向你确认。

代码片段初始设置为沙盒模式（`sandbox: true`），会加载测试优惠，以便你预览版位效果。`sandbox` 是代码片段中 launcher 上的一个选项，而不是我们这边的设置——因此，一旦我们确认一切正常，请编辑该 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 中的自定义代码块要求使用 TapCart 的 Enterprise 套餐。

**这会拖慢我的应用吗？**

不会。脚本以异步方式加载，不会阻塞页面渲染。

**我可以选择优惠在页面上显示的位置吗？**

当然可以。保存 Custom Block 后，你可以使用 TapCart 的可视化编辑器将其拖到 Post Purchase 页面上的任意位置。

**我的客户会看到什么样的优惠？**

Rokt Thanks 会为每位客户量身推送来自优质广告主的相关、非侵入式优惠。