Last updated

ウェブ SDK 統合ガイド

このページでは、Rokt Ecommerce の Web SDK を実装し、チェックアウトでより関連性のある顧客体験を提供する方法を説明します。SDK は、設定されたページで実行し、ユーザーおよび取引データを Rokt に返してパーソナライズおよび測定を行うことで、これらの体験（たとえば、確認ページにオファーを表示する）をトリガーして追跡することができます。

あなたの専任のアカウント担当者が、Web SDK のためのアカウント設定を手伝ってくれます。彼らは、SDK を初期化するために必要な API キー と、顧客に最も関連性の高い体験を提供するために必要な追加のリソースを提供します。

注記

これらの指示を完了するには、開発リソースが必要です。追加の支援が必要な場合は、Rokt アカウントマネージャーにお問い合わせください。Shopify ストアは Rokt Ecommerce アプリを使用して数秒で Rokt プレースメントを設定できます — コーディングは不要です！

注記

まず、開発環境で SDK を実装するために Rokt アカウントマネージャーと協力してください。これにより、統合をリリースする前に、徹底的にテストおよびトラブルシューティングができます。

ファーストパーティドメインの設定

Rokt は、SDK をサイトに統合する際にファーストパーティドメインを使用することを推奨します。これにより、Rokt SDK が Rokt の API に呼び出しを行う際に自社のドメインを使用し、お客様にシームレスな体験を提供し、コンテンツがブロックされるリスクを最小限に抑えることができます。

SDK 統合のためのファーストパーティドメインの設定方法について学ぶには、First Party Domain Integration を参照してください。

1. Rokt SDK の初期化

SDK を初期化するには、SDK 初期化スクリプト全体をコピーしてサイトに貼り付けます。

サイトはそれぞれ異なりますが、Rokt はサイトのすべてのページに SDK 初期化スクリプトを含めることをお勧めします。これにより、常に SDK が初期化され、オファー配信の遅延を最小限にし、ユーザー識別の正確性を最大化します。

シングルページアプリケーション (SPA): あなたのウェブサイトが SPA である場合、初期化スクリプトをメインの index.html ページ、または他のコンテンツがレンダリングされる主要な場所の <head> に挿入します。
マルチページアプリケーション (MPA): あなたのウェブサイトが MPA で、テンプレートベースのレンダリングシステム（最も一般的）を使用している場合、初期化スクリプトを主要な共有レイアウトファイルに配置します。テンプレートベースのレンダリングシステムを使用していない場合は、ウェブサイトの各 HTML ファイルにスクリプトを配置します。

各ページがスクリプトを含んでいる場合でも、ブラウザのキャッシュにより、既定では SDK はキャッシュから読み込まれ、ウェブサイトの各ページロード時に読み込まれるわけではないことに注意してください。

SDK 初期化スクリプト

<script type="text/javascript">

// Rokt APIキーを入力
const API_KEY = "YOUR_API_KEY";

// ファーストパーティドメイン構成を使用している場合、カスタムサブドメインを入力（オプション）
const ROKT_DOMAIN = "https://apps.rokt-api.com";

window.mParticle = {
    config: {
        // データ環境を設定：
        // 統合のテスト中の場合はisDevelopmentModeをtrueに設定。 
        // 本番データの準備が整った場合はisDevelopmentModeをfalseに設定。
        isDevelopmentMode: true,
        // 現在のユーザーを特定：
        // ユーザーのメールアドレスがない場合、null値を渡すことができます
        identifyRequest: {
            userIdentities: {
                // ハッシュされていないメールアドレスを使用している場合は、'email'に設定。
                email: 'j.smith@example.com',
                // ハッシュされたメールアドレスを使用している場合は、`email`ではなく'other'に設定。
                other: 'sha256 ハッシュされたメールがここに入ります'
            }
        },
        // ユーザーがメールアドレスで特定されている場合、追加のユーザー属性を設定。
        identityCallback: function(result) {
            if (result.getUser()) {
                result.getUser().setUserAttribute('attribute-key', 'attribute-value');
            }
        }
    }
};

