> ## 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.

# Как установить Rokt Thanks в Tapcart

> Руководство по настройке для TapCart App Studio

<div id="what-is-rokt-thanks">
  ## Что такое Rokt Thanks?
</div>

Rokt Thanks показывает вашим покупателям персонализированные ненавязчивые предложения на экране подтверждения после покупки. Это простой способ получать пассивный доход с каждого заказа без ущерба для клиентского опыта.

В этом руководстве описано, как установить Rokt Thanks в мобильном приложении TapCart с помощью блока пользовательского кода (Custom Code Block). Настройка занимает всего несколько минут.

<div id="before-you-start">
  ## Перед началом
</div>

Вам понадобится следующее:

* **Тарифный план TapCart Enterprise** — блоки пользовательского кода доступны только на 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` на Account ID, предоставленный вашим аккаунт-менеджером Aftersell.

  После обновления сохраните Custom Block.
</Info>

<div id="step-3-add-to-your-post-purchase-page">
  ## Шаг 3. Добавьте на страницу Post Purchase
</div>

Перейдите на страницу Post Purchase в визуальном редакторе TapCart. Перетащите только что созданный 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   | Создайте Custom Block в редакторе App Studio TapCart                                        |
| 2   | Вставьте фрагмент кода в раздел Dev (замените `YOUR_ACCOUNT_ID` на ваш реальный Account ID) |
| 3   | Перетащите Custom Block на вашу страницу Post Purchase                                      |
| 4   | Уведомите вашего аккаунт-менеджера Aftersell, чтобы мы завершили настройку                  |

<div id="frequently-asked-questions">
  ## Часто задаваемые вопросы
</div>

**Нужен ли мне тариф TapCart Enterprise?**

Да. Блоки пользовательского кода в App Studio требуют тарифного плана Enterprise от TapCart.

**Замедлит ли это моё приложение?**

Нет. Скрипт загружается асинхронно и не блокирует отрисовку страницы.

**Могу ли я выбрать, где на странице появится предложение?**

Конечно. После сохранения Custom Block вы можете перетащить его в любое место на странице Post Purchase с помощью визуального редактора TapCart.

**Какие предложения увидят мои покупатели?**

Rokt Thanks показывает релевантные ненавязчивые предложения от премиальных рекламодателей, подобранные для каждого покупателя.