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

Rokt スニペット (非推奨)

注記

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

パラメーター:

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

戻り値: Promise‹string›

init​

▸ init(configuration: Configuration): void

Roktがあなたの顧客を特定できる情報を設定します。

パラメーター:

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

戻り値: void

onFailure​

▸ onFailure(failureCallback: function): void

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

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

example

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

Parameters:

▪ failureCallback: function

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

▸ (reason: string): void

Parameters:

名前型
reasonstring

Returns: void

onLoaded​

▸ onLoaded(onLoadedCallback: function): void

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

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

このアプローチは、複数の統合ポイントを持つシングルページアプリケーションの場合に役立つかもしれません。

example

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

Parameters:

▪ onLoadedCallback: function

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

▸ (rokt: Rokt): void

Parameters:

名前型
roktRokt

Returns: 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({
    /* ... */
```javascript
  });
  // 顧客がこのボタンをクリックしたとき、配置の検証ステータスを確認します
  document.querySelector("button.check-validation").onclick = async () => {
    const result = await rokt.getValidationStatus();
    // 配置が無効な配置を含んでいるかどうかを素早く判断します
    alert(result.isValid);
    // ループします
    for (const placement of result.placements) {
      alert(
        "要素は: " +
          element.getBoundingClientRect().top +
          "ページの上から" +
          "px"
      );
      alert("配置には: " + placement.errors.length + " エラーがあります");
      for (const [i, error] of placement.errors.entries()) {
        alert("配置エラー: " + i + " は " + error);
      }
    }
  };
});
この記事は役に立ちましたか？