// SDKをロード
(function(e) { window.mParticle = window.mParticle || {}; window.mParticle.EventType = { Unknown: 0, Navigation: 1, Location: 2, Search: 3, Transaction: 4, UserContent: 5, UserPreference: 6, Social: 7, Other: 8, Media: 9 }; window.mParticle.eCommerce = { Cart: {} }; window.mParticle.Identity = {}; window.mParticle.Rokt = {}; window.mParticle.config = window.mParticle.config || {}; window.mParticle.config.rq = []; window.mParticle.config.snippetVersion = 2.6; window.mParticle.ready = function(e) { window.mParticle.config.rq.push(e); }; ["endSession", "logError", "logBaseEvent", "logEvent", "logForm", "logLink", "logPageView", "setSessionAttribute", "setAppName", "setAppVersion", "setOptOut", "setPosition", "startNewSession", "startTrackingLocation", "stopTrackingLocation"].forEach(function(e) { window.mParticle[e] = function() { var t = Array.prototype.slice.call(arguments); t.unshift(e); window.mParticle.config.rq.push(t); }; }); ["setCurrencyCode", "logCheckout"].forEach(function(e) { window.mParticle.eCommerce[e] = function() { var t = Array.prototype.slice.call(arguments); t.unshift("eCommerce." + e); window.mParticle.config.rq.push(t); }; }); ["identify", "login", "logout", "modify"].forEach(function(e) { window.mParticle.Identity[e] = function() { var t = Array.prototype.slice.call(arguments); t.unshift("Identity." + e); window.mParticle.config.rq.push(t); }; }); ["selectPlacements","hashAttributes","setExtensionData"].forEach(function(e) { window.mParticle.Rokt[e] = function() { var t = Array.prototype.slice.call(arguments); t.unshift("Rokt." + e); window.mParticle.config.rq.push(t); }; }); var t = window.mParticle.config.isDevelopmentMode ? 1 : 0, n = "?env=" + t, a = window.mParticle.config.dataPlan; if (a) { var o = a.planId, r = a.planVersion; o && (r && (r < 1 || r > 1e3) && (r = null), n += "&plan_id=" + o + (r ? "&plan_version=" + r : "")); } var i = window.mParticle.config.versions, s = []; i && Object.keys(i).forEach(function(e) { s.push(e + "=" + i[e]); }); var c = document.createElement("script"); c.type = "text/javascript"; c.async = !0; window.ROKT_DOMAIN = ROKT_DOMAIN || 'https://apps.rokt-api.com'; mParticle.config.domain = ROKT_DOMAIN.split('//')[1]; c.src = ROKT_DOMAIN + "/js/v2/" + e + "/app.js" + n + "&" + s.join("&"); var l = document.getElementsByTagName("script")[0]; l.parentNode.insertBefore(c, l); })(API_KEY);
</script>

サイトに初期化スクリプトを挿入する際には、次の設定を行ってください：

1.1 Rokt APIキーを入力

API_KEY を専任のRoktアカウントマネージャーから提供されたRokt APIキーに設定します。

あなたのRokt APIキーは、Roktアカウント担当者から提供される一意の認証情報で、あなたのサイトがRokt SDKと安全に接続し、やり取りすることを可能にします。

1.2 カスタムサブドメインを入力（オプション）

独自のドメインを通じてSDKをルートする場合は、First-Party Domain Configurationの指示に従い、ROKT_DOMAIN を作成したサブドメインに設定します。

カスタムサブドメインを使用することで、Rokt SDKを自分のドメインを経由してルートすることが可能となり、ブラウザや広告ブロッカーによって広告やデータがブロックされるリスクを減らすことができます。

この手順はオプションです。ROKT_DOMAIN を https://apps.rokt-api.com に設定したままでも構いませんが、Rokt SDKへのリクエストは apps.rokt-api.com を経由してルートされます。

1.3 データ環境を設定する

Rokt は二つのデータ環境を維持しています: テスト目的でのデータラベル付けと保存のための開発環境と、実際の顧客活動を収集するための本番環境です。

まだ Rokt SDK をテスト中の場合は、isDevelopmentMode を true に設定してください。

テストが完了し、実際の顧客活動の収集を開始したい場合は、isDevelopmentMode を false に設定してください。

