Last updated 2024年9月27日

DirectOnPage

ページに直接Rokt Web SDKを追加する

支払いまたはチェックアウトページの <head> セクションにRokt Web SDKを追加します。Rokt Web SDKをサイトに追加するための完全なガイドはこちらで確認できます。
Roktがプレースメントと関連広告を読み込むために必要なデータ要素を統合します。オファーをパーソナライズし、正確なレポートと分析を提供するために必要なすべての関連属性を含めます。詳細はこちらをご覧ください。

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Meta tags -->

  <!-- Part #1 - Load the Web SDK -->
  <script type="module">
     window.RoktLauncherScriptPromise = new Promise((resolve, reject) => {
        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";

        script.addEventListener('load', () => resolve());
        script.addEventListener('error', (error) => reject(error));

        target.appendChild(script);
     });
  </script>

  <!-- Other scripts and meta tags -->
</head>
<body>
  <!-- Your HTML content here -->

  <!-- Part #2 - As soon as the data attributes are available, execute the below script to display a Rokt placement -->
  <script type="module">
    await window.RoktLauncherScriptPromise;
    
    const launcher = await window.Rokt.createLauncher({
        accountId:'rokt-account-id',
        sandbox: location.href.indexOf("staging_domain_here") > 0,
    });

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

    const selection = await launcher.selectPlacements({
        identifier: "payment_page",
        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>

  <!-- Your HTML content here -->
</body>
</html>

イベントベースの統合のためのイベントリスナーの追加に関する詳細はこちらをご覧ください。

ページに直接Rokt Web SDKを追加する​

ページに直接Rokt Web SDKを追加する