Last updated 2023年9月12日

DirectOnPage

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

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

<!-- メインタグ -->
<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のアカウントIDを入力',
        sandbox: location.href.indexOf("ここにステージングドメインを入力") > 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: {
        
        // 必須
        amount: '',
        siteCountry: '',
        siteLanguage: '',
        currency: '',
        cartItems: JSON.stringify(cartItems),
        email: '',

        // 注文データ
        clientcustomerid: '',
        cartId: '',
        subtotal: '',
        totalTax: '',
        totalShipping: '',
        margin: '',
        paymenttype: '',
        ccbin: '',

        // 顧客データ
        customerType: '',
        hasAccount: '',
        isReturning: '',
        lastVisited: '',
        isLoyalty: '',
        loyaltyTier: '',
        mobile: '',
        title: '',
        firstname: '',
        lastname: '',
        age: '',
        gender: '',
        dob: '',
        billingAddress1: '',
        billingAddress2: '',
        billingCity: '',
        billingState: '',
        billingZipcode: '',
        billingCountry: '',
        shippingAddress1: '',
        shippingAddress2: '',
        shippingCity: '',
        shippingState: '',
        shippingZipcode: '',
        shippingCountry: '',

        },
    });

    // オプションのイベントリスナー
    selection.on('PLACEMENT_INTERACTIVE').subscribe(() => {
        selection.context.pageVariantName.then((val) => {
            console.log(val)
        });
    });
    selection.on('POSITIVE_ENGAGEMENT').subscribe(() => {
        selection.context.pageVariantName.then((val) => {
            console.log(val)
        });
    });
</script>

イベントベースの統合のためのイベントリスナーの追加に関する詳細情報は、こちらで見つけることができます。

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

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