1.4 ユーザーを識別する

SDK が初期化されると、収集されたデータが正しくこのユーザーに帰属し、その行動に基づいて最も関連性の高い広告が表示されるように、現在のユーザーを識別することができます。

SDK 初期化スクリプトには identifyRequest というオブジェクトが含まれています:

identifyRequest: {
    userIdentities: {
        // ユーザーの生のメールアドレスを 'email' に設定
        email: 'j.smith@example.com',
        // ユーザーのハッシュ化されたメールアドレスを 'other' に設定
        other: 'ここに SHA256 ハッシュ化されたメールが入ります'
    }
}

identifyRequest 内で、ユーザーのメールアドレスを、生であれば email のフィールドに、SHA256 でハッシュ化されていれば other に渡します。

初期化スクリプトには、ユーザーのメールアドレスが初期化の時点で無くても、常に identifyRequest を含めてください。

注記

ユーザーのメールアドレスを持っていない場合は、null 値を渡してください。SDK は初期化され、その後 2. ユーザーを識別するの手順に従ってユーザーを識別することができます。

1.5 追加のユーザー属性を設定する

初期化スクリプトには、ユーザーがメールアドレスで正常に識別された場合に、追加のユーザー属性を設定するためのコールバック関数が含まれています:

// identityCallback は identifyRequest が成功したかどうかを判断します。
identityCallback: function(result) {
    if (result.getUser()) {
        // ユーザーが識別された場合、setUserAttribute で追加のユーザー属性を設定します。
        result.getUser().setUserAttribute('attribute-key', 'attribute-value');
    }
}

ユーザーのために収集することをRoktが推奨する属性のリストについては、Recommended user attributes を参照してください。

2. ユーザーを識別する

初期化中に、SDKはユーザーのメールアドレスを使用してidentifyRequestをRoktに送信し、現在のユーザーを識別します。

初期化時にユーザーを識別することに加えて、SDKが初期化された後にユーザーがメールアドレスを提供するたびに（たとえば、ログイン時や購入時など）、メールアドレスをRoktに渡すためにidentifyメソッドを呼び出す必要があります。これにより、データが現在のユーザーに正確に帰属されます。

ユーザーを識別するには、最初にユーザーのメールアドレスを含む identifyRequest オブジェクトを作成します。

未ハッシュのメールアドレスを提供する場合は、以下を使用します:

const identifyRequest = { 
    userIdentities: { 
        email: 'j.smith@example.com' 
    }
};

ハッシュされたメールアドレスを提供する場合は、以下を使用します:

const identifyRequest = { 
    userIdentities: { 
        other: 'sha256 hashed email goes here' 
    }
};

次に、ユーザーを識別する際に追加入力属性を設定するオプションとしてコールバック関数を作成します。identifyRequest が成功した場合、setUserAttribute で設定したユーザー属性はそのユーザーに割り当てられます。

const identityCallback = function(result) { 
    if (result.getUser()) { 
        result.getUser().setUserAttribute('attribute-key', 'attribute-value');
    }
};

ユーザーのために収集することをRoktが推奨する属性のリストについては、Recommended user attributes を参照してください。

最後に、identifyRequest と identityCallback を作成し、追加の属性を設定したら、それらを identify メソッドに渡して呼び出します:

mParticle.Identity.identify(identifyRequest, identityCallback);

例えば、Jane Smith という名前のユーザーをメールアドレス j.smith@example.com で識別する場合（かつ、メールアドレスをハッシュする必要がない場合）には、次のようにします:

const identifyRequest = { 
    userIdentities: { 
        email: 'j.smith@example.com' 
    }
};

const identityCallback = function(result) { 
    if (result.getUser()) { 
        result.getUser().setUserAttribute('firstname', 'Jane');
        result.getUser().setUserAttribute('lastname', 'Smith');
    }
};

mParticle.Identity.identify(identifyRequest, identityCallback);

3. ユーザー属性の設定

上記の例は、SDK の初期化時にユーザーが識別されるときと、ユーザーがメールアドレスを提供した後に識別されるときにユーザー属性を設定する方法を示しています。

