Last updated 2024年9月27日

Roktスニペット（非推奨）

注記

進化を続けてきたsnippet.jsは、私たちのすべてのニーズを満たすことができなくなりました。Roktは、オンボーディングのためにこの統合を使用することを推奨していません。代わりに、新しい統合ランチャーに移動してください。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.roktまたは単にroktを使用してアクセスできます。

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

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

パラメータ:

名前	タイプ	説明
value	string	ハッシュ化する文字列

戻り値: Promise‹string›

---

init

▸ init(configuration: Configuration): void

Roktがお客様を識別するための情報を設定します。

パラメータ:

名前	タイプ	説明
configuration	Configuration	設定オブジェクト

戻り値: void

---

onFailure

▸ onFailure(failureCallback: function): void

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

これは、Roktによってサポートされていない非常に古いブラウザに遭遇した場合に発生する可能性があります。

例

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

パラメータ:

▪ failureCallback: function

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

▸ (reason: string): void

パラメータ:

名前	タイプ
reason	string

戻り値: void

---

onLoaded

▸ onLoaded(onLoadedCallback: 関数): void

Roktオブジェクトがロードされ、使用可能な状態になった時にトリガーされるコールバックを受け入れます。Roktオブジェクトが準備完了している場合、コールバックはすぐにトリガーされます。

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

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

example

rokt.onLoaded((rokt) => {
  // Roktオブジェクトとの対話が可能になります
});

パラメータ:

▪ onLoadedCallback: 関数

Roktオブジェクトがロードされた時にトリガーされるコールバックです。

▸ (rokt: Rokt): void

パラメータ:

名前	タイプ
rokt	Rokt

戻り値: void

---

setAttributes

▸ setAttributes(attributes: Attributes): void

Roktがオファーを顧客に適切にカスタマイズするための属性を設定します。属性にはメールアドレス、名前、姓などが含まれる場合があります。

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

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

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

default

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

パラメータ:

名前	タイプ	説明
attributes	Attributes	名前、姓、メールアドレスなどのデータを持つ辞書

戻り値: void

---

setFulfillmentAttributes

▸ setFulfillmentAttributes(attributes: Attributes): void

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

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

パラメータ:

名前	タイプ	説明
attributes	Attributes	名前、姓、メールなどのデータを持つ辞書

戻り値: void

---

triggerPageChange

▸ triggerPageChange(options: TriggerPageChangeOptions): void

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

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

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

パラメータ:

名前	タイプ	説明
options	TriggerPageChangeOptions	新しいページのオプション。

戻り値: 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);
      }
    }
  };
});