メインコンテンツまでスキップ

Rokt Snippet (非推奨)

注記

長年の進化を経て、snippet.jsはすべてのニーズを処理できない段階に達しました。Roktはこのオンボーディングのための統合を使用することを推奨しません。代わりに、新しいIntegration Launcherをご覧ください。Roktは、セキュリティパッチに対応するためにsnippet.jsのサポートを継続しますが、新しい機能は追加されません。

概要​

Roktオブジェクトは、Roktソリューションと統合するためのエントリーポイントを提供します。これは、スニペットスクリプトで指定された名前のグローバル変数として利用可能です。スニペットスクリプトは次のようになります:

(function (r, o, k, t, n, e, w, a, _) {
  r._ROKT_ = n;
  r[n] = r[n] || {
    id: t,
    h: w,
    lc: [],
    it: new Date(),
    onLoaded: function (c) {
      r[n].lc.push(c);
    },
  };
  a = o.createElement("script");
  a.type = "text/javascript";
  a.async = !0;
  a.src = k;
  if (e) {
    a.integrity = e;
    a.crossOrigin = "anonymous";
  }
  _ = o.getElementsByTagName("script")[0];
  _.parentNode.insertBefore(a, _);
})(
  window,
  document,
  "https://apps.rokt.com/wsdk/integrations/snippet.js",
  "rokt-account-id",
  "rokt"
);

上記の引数リストで次の重要なパラメータに注意してください:

  • https://apps.rokt.com/wsdk/integrations/snippet.js— Roktオブジェクトの最新バージョンを指すURLです。
  • rokt-account-id— あなたのユニークなRoktアカウントIDで、正しい値に置き換える必要があります。
  • rokt— このオブジェクトがwindowオブジェクト上で公開される名前です。この場合、window.roktまたは単にroktを使用してアクセスできます。

Roktオブジェクトは非同期で読み込まれるため、ページの読み込みを妨げません。つまり、初期化スニペットを実行する時点では、Roktオブジェクトの完全な機能は利用できません。Rokt.onLoaded関数のみが即座に利用可能であり、Roktオブジェクトが取得され完全に読み込まれると、残りの機能が追加されます。統合が準備完了したときに通知を受け取るには、Rokt.onLoadedにコールバック関数を追加できます。