ただし、ユーザーが識別された後は、いつでもユーザー属性を設定できます。これらの属性は、広告配置やログされたイベントに含まれます。また、ユーザー属性を直接設定することもできます。配置を挿入するとき。

ユーザー属性を設定するには、次を実行します:

// 現在のユーザーを取得するには、getCurrentUser を呼び出します。
const currentUser = mParticle.Identity.getCurrentUser();

// 現在のユーザーを `currentUser` という const に設定した後、次のようにユーザー属性を設定できます:
currentUser.setUserAttribute("user-attribute-key", "user-attribute-value");

// リスト属性を設定するには、属性の値を文字列の配列に設定します。例えば:
currentUser.setUserAttribute("favorite-genres", ["documentary", "comedy", "romance", "drama"]);

// ユーザー属性を削除するには、removeUserAttribute を呼び出し、属性名を渡します。すべてのユーザー属性は同じキー空間を共有します。
currentUser.removeUserAttribute("attribute-to-remove");

推奨されるユーザー属性

Roktは以下のユーザー属性をできるだけ多く設定することを推奨しています：

ユーザー属性キー	例の値	備考
firstname	John	顧客の名前。
lastname	Doe	顧客の姓。
mobile	3125551515	電話番号は `1112345678` または `+1 (222) 345-6789` の形式でフォーマットできます。
age	33	顧客の年齢。
dob	19900717	生年月日。`yyyymmdd`の形式でフォーマット。
gender	M	顧客の性別。例えば、`M`, `Male`, `F`, または `Female`。
city	Brooklyn	顧客の市。
state	NY	顧客の州。
zip	11201	顧客の郵便番号。
title	Mr	顧客の肩書。例えば、`Mr`, `Mrs`, `Ms`。
language	en	購入に関連する言語。
value	52.25	顧客の価値。
predictedltv	136.23	顧客の予測される生涯価値の合計。

すべてのユーザー属性（リスト属性およびタグを含む）は、異なる名前を持つ必要があります。

4. ファネルイベントを追跡する

Rokt SDKを使用すると、ユーザーがサイトを利用する過程を説明するデータを収集するイベント追跡を実装できます。このデータを使用して、ユーザーの体験を最適化することができます。

SDKで追跡できる主なイベントタイプは3つあります:

ページビューイベント: サイトのページが読み込まれたときにトリガーできるイベントです。
カスタムイベント: サイト特有の情報を追跡するために作成する自由形式のイベントです。
コマースイベント: アイテムのカートへの追加や最終購入など、ショッピング体験の異なるステージを説明できるeコマース特有のイベントです。

Rokt SDKと初めて統合するときは、ページビュー追跡を実装することから始めてください。カスタムイベントとコマースイベントの追跡について詳しくは、付録を参照してください。

ページビューを追跡する

追跡できる最も基本的なイベントタイプの一つはページビューです。

ページビューをログに記録するには、SDKが初期化された後にlogPageView()メソッドを使用します。

以下の例では、イベントには次のものが含まれます:

URLパスの最後のセグメントから取得されたscreen_name（バックアップとして「home」）。
現在のページの完全なurl。
document.referrerから取得されたreferring-page。

これは、ページ識別子を手動で指定する必要なく、サイト全体のユーザーのナビゲーションを追跡するのに便利です。

// SDKが完全に読み込まれるのを待ってからイベントをログに記録する
window.mParticle.ready(function() {
    mParticle.logPageView(
        // イベント名: "page view" はログされるイベントのタイプを識別します
        "page view",
        {
            // URLパスの最後のセグメントをスクリーンネームとしてキャプチャします,
            // 例: "/products/shoes" → "shoes"。パスが空の場合はデフォルトで"home"になります。
            "screen_name": location.pathname.split("/").filter(Boolean).pop() || "home",

            // 現在のページの完全なURLを記録します（プロトコル、パス、クエリ、ハッシュを含む）
            "url": window.location.toString(),

            // ユーザーをこのページにリファーしたページのURLをキャプチャします,
            // 利用可能な場合。この機能はページまたはサイト間のユーザーナビゲーションを追跡するのに役立ちます。
            "referring-page": document.referrer
        }
    );
});

5. プレースメントを表示する

