Rokt Thanks 的自定义 Web SDK 集成

概述如果你的商店使用自定义 checkout 流程，你仍然可以通过安装 Rokt Web SDK（一小段 JavaScript 代码片段）来使用 Rokt Thanks 优惠。安装 SDK 通常非常简单，只需极少的技术知识。如有需要，Aftersell 技术支持团队可以在整个过程中为你提供协助。

前期问题

在开始之前，请回答以下问题，以确保集成顺利进行：

你（或你工程团队中的某位成员）能否在确认页面中添加代码片段？
确认页面（也称为感谢页面）会在 checkout 完成后立即显示。
确认页面上有哪些用户数据或属性可用？
我们需要访问与已购商品和客户信息相关的特定属性。可用的数据越多，你的 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 的测试指南测试你的实现，确保 placement 正确加载。 d. 与我们的团队合作自定义 placement，使其符合你品牌的外观和风格。

属性（加粗并斜体的属性强烈推荐提供）

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 步：安装集成脚本

属性（加粗并斜体的属性强烈推荐提供）

入门脚本