Rokt Thanks를 위한 사용자 지정 웹 SDK 통합

개요 스토어가 사용자 지정 체크아웃 플로우를 사용하는 경우에도 Rokt Web SDK(작은 JavaScript 스니펫)를 설치해 Rokt Thanks 오퍼를 이용할 수 있어요. SDK 설치는 일반적으로 간단하며 최소한의 기술 지식만 필요해요. 필요한 경우 Aftersell 기술 지원 팀이 전 과정을 도와드릴 수 있어요.

사전 질문

시작하기 전에 원활한 통합을 위해 다음 질문에 답해 보세요:

본인(또는 엔지니어링 팀의 누군가)이 확인 페이지에 코드 스니펫을 추가할 수 있나요?
확인 페이지는 감사 페이지라고도 하며, 체크아웃 직후에 표시돼요.
확인 페이지에서 어떤 사용자 데이터나 속성을 사용할 수 있나요?
구매한 상품과 고객 정보에 관련된 특정 속성에 대한 액세스가 필요해요. 사용 가능한 데이터가 많을수록 Rokt Thanks 오퍼가 더 관련성 있고 정확해져요.
JavaScript로 이 데이터에 쉽게 액세스할 수 있는 방법이 있나요?
예를 들어, 확인 페이지에서 장바구니나 주문 세부 정보를 조회할 수 있나요?

구현 단계

1단계: 검토 및 확인

위 질문을 검토하고 어떤 데이터 속성에 액세스할 수 있는지 확인하세요.
진행할 준비가 되면 accountId가 필요하며, 이는 Aftersell 엔지니어가 제공해 드려요.

계정을 만들려면 다음 정보를 제공해 주세요:

{  
  "firstName": "",  
  "lastName": "",  
  "primaryEmail": "",  
  "websiteUrl": "",  
  "countryCode": "",  
  "brand": ""  
}

2단계: 설치 방법 선택

다음 중 원하는 방법을 선택하세요:

직접 통합을 설치하거나,
Aftersell 엔지니어와 직접 협업하기(지원 설치를 위해 테스트 환경이 필요할 수 있어요).

직접 설치하기로 선택한 경우 Rokt 문서나 아래 요약된 단계를 따르시면 돼요.
Rokt 설정 가이드의 모든 단계가 필요한 것은 아니지만, 참고 자료로 제공돼요.

3단계: 통합 스크립트 설치

a. 스타터 통합 스크립트를 복사하세요(아래 제공). b. Rokt Thanks 오퍼를 표시하려는 페이지(일반적으로 주문 확인 페이지)의 <head></head> 태그 사이에 스크립트를 추가하세요. i. 필요한 모든 고객 및 거래 데이터 속성을 채우세요. ii. "rokt_account_id_here"를 Aftersell 엔지니어가 제공한 accountId로 교체하세요. c. Rokt의 테스트 가이드를 사용해 구현을 테스트하고 배치가 올바르게 로드되는지 확인하세요. d. 저희 팀과 협력해 배치를 브랜드의 룩앤필에 맞게 사용자 지정하세요.

속성 (굵게 및 기울임꼴로 표시된 속성을 적극 권장해요)

const cartItems = [  
        {  
            'itemPrice': '',  
            'itemQuantity': '',  
            'majorcat': '',  
            'majorcatid': '',  
            'minorcat': '',  
            'minorcatid': '',  
            'productname': '',  
            'sku': '',  
        },  
        {  
        ...  
        }  
]

고객/주문 속성

{  
        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: '',  
  
        },

스타터 스크립트

<!-- Main Tag -->  
<script type="module">  
    const target = document.head || document.body;  
    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";  
    target.appendChild(script);  
    await new Promise((resolve) =>  
        window.Rokt  
        ? resolve()  
        : document  
            .getElementById("rokt-launcher")  
            .addEventListener("load", () => resolve())  
    );  
  
    const launcher = await window.Rokt.createLauncher({   
        accountId:'rokt_account_id_here',  
        sandbox: true,  
    });  
      
    const cartItems = [  
        {  
            'itemPrice': '',  
            'itemQuantity': '',  
            'majorcat': '',  
            'majorcatid': '',  
            'minorcat': '',  
            'minorcatid': '',  
            'productname': '',  
            'sku': '',  
        },  
        {  
            'itemPrice': '',  
            'itemQuantity': '',  
            'majorcat': '',  
            'majorcatid': '',  
            'minorcat': '',  
            'minorcatid': '',  
            'productname': '',  
            'sku': '',  
        }  
    ];   
  
    const selection = await launcher.selectPlacements({  
        identifier: 'order_confirmation_page_identifier',  
        attributes: {  
          
        // Required  
        amount: '',  
        firstname: '',  
        lastname: '',  
        billingzipcode: '',  
        Country: '',  
        Language: '',  
        currency: '',  
        cartItems: JSON.stringify(cartItems),  
        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: '',  
  
        },  
    });  
  
</script>

시작하기

홈 페이지

모범 사례

구매 후 업셀

체크아웃 업셀 (Shopify Plus)

감사 페이지

제품 페이지 업셀

Rokt Thanks

전략

분석 및 추적

연동

Aftersell MCP

요금 및 계정

문제 해결

Rokt Thanks를 위한 사용자 지정 웹 SDK 통합

사전 질문

구현 단계

1단계: 검토 및 확인

2단계: 설치 방법 선택

3단계: 통합 스크립트 설치

속성 (굵게 및 기울임꼴로 표시된 속성을 적극 권장해요)

스타터 스크립트

​사전 질문

​구현 단계

​1단계: 검토 및 확인

​2단계: 설치 방법 선택

​3단계: 통합 스크립트 설치

​속성 (굵게 및 기울임꼴로 표시된 속성을 적극 권장해요)

​스타터 스크립트

사전 질문

구현 단계

1단계: 검토 및 확인

2단계: 설치 방법 선택

3단계: 통합 스크립트 설치

속성 (굵게 및 기울임꼴로 표시된 속성을 적극 권장해요)

스타터 스크립트