Rokt SDKの主な価値は、selectPlacements メソッドを通じて解放されます。これは、提供された属性に基づいてお客様にとって非常に関連性の高いプレースメントを提供します。

Roktの統合が初期化されたら、プレースメントを提供したいサイトのページやコンポーネントで selectPlacements メソッドを呼び出すことができます。ページが読み込まれ、SDKが初期化され、以下のコードサンプルに示されている推奨属性が利用可能になったら、すぐに selectPlacements を呼び出すべきです。

また、以下のスニペットに示されているように、identifier にページ識別子を渡すこともできます。これは、Roktプレースメントが追加されるページを一意に識別し、複数のページで同じURLを使用するマルチステップのチェックアウトフローがある場合に便利です。ページ識別子には任意の値を使用できますが、いくつかの例を以下に示します：

stg.rokt.conf - ステージング（またはテスト）環境の確認ページ。
prod.rokt.conf - 本番環境の確認ページ。
stg.rokt.payments - ステージング（またはテスト）環境の支払いページ。
prod.rokt.payments - 本番環境の支払いページ。

selectPlacements を呼び出す際には、少なくとも email、firstname、lastname、billingzipcode、confirmationref 属性を提供するべきです。追加の属性は、例に示されています。

注記

selectPlacements 呼び出しの前に currentUser.setUserAttribute を使用して設定されたユーザー属性と、selectPlacements 呼び出しで設定された属性の両方がRoktに送信されます。ただし、ユーザー属性を selectPlacements 呼び出しの前とその中で2回設定した場合、selectPlacements 呼び出しで設定された最新の値が使用されます。

例えば、currentUser.setUserAttribute("firstname", "Johnathan") を使ってユーザーのファーストネームを設定し、さらに selectPlacements の attributes オブジェクト内に "firstname": "John" を含めた場合、Roktに送信される値は "John" です。

mParticle.ready(async function () {
    const selection = await window.mParticle.Rokt.selectPlacements({
        identifier: "yourPageIdentifier",
        attributes: {
            "email": "j.smith@example.com", // チェックアウト時に使用される顧客のメールアドレス
            "firstname": "Jenny",           // 顧客の名
            "lastname": "Smith",            // 顧客の姓
            "confirmationref": "54321",     // 注文/確認参照番号
            "billingzipcode": "90210",      // 顧客の請求先郵便番号または郵便番号
            "amount": "100.00",             // 小数の取引額 例: 300.5
            "paymenttype": "VISA",          // 例: ギフトカード | Chase, Visa
            "ccbin": "372888",              // クレジットカードのBIN 例: 372888
            "mobile": "123-456-7890",       // 顧客の携帯電話番号
            "country": "USA",               // ISO Alpha-2 国コード
            "language": "en",               // ISO 639-1 2文字の言語コード
            "currency": "USD",              // 取引通貨 例: USD
            "billingaddress1": "",          // 顧客の住所の行1
            "billingaddress2": "",          // 顧客の住所の行2
            "age": "29",                    // 顧客の年齢
            "gender": "f",                  // 顧客の性別 m / f
            "cartItems": JSON.stringify(["item 1", "item 2", "item 3"]), // カートの内容を文字列化
        
            // ここで取引に関連する追加属性を渡すことができます
            // 属性の完全なリストは、以下のリンクを参照してください
            "shippingtype": "Priority Express"
        }
    });
});

プレースメントの登録

プレースメントイベントに登録することで、プレースメントが準備できたときや、顧客がオファーに関与したときにトリガーされる通知を受け取ることができます。

mParticle.ready(async function () {
  // selection
  const selection = await window.mParticle.Rokt.selectPlacements({
    // 属性を追加
  });
 
  // プレースメントがインタラクティブ/表示可能になったときにリッスン
  selection.on('PLACEMENT_INTERACTIVE').subscribe(() => {
    // プレースメントがインタラクティブになった後に実行するロジック
  });
 
  // ユーザーがオファーに対してポジティブまたはネガティブな関与をしたときにリッスン
  selection.on('OFFER_ENGAGEMENT').subscribe(function () {
    // オファーに関与した後に実行するロジック
  });
});

プレースメントを閉じる

