Last updated 2024年12月5日

DirectOnPage

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- メタタグ -->

  <!-- パート#1 - 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>

  <!-- その他のスクリプトとメタタグ -->
</head>
<body>
  <!-- ここにHTMLコンテンツを配置 -->

  <!-- パート#2 - データ属性が利用可能になり次第、以下のスクリプトを実行してRoktプレースメントを表示 -->
  <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({
```js
        identifier: "payment_page",
        attributes: {
            // 必須
            amount: '',
            firstname: '',
            lastname: '',
            billingzipcode: '',
            Country: '',
            Language: '',
            currency: '',
            cartItems: JSON.stringify(cartItems),
            email: '',
    
            //注文データ
            clientcustomerid: '',
            cartId: '',
            subtotal: '',
            totalTax: '',
            totalShipping: '',
            margin: '',
            paymenttype: '',
            ccbin: '',
    
            //顧客データ
            customerType: '',
            hasAccount: '',
            isReturning: '',
            lastVisited: '',
            isLoyalty: '',
            loyaltyTier: '',
            mobile: '',
            title: '',
            age: '',
            gender: '',
            dob: '',
            billingAddress1: '',
            billingAddress2: '',
            billingCity: '',
            billingState: '',
            billingCountry: '',
            shippingAddress1: '',
            shippingAddress2: '',
            shippingCity: '',
            shippingState: '',
            shippingZipcode: '',
            shippingCountry: '',
        },
    });
  </script>

  <!-- ここにHTMLコンテンツを追加 -->
</body>
</html>

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

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

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