> ## 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 优惠的品牌。
概述
如果你的商店使用**自定义 checkout 流程**，你仍然可以通过安装 **Rokt Web SDK**（一小段 JavaScript 代码片段）来使用 Rokt Thanks 优惠。
安装 SDK 通常非常简单，只需极少的技术知识。如有需要，Aftersell 技术支持团队可以在整个过程中为你提供协助。
***
## 前期问题
在开始之前，请回答以下问题，以确保集成顺利进行：
1. **你（或你工程团队中的某位成员）能否在确认页面中添加代码片段？**\
确认页面（也称为**感谢页面**）会在 checkout 完成后立即显示。
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)**测试你的实现**，确保 placement 正确加载。
d. 与我们的团队合作自定义 placement，使其符合你品牌的外观和风格。
## 属性（***加粗并斜体***的属性强烈推荐提供）
```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"}}
```