サイトがシングルページアプリケーションの場合、selectPlacementsを呼び出してプレースメントを提供した後、ユーザーが別のページに移動したらプレースメントを閉じることが重要です。これにより、ユーザーが戻ったときにプレースメントがまだ表示されることを防ぎます。

プレースメントを閉じて削除するには、作成したプレースメントオブジェクトで.close()を呼び出します。

// 'selection'というプレースメントを閉じます
selection.close();

:::注意サポートされている属性の完全なリストについては、データ属性を参照してください。 :::

専任のRoktチームがあなたのプレースメントのレイアウトを設定し、ブランドとUXスタイルガイドに合わせます。

6. 統合のテスト

Roktは、SDKが正しく初期化され、イベントが正常にログされることを確認するために、新しい統合をテストすることを推奨します。

新しいブラウザウィンドウを開きます。
ブラウザのデベロッパーツールパネルを開きます。ほとんどのブラウザでは、画面を右クリックしてInspectをクリックすることでこれを行えます。
デベロッパーツールパネルから、Networkタブに移動し、フィルターバーに experiences と入力します。
SDKを統合したサイトとページに移動します。
- 注意: ブラウザによって/experiencesの呼び出しが記録されるように、サイトに移動する前にデベロッパーツールパネルを開いておいてください。
デベロッパーツールパネルのNetworkタブで、少なくとも1つの/experiences リクエストが表示されるはずです。これはWeb SDKが正常に読み込まれたことを示しています。
その /experiences リクエストをクリック（ステータスが200であるべき）し、Payload/Request タブでRoktと共有されているデータを確認します。
- 注意: テスト中にステータス204の別の/experiences呼び出しが表示されることがあります。ステータス200の呼び出しでチェックを行っていることを確認してください。

トラブルシューティング

Rokt Web SDK は、コンテキストに基づくエラー報告を提供します。統合を検証する際に問題がある場合、問題をデバッグする最良の方法は、ブラウザのデベロッパーツールパネルの Console タブを使用することです。

Rokt SDK に関連しないエラーが発生している可能性もありますが、確認すべき一般的な Rokt SDK のエラーには以下のものがあります。

構文エラー

統合コードにカンマが欠けていないことを確認してください。

構文エラーを確認するには:

ブラウザのデベロッパーツールパネルに移動し、Console タブを選択します。
Web SDK を配置したファイルにエラーがある場合、それはコンソールに記録されます。ファイルをクリックして、コードと報告されたエラーを参照します。
ファイル内にエラーが示されています。特に、すべての属性が下記のようにカンマで区切られていることを確認してください。

不正:

email: ''
emailsha256: '',

正しい:

email: '',
emailsha256: '',

初期化エラー

SDKの初期化スクリプトが正しいページに配置されていることを確認してください。
タグマネージャーを使用して統合した場合、タグトリガーを構成し、初期化が正しいページで読み込まれるように設定し、selectPlacementsとコンバージョンログ記録のタグがSDK初期化後に発火することを確認してください。

付録

上記の指示に従ってプレースメントとページビューの追跡を実装した後、追加のイベントトラッキングを実装したい場合があります。

カスタムイベントを追跡する

logEventを呼び出し、イベント名、イベントタイプ、およびイベントのカスタム属性のリストを含むJSONオブジェクトを渡すことで、カスタムイベントを定義して追跡できます。

サポートされているカスタムイベントタイプは以下です:

Navigation
Location
Search
Transaction
UserContent
UserPreference
Social
Other

イベントタイプはオプションです。イベントタイプを省略した場合、イベントは単純に unknown として分類されます。

mParticle.logEvent(
    // イベント名
    'event-name',
    // イベントタイプ
    mParticle.EventType.Other,
    // イベントをさらに説明するためのカスタムイベント属性を含める
    {
        'custom-attribute-name': 'custom-attribute-value'
    }
);

コマースイベントのトラッキング

コマースイベントをトラッキングするには、以下の3つのステップが必要です：

createProduct メソッドを使用して、購入される製品を変数内で定義します。
トランザクションの概要を含むオブジェクトを作成します。
あなたの製品定義を配列にまとめ、トランザクションの概要と共に logProductAction メソッドを呼び出します。