```javascript
rokt.onLoaded(function (rokt) {
  rokt.setAttributes({
    email: "",
  });
});

メソッド​

closeAll​

▸ closeAll(): void

ページ上のすべてのプレースメントを閉じるまたはアンロードします。

戻り値: void

getPlacements​

▸ getPlacements(): Promise‹Array‹Placement››

選択されたプレースメントのリストを返します。

戻り値: Promise‹Array‹Placement››

hashString​

▸ hashString(value: string): Promise‹string›

SHA-256を使用して文字列をハッシュする便利なメソッドです。

Roktはハッシュ化の前に文字列を操作するため、独自に実装するのではなく、提供されたメソッドを使用することをお勧めします。

パラメータ:

名前型説明
valuestringハッシュする文字列

戻り値: Promise‹string›

init​

▸ init(configuration: Configuration): void

Roktが顧客を識別できるようにする情報を設定します。

パラメータ:

名前型説明
configurationConfiguration設定オブジェクト

戻り値: void

onFailure​

▸ onFailure(failureCallback: function): void

Roktオブジェクトの読み込みに失敗した場合、または正しく表示できない場合にトリガーされるコールバックを受け入れます。

このシナリオは、Roktがサポートしていない非常に古いブラウザに遭遇した場合に発生することがあります。

例

rokt.onFailure((reason) => {
  // このフックを使用してエラーを表示するか、別のページに移動します
});

パラメータ:

▪ failureCallback: function

Roktオブジェクトが準備完了したときにトリガーされるコールバック。

▸ (reason: string): void

パラメータ:

名前型
reasonstring

戻り値: void

onLoaded​

▸ onLoaded(onLoadedCallback: function): void

Roktオブジェクトが読み込まれ、使用可能になったときにトリガーされるコールバックを受け入れます。Roktオブジェクトがすでに準備完了の場合、コールバックは即座にトリガーされます。

このメソッドは複数回呼び出すことができ、それぞれ異なるコールバックを実行します。Roktオブジェクトが統合の準備ができたら、それらは順番に実行されます。

このアプローチは、複数の統合ポイントを持つシングルページアプリケーションの場合に有用です。

例

rokt.onLoaded((rokt) => {
  // ここでRoktオブジェクトと対話できます
});

パラメーター:

▪ onLoadedCallback: function

Roktオブジェクトが読み込まれたときにトリガーされるコールバック。

▸ (rokt: Rokt): void

パラメーター:

名前型
roktRokt

戻り値: void

setAttributes​

▸ setAttributes(attributes: Attributes): void

Roktが顧客により適したオファーを提供できるようにする属性を設定します。属性には、メールアドレス、名前、姓などが含まれる場合があります。

カタログプロバイダーによっては、Roktがカタログアイテムを取得するために追加情報が必要になる場合があります。例えば、チケットイベントにはeventIdが必要です。

Rokt.setAttributesは、渡された属性を既存の属性に対してシャロー マージを行います。

Roktはブラウザのユーザーエージェントを属性として必要とするため、その値はデフォルトでuserAgentプロパティに格納されます。

default

{
  userAgent: 'Mozilla/5.0 (...)', // window.navigator.userAgent の値
}

パラメーター:

名前型説明
attributesAttributes名前、姓、メールアドレスなどのデータを含む辞書

戻り値: void

setFulfillmentAttributes​

▸ setFulfillmentAttributes(attributes: Attributes): void

顧客がオファーを受け入れるまでRoktに知られていない属性を設定します。

Rokt.setFulfillmentAttributesは、渡された属性を既存の属性に対して浅いマージを行います。

パラメータ:

名前型説明
attributesAttributes名前、姓、メールアドレスなどのデータを含む辞書。

戻り値: void

triggerPageChange​

▸ triggerPageChange(options: TriggerPageChangeOptions): void

新しいページのための配置選択を再トリガーします。

シングルページアプリケーションの統合において、Roktのソリューションは複数のページで表示されたり、最初は顧客に配置が表示されないページにロードされたりすることがあります。

この場合、Roktはパートナーにメソッドのトリガーを依頼します。これにより、顧客が配置を表示する必要があるページに到達したことを知らせます。

パラメータ:

名前型説明
optionsTriggerPageChangeOptions新しいページのオプション。

戻り値: void

getValidationStatus​

▸ getValidationStatus(): Promise‹ValidationResult›

表示されているプレースメントが有効かどうかを判断するためのメソッドです。

プレースメントの現在の検証ステータスと関連するiframe要素への参照を含むリストを返します。

戻り値:

Promise<{
  // エラーがあるかどうかをすぐに判断できます
  isValid: boolean;
  // 検証されたプレースメントのリストです
  placements: Array<{
    // エラーを含むプレースメントの要素です。
    // エラーがある場合はそれにスクロールできます
    element: HTMLIFrameElement;
    // プレースメントは独自のエラーメッセージを表示しますが、
    // これはエラーメッセージを提供する配列です。
    // 必要であればどこかで繰り返すことができます。
    // 有効な場合は空になります
    errors: Array<{
      message: string;
    }>;
  }>;
}>

プレースメントの有効性の確認​

一部のRoktオファーには、取引の流れを進める前に顧客が完了しなければならないフィールドが含まれています。例えば、オファーに対して「はい」または「いいえ」を選択したり、フォームに記入したりすることです。これらのタイプのオファーには検証メッセージが含まれています。これらのメッセージは、顧客が進む前に取るべきアクションを示す警告を表示します。

現在のプレースメントが有効かどうかを確認するには、rokt.getValidationStatus() メソッドを使用します。getValidationStatus は、プレースメントが定義された最初の検証状態を解決するまで待機するJavaScriptのPromiseを返します。解決された値は次のようになります:

interface PlacementValidationStatus {
  // エラーがあるかどうかをすぐに判断できます
  isValid: boolean;
  // 検証されたプレースメントのリストです
  placements: Array<{
    // エラーを含むプレースメントの要素です。
    // エラーがある場合はそれにスクロールできます
    element: HTMLIFrameElement;
    // プレースメントは独自のエラーメッセージを表示しますが、
    // これはエラーメッセージを提供する配列です。
    // 必要であればどこかで繰り返すことができます。
    // 有効な場合は空になります
    errors: Array<{
      message: string;
    }>;
  }>;
}

使用例

rokt.onLoaded(function (rokt) {
  rokt.setAttributes({
    /* ... */
  });
  rokt.init({
    /* ... */
  });
  // このボタンを顧客がクリックしたときに、配置の検証ステータスを確認します
  document.querySelector("button.check-validation").onclick = async () => {
    const result = await rokt.getValidationStatus();
    // 配置に無効な配置が含まれているかどうかを迅速に判断します
    alert(result.isValid);
    // ループを通じて
    for (const placement of result.placements) {
      alert(
        "element is: " +
          element.getBoundingClientRect().top +
          "px from the top of the page"
      );
      alert("placement has: " + placement.errors.length + " errors");
      for (const [i, error] of placement.errors.entries()) {
        alert("placement error: " + i + " is " + error);
      }
    }
  };
});
この記事は役に立ちましたか？
Last updated Oct 29, 2025