Rokt Thanks向けカスタムWeb 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向けカスタムWeb SDKインテグレーション

事前に確認すべき質問

実装手順

ステップ1：確認と承認

ステップ2：インストール方法を選択する

ステップ3：インテグレーションスクリプトをインストールする

プロパティ（太字かつ斜体のプロパティは強く推奨されます）

スタータースクリプト

​事前に確認すべき質問

​実装手順

​ステップ1：確認と承認

​ステップ2：インストール方法を選択する

​ステップ3：インテグレーションスクリプトをインストールする

​プロパティ（太字かつ斜体のプロパティは強く推奨されます）

​スタータースクリプト

事前に確認すべき質問

実装手順

ステップ1：確認と承認

ステップ2：インストール方法を選択する

ステップ3：インテグレーションスクリプトをインストールする

プロパティ（太字かつ斜体のプロパティは強く推奨されます）

スタータースクリプト