1. 製品を定義する

製品を定義する際には、以下の属性と、キー/値ペアとしてカスタム製品属性を定義できるオプションのJSONオブジェクトを渡して、 mParticle.eCommerce.createProduct メソッドを使用して新しい製品を作成します。

注記

製品属性は以下に示す順序で追加する必要があります。任意の属性に対して値がない場合は、その値を null に設定する必要があります。カスタム属性のための任意のJSONオブジェクトを除き、どの属性もスキップしたり省略したりすることはできません。

製品属性	説明	データ型	必須
Name	購入される製品の名前。	String	Yes
SKU	製品の在庫管理単位。	String	Yes
Price	製品の価格。	Decimal	Yes
Quantity	ユニット数。	Integer	No
Variant	特定の製品バージョン、例えばサイズや色などのバリエーション。	String	No
Category	製品が属するカテゴリー。	String	No
Brand	製品のブランド名。	String	No
Position	位置。	String	No
Coupon code	製品のクーポンコード。	String	No

var product1 = mParticle.eCommerce.createProduct(
    'Double Room - Econ Rate',  // Name (required)
    'econ-1',                   // SKU（必須）
    100.00,                     // 価格（必須）
    4,                          // 数量
    'variant',                  // バリアント
    'room',                     // カテゴリー
    'lodge-o-rama',             // ブランド
    'banner',                   // 設置位置
    null,                       // クーポンコード
    // 任意のカスタム属性をキー/バリューのペアのオブジェクトとして追加
    {
        'ocean-view': true,
        'balcony': false
    }     
);

2. トランザクションを要約する

transactionAttributes というオブジェクトでトランザクションの要約を作成します。

var transactionAttributes = {
    Id: 'foo-transaction-id',
    Revenue: 430.00,
    Tax: 30
};

3. コマースイベントを記録する

コマースイベントを記録するには、mParticle.eCommerce.logProductAction を呼び出し、ProductActionType を下記のサポートされているアクションタイプのいずれかに設定します。

商品定義は配列に含めます。1つの商品の定義しかない場合でも、例に示されているように配列に含めます。

コマースイベントのカスタムイベント属性を customAttributes で設定することもできます。

// "商品アクション" には AddToCart や Checkout など、いくつかのタイプがサポートされています。この例では Purchase 商品アクションを使用しています。
mParticle.eCommerce.logProductAction(
    // 記録される商品アクションのタイプ。この例では "Purchase" です
    mParticle.ProductActionType.Purchase,
    // ステップ1で作成した商品定義を含む配列
    [product1],
    // コマースイベントを説明するカスタム属性
    customAttributes = { 
        'sale': true
    },
    // mParticleによるRoktの統合のためにカスタムフラグを指定するためのスペースです。Rokt Ecommerceの顧客はここで 'null' を入力して無視できます。
    null, 
    // ステップ2で作成した transactionAttributes オブジェクト
    transactionAttributes
);

logProductAction メソッドを呼び出す際には、商品アクションのタイプを指定する必要があります。

サポートされているプロダクションアクションタイプ

AddToCart
RemoveFromCart
Checkout
CheckoutOption
Click
ViewDetail
Purchase
Refund
AddToWishlist
RemoveFromWishlist
Unknown

追加の統合ランチャーオプションの渡し方

Rokt SDK は統合の動作を設定するための追加のオプションパラメータを受け入れることができます。

オプションのランチャーオプションを含めるには、初期化スクリプト内の windiow.mParticle.config.launcherOptions オブジェクトに含めます。

// 上記ステップ1の初期化スクリプトの一部としてこれを含めます
windiow.mParticle.config.launcherOptions = {
    noFunctional: true,
    // 設定できるすべてのオプションのランチャーオプションを以下に示します
};

カスタマーのクッキー設定を管理する

このオプションを使用して、通常はパーソナライズや強化されたチェックアウト体験のために使用される機能性クッキーを無効にすることで、顧客のオプトアウトの設定を尊重します。

パラメータ	タイプ	デフォルト
`noFunctional`	boolean	`false`

