> ## 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は、購入後の確認画面で、パーソナライズされた邪魔にならないオファーを顧客に表示します。顧客体験に影響を与えることなく、すべての注文から受動的な収益を生み出せるシンプルな方法です。

このガイドでは、カスタムコードブロックを使ってTapCartモバイルアプリにRokt Thanksをインストールする手順を説明します。セットアップはわずか数分で完了します。

<div id="before-you-start">
  ## 始める前に
</div>

以下のものが必要です:

* **TapCart Enterpriseプラン** - カスタムコードブロックはEnterpriseでのみ利用可能です。プランが不明な場合は、TapCartのアカウント担当者に確認してください。
* **RoktアカウントID** - Aftersellのアカウントマネージャーから提供されます。まだお持ちでない場合は、ご連絡いただければお送りします。

<div id="step-1-create-a-custom-block">
  ## ステップ1: カスタムブロックを作成する
</div>

TapCartダッシュボードにログインし、App Studioエディターを開きます。新しいカスタムブロックを作成します。

<div id="step-2-paste-the-code-snippet">
  ## ステップ2: コードスニペットを貼り付ける
</div>

カスタムブロックエディターで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">
    ### アカウントIDを置き換える
  </div>

  上記のスニペットで `accountId: "YOUR_ACCOUNT_ID"` の行を見つけ、`YOUR_ACCOUNT_ID` をAftersellのアカウントマネージャーから提供されたアカウントIDに置き換えてください。

  更新したら、カスタムブロックを保存します。
</Info>

<div id="step-3-add-to-your-post-purchase-page">
  ## ステップ3: Post Purchaseページに追加する
</div>

TapCartのビジュアルエディターでPost Purchaseページに移動します。先ほど作成したカスタムブロックをページ上にドラッグし、オファーを表示したい場所にドロップします。

<div id="step-4-let-us-know">
  ## ステップ4: ご連絡ください
</div>

上記の手順が完了したら、Aftersellのアカウントマネージャーにお知らせください。当社側で簡単な設定を最終調整し、すべてが公開されたことを確認してご連絡します。

スニペットは最初サンドボックスモード(`sandbox: true`)に設定されており、テストオファーが読み込まれるため、プレースメントをプレビューできます。`sandbox` はスニペット内のランチャーのオプションであり、当社側の設定ではありません。したがって、すべてが正しく表示されていることを確認したら、カスタムブロックを編集し、`sandbox: true` を `sandbox: false` に変更して保存してください。その時点から収益が発生し始めます。

<div id="summary">
  ## まとめ
</div>

| ステップ | アクション                                                        |
| ---- | ------------------------------------------------------------ |
| 1    | TapCartのApp Studioエディターでカスタムブロックを作成する                        |
| 2    | Devセクションにコードスニペットを貼り付ける(`YOUR_ACCOUNT_ID` を実際のアカウントIDに置き換える) |
| 3    | カスタムブロックをPost Purchaseページにドラッグする                             |
| 4    | 最終セットアップのため、Aftersellのアカウントマネージャーに知らせる                       |

<div id="frequently-asked-questions">
  ## よくある質問
</div>

**TapCart Enterpriseプランが必要ですか?**

はい。App StudioのカスタムコードブロックにはTapCartのEnterpriseプランが必要です。

**アプリが遅くなりませんか?**

いいえ。スクリプトは非同期で読み込まれるため、ページのレンダリングをブロックしません。

**オファーの表示位置は選べますか?**

もちろんです。カスタムブロックを保存すれば、TapCartのビジュアルエディターを使ってPost Purchaseページの任意の位置にドラッグできます。

**顧客にはどのようなオファーが表示されますか?**

Rokt Thanksは、各顧客に合わせて調整された、プレミアム広告主による関連性の高い、邪魔にならないオファーを配信します。