> ## 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를 위한 사용자 지정 웹 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"}}
```