機能性クッキーに対するユーザーの選好を管理するためのブールフラグです。機能性クッキーを使用すると、自社サイト上で最も関連性があり、最適な顧客体験を提供でき、パーソナライズが強化されます。また、チェックアウト内の高度な機能（例：アップセルの販売）を支えるのにも役立ちます。実際には、値を true に設定することで、Rokt が任意のファーストパーティトラッキングIDを使用することを防ぎます。

より詳細な議論については、クッキー同意フラグをご覧ください。

シングルページアプリケーションでのページロードパフォーマンスの測定

仮想ページのロード時のタイムスタンプを提供し、RoktがSPAでのパフォーマンスを正確に測定し、顧客体験に影響を与える可能性のある異常を検出できるようにします。

パラメータ	タイプ	デフォルト
`pageInitTimestamp`	Date	`PerformanceNavigationTiming.responseStart`

Integration LauncherがSPAの仮想ページで初期化される場合、この値を使用してページが初期化される時点のタイムスタンプを提供できます。これにより、ユーザーがそのページに到達するまでにかかった時間などの外部要因を除いた、トリガーとなったページに対するロードパフォーマンスをRoktが正確に測定できるようになります。この情報により、Roktは統合の効率に影響を与える可能性のあるロード時間の異常を検出できます。

RoktセッションIDで顧客のアクティビティをリンクさせる

異なる部分のエクスペリエンスでの活動が正しく結びつくように、以前に生成されたRoktセッションIDを渡します。

パラメータ	タイプ	デフォルト
`sessionId`	string	—

すでにセッションIDを生成している場合、RoktセッションIDを渡します。

たとえば、タグが表示されるページに訪れる前にRoktバックエンドに接続してセッションIDを生成することが可能です。この場合、以前に生成されたRoktセッションIDをこのパラメータとして提供する必要があります。これにより、Roktは両方のインタラクションを関連付けることができます。

Roktおよび広告主のリンクがどのように開かれるかを完全に制御したい場合、このオプションを有効にします（たとえば、ブラウザではなくWebView内で）。

パラメータ	タイプ	デフォルト
`overrideLinkNavigation`	boolean	`false`

trueに設定されている場合、Roktはリンクのオープンを直接処理しません。代わりに、LINK_NAVIGATION_REQUESTパートナーイベントが発行されます。

このフラグは、パートナーがカスタマイズされたリンク処理を必要とするシナリオで有用です。一般的なユースケースとして、Roktや広告主からのリンクを外部ブラウザで使用しながらリンクをWebView内で開く管理があります。Roktと広告主のリンクを区別するには、URLに"rokt.com"というサブストリングが含まれているか確認できます。

適切なイベント処理を保証するために、タイムアウトメカニズムが組み込まれています。LINK_NAVIGATION_REQUESTイベントが3秒以内に消費されない場合、エラーが発生します。この予防策により、イベントを処理するためのアクティブなサブスクリプションがパートナー側で存在することを保証し、それができない場合はRoktに通知されます。 .

ファーストパーティドメインの設定​

1. Rokt SDK の初期化​

SDK 初期化スクリプト​

1.1 Rokt APIキーを入力​

1.2 カスタムサブドメインを入力（オプション）​

1.3 データ環境を設定する​

1.4 ユーザーを識別する​

1.5 追加のユーザー属性を設定する​

2. ユーザーを識別する​

3. ユーザー属性の設定​

推奨されるユーザー属性​

4. ファネルイベントを追跡する​

ページビューを追跡する​

5. プレースメントを表示する​

プレースメントの登録​

プレースメントを閉じる​

6. 統合のテスト​

トラブルシューティング​

構文エラー​

初期化エラー​

付録​

カスタムイベントを追跡する​

コマースイベントのトラッキング​

1. 製品を定義する​

2. トランザクションを要約する​

3. コマースイベントを記録する​

サポートされているプロダクションアクションタイプ​

追加の統合ランチャーオプションの渡し方​

カスタマーのクッキー設定を管理する​

シングルページアプリケーションでのページロードパフォーマンスの測定​

RoktセッションIDで顧客のアクティビティをリンクさせる​

エクスペリエンス内でのリンクの開き方をカスタマイズ​