EcommWebSDK

Rokt Web SDKを使用した統合Rokt Web SDKを使用した統合への直接リンク

1. ページにRoktをロードする1. ページにRoktをロードするへの直接リンク

アカウントマネージャーが統合コードを提供するか、my.rokt.comで見つけることができます。

統合コードには、顧客識別子（生のメールアドレスを推奨）とコンテキストデータが含まれています。Roktが個人識別子とデータ属性を要求する理由について詳しくは、こちらをご覧ください。

統合コードのサンプル統合コードのサンプルへの直接リンク

統合のロード統合のロードへの直接リンク

Roktと統合する最初のステップは、RoktのIntegration Launcherをサイトにロードすることです。[最適なパフォーマンス]のために、以下のスクリプトタグをHTMLのhead要素に直接追加して、Roktスクリプトをロードすることをお勧めします。

注意

以下の例をコピーする場合は、roktAccountIdをアカウントのユニークIDに置き換えてください。手順については、Where can I find my Rokt ID?を参照してください。

Confirmation Page
Payments Page

<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",
    sandbox: true,
  });
  await launcher.selectPlacements({
    attributes: {
      email: "",
      firstname: "",
      lastname: "",
      mobile: "",
      confirmationref: "",
      amount: "",
      currency: "",
      paymenttype: "",
      ccbin: "",
      address1: "",
      zipcode: "",
      age: "",
      gender: "",
      country: "",
      language: ""
    },
  });
</script>

注記

Payments Marketplaceの詳細な統合ガイドについては、こちらの指示に従ってください。

<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: 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: {

      // 必須
      amount: '',
      siteCountry: '',
      siteLanguage: '',
      currency: '',

      // 注文データ
      clientcustomerid: '',
      cartId: '',
      subtotal: '',
      totalTax: '',
      totalShipping: '',
      margin: '',
      paymenttype: '',
      ccbin: '',
      cartItems: JSON.stringify(cartItems),

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

      },
  });

  //オプションのイベントリスナー
  selection.on('PLACEMENT_INTERACTIVE').subscribe(() => {
      // Placementがインタラクティブになった後に実行するロジック
      console.log(selection.context.pageVariantName);
  });
  selection.on('POSITIVE_ENGAGEMENT').subscribe(() => {
      // Placementがポジティブなエンゲージメントを得た後に実行するロジック
      console.log(selection.context.pageVariantName);
  });
</script>

これらの方法のいずれかを選択し、一度だけ実行されるようにしてください。

2. 準備用iframeを有効にする2. 準備用iframeを有効にするへの直接リンク

顧客のジャーニーの初期段階で発生するページを選択します。理想的には、顧客が少し長く滞在する可能性のあるページです。配送または支払い詳細ページが適しています。

このコードスニペットをページのHTML内の任意の場所に追加します:

<iframe
  aria-hidden="true"
  src="https://apps.rokt.com/wsdk/preload/index.html"
  sandbox="allow-scripts allow-same-origin"
  style="border: 0px; width: 100%; display: none;"
></iframe>

このスニペットは、顧客のジャーニーの初期段階でRoktのアセットをロードし、キャッシュします。その後、Roktのプレースメントを表示する準備が整ったときに、Roktのアセットがすぐに利用可能になり、読み込み時間が短縮されます。Roktの準備用iframeは安全であり、ページやサイトデータにアクセスすることはありません。

準備用iframeの利点についての詳細は[こちら]をご覧ください。

3. サイトにRokt統合コードを追加する3. サイトにRokt統合コードを追加するへの直接リンク

Rokt統合コードを、ステップ1からHTMLの<head></head>タグの間に追加します。Roktプレースメントを表示したいページに追加してください。

ページに統合コードを追加する際には、顧客データとトランザクションデータを入力してください。Roktが顧客を識別し、関連するオファーを選択できるように、顧客のメールアドレスを設定してください。

トランザクションに関する[データ属性]を入力して、Roktが顧客が見るオファーをよりパーソナライズできるようにします。

注記

Roktは[ベストプラクティス]として直接統合を推奨していますが、[タグマネージャーとの統合]のオプションも利用可能です。

4. ページとプレースメントを設定する4. ページとプレースメントを設定するへの直接リンク

RoktチームがOne Platformで関連するページとプレースメントを設定します。ブランドガイドラインやUXのニーズに合わせて[プレースメントをカスタマイズ]することができます。

埋め込み配置埋め込み配置への直接リンク

サイトに埋め込み配置を追加する予定がある場合、配置を固定するHTML要素を指定する必要があります。例えば: <div id="rokt-placeholder"></div>。配置がターゲットとする要素をRoktチームに知らせてください。

5. 統合のテスト5. 統合のテストへの直接リンク

Rokt Web SDKが正しいページで読み込まれ、正しい属性が含まれていることを確認してください。

[統合のテスト]に関するガイドをお読みください。

Rokt Web SDKを使用した統合Rokt Web SDKを使用した統合 への直接リンク

1. ページにRoktをロードする1. ページにRoktをロードする への直接リンク

統合コードのサンプル統合コードのサンプル への直接リンク

統合のロード統合のロード への直接リンク

2. 準備用iframeを有効にする2. 準備用iframeを有効にする への直接リンク

3. サイトにRokt統合コードを追加する3. サイトにRokt統合コードを追加する への直接リンク

4. ページとプレースメントを設定する4. ページとプレースメントを設定する への直接リンク

埋め込み配置埋め込み配置 への直接リンク

5. 統合のテスト5. 統合のテスト への直接リンク