> ## 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向けカスタムWeb SDKインテグレーション
> この記事は、Shopify Checkoutを使用していないものの、AftersellのRokt Thanksオファーを活用したいブランド向けです。
概要
ストアで**カスタムチェックアウトフロー**を使用している場合でも、**Rokt Web SDK**（小さなJavaScriptスニペット）をインストールすることで、Rokt Thanksオファーを利用できます。
SDKのインストールは通常シンプルで、必要な技術的専門知識は最小限です。必要に応じて、Aftersellのテクニカルサポートチームがプロセス全体をサポートします。
***
## 事前に確認すべき質問
始める前に、スムーズなインテグレーションのために以下の質問に答えてください。
1. **あなた（またはエンジニアリングチームの誰か）は、確認ページにコードスニペットを追加できますか？**\
確認ページは**サンキューページ**とも呼ばれ、チェックアウト直後に表示されます。
2. **確認ページではどのようなユーザーデータやプロパティが利用できますか？**\
購入商品や顧客情報に関連する[特定のプロパティ](https://www.notion.so/rokt/Custom-Web-SDK-integration-for-Rokt-Thanks-306ee2db8608815899eadad3811b5ff3)へのアクセスが必要です。利用できるデータが多いほど、Rokt Thanksオファーの関連性と精度が高まります。
3. **JavaScriptでこのデータに簡単にアクセスできますか？**\
たとえば、確認ページでカートや注文の詳細を取得できますか？
***
## 実装手順
## ステップ1：確認と承認
* 上記の質問を確認し、どのデータプロパティにアクセスできるかを確定します。
* 進める準備ができたら、**accountId** が必要になります。これはAftersellのエンジニアから提供されます。
アカウントを作成するには、以下の情報をご提供ください。
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
{
"firstName": "",
"lastName": "",
"primaryEmail": "",
"websiteUrl": "",
"countryCode": "",
"brand": ""
}
```
***
## ステップ2：インストール方法を選択する
以下のいずれかを選択します。
* **自分でインテグレーションをインストールする**、または
* **Aftersellのエンジニアと直接連携する**（サポート付きのセットアップにはテスト環境が必要になる場合があります）。
自分でインストールする場合は、[**Roktのドキュメント**](https://docs.rokt.com/developers/integration-guides/getting-started/?layer1=siteMonetization)または以下の要約された手順に従ってください。\
Roktのセットアップガイドのすべての手順が必須というわけではありませんが、参考として提供されています。
***
## ステップ3：インテグレーションスクリプトをインストールする
a. **[スターターインテグレーションスクリプト](#)をコピーします**（以下に記載）。
b. Rokt Thanksオファーを表示したいページ（通常は注文確認ページ）の `` タグの間に**スクリプトを追加します**。
i. 必須の**顧客およびトランザクションデータプロパティ**をすべて入力します。
ii. `"rokt_account_id_here"` を、Aftersellのエンジニアから提供された **accountId** に置き換えます。
c. [Roktのテストガイド](https://docs.rokt.com/developers/integration-guides/web/testing)を使用して**実装をテスト**し、プレースメントが正しく読み込まれることを確認します。
d. 当社のチームと連携して、プレースメントをブランドのルック＆フィールに合わせてカスタマイズします。
## プロパティ（***太字かつ斜体***のプロパティは強く推奨されます）
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
const cartItems = [
{
'itemPrice': '',
'itemQuantity': '',
'majorcat': '',
'majorcatid': '',
'minorcat': '',
'minorcatid': '',
'productname': '',
'sku': '',
},
{
...
}
]
```
顧客／注文プロパティ
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
{
attributes: {
// Required
amount: '', //In $
firstname: '',
lastname: '',
billingzipcode: '',
Country: '',
Language: '',
currency: '',
cartItems: JSON.stringify(cartItems), //From above
email: '',
//Order Data
clientcustomerid: '',
cartId: '',
subtotal: '',
totalTax: '',
totalShipping: '',
margin: '',
paymenttype: '',
ccbin: '',
//Customer Data
customerType: '',
hasAccount: '',
isReturning: '',
lastVisited: '',
isLoyalty: '',
loyaltyTier: '',
mobile: '',
title: '',
age: '',
gender: '',
dob: '',
billingAddress1: '',
billingAddress2: '',
billingCity: '',
billingState: '',
billingCountry: '',
shippingAddress1: '',
shippingAddress2: '',
shippingCity: '',
shippingState: '',
shippingZipcode: '',
shippingCountry: '',
},
```
## スタータースクリプト
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
```