モーダルオファー拡張 | 拡張機能のリスト | Tealium開発者ドキュメントプレビュー

前提条件

拡張機能について

仕組み

モーダルオファー拡張機能は、ページ上にモーダルポップアップウィンドウを生成します。ポップアップの内容と外観は、選択したモーダル公開モードに基づいて構成されます：

標準：ヘッダー、ボディ、フッターの3つのフィールドにテキストを入力することで内容が構成されます。高さと幅も指定できます。
カスタム：CSSとHTMLを直接編集してコンテンツがコード化されます。

ポップアップは、拡張機能に適用された条件に基づいて起動します。

拡張機能はすべてのページのDOM-Readyスコープで実行されますが、定義された条件がtrueに評価されたときにのみ実行されます。

拡張機能の使用

モーダルオファー拡張機能の構成を開始するには、モーダルの内容を準備して、構成に入力する準備ができていることを確認してください。

拡張機能が追加されると、次の構成オプションが利用可能になります：

モーダル公開モード：モーダル公開モードを使用してモーダルポップアップの内容を構成します
- 標準：（デフォルト）シンプルなテンプレートを使用してモーダルの内容を入力し、高さと幅を調整します。標準モードでは、ウィンドウの外観は以下のルールに従います：
  - モーダルは常に中央に配置されます。
  - モーダルのフォントスタイルは<body>要素から継承されます。
  - モーダルのCSSはTealiumのデフォルトのセットです。
  - モーダルが表示されている間、ページの残りの部分をブロックするために暗いdiv要素が追加されます。
  - ヘッダー、ボディ、フッター要素のサイズは、ウィンドウの高さと幅のパーセンテージです。
- カスタム：モーダルポップアップのCSSとHTMLを直接編集してカスタム動作を許可します。
  - カスタムモードでモーダルポップアップを構成するには、モーダルウィンドウのスタイリング定義のためのCSSコードと、モーダルウィンドウのテンプレートのためのHTMLコードを編集します。
  - CSSとHTMLには、標準公開モードの構成を参照する##VALUE##の形式のプレースホルダーが含まれています。例えば、##MDLWIDTH##はウィンドウの幅構成を参照します。これらのプレースホルダーを自分のカスタム値に置き換えるか、標準構成から値が入力されるようにそのままにしておきます。
    
    _tealiumModalCloseボタンをカスタマイズする場合は、onclick="utag.extn.mdlW.dismiss()関数を保持しておくことを確認してください。
  - 拡張機能の下部にあるリセットをクリックして、すべてのコードをデフォルトの状態に戻します。
モーダルヘッダー - ウィンドウの上部に表示されるテキスト。
モーダルボディ - ウィンドウの中央に表示されるテキスト。
モーダルフッター - 行区切りの後、ウィンドウの下部に表示されるテキスト。
ウィンドウの高さ - （デフォルト：200）ウィンドウの高さ（ピクセル）。
ウィンドウの幅 - （デフォルト：300）ウィンドウの幅（ピクセル）。
条件を追加をクリックして、このモーダルが入れるタイミングを制御します。 * 条件ボックス内の**+ボタンをクリックしてAND条件を追加します。 * 条件ボックスの外側の+ボタンをクリックしてOR条件を追加します。 * 条件ボックス内の-ボタンをクリックしてAND条件を削除します。 * 条件ボックスの外側の-**ボタンをクリックするとOR条件が削除されます。

条件を構成しない場合、モーダルはすべてのページでポップアップします。

モーダルを直接起動する

デフォルトでは、モーダルはDOM Readyで実行され、適用された条件がtrueであればポップアップします。モーダルウィンドウを異なるタイミングで起動するか、カスタムロジックに基づいて起動するには、以下の変更を適用します：

デフォルトのモーダル起動をブロックする：モーダルの起動をブロックするために、常にfalseに評価される条件を適用します。
モーダルを直接起動する：拡張機能画面でモーダルオファー拡張機能のUIDを見つけます：

以下のJavaScriptコードを使用してモーダルウィンドウを起動し、{UID}を上記のUIDに置き換えます：

      // Replace {UID} with the UID of the Modal Offer extension to trigger
      // For example "utag.modalExt_72.js"
      utag.ut.loader({
          src: utag.cfg.path + 'utag.modalExt_{UID}.js?utv=' + utag.cfg.v,
          cb: function() {
              utag.extn.mdlW.load();
          }
      });

このコードをiQ構成の任意の場所で使用して、モーダルオファーを起動します。このコードをJavaScript Code extensionまたはjQuery onHandler extensionで使用することで、モーダルオファーウィンドウの起動動作をカスタマイズできます。

追加の読み物：モーダルオファー拡張機能のトリガー（ユースケース）

FAQ

プロフィールに複数のモーダルオファー拡張機能を追加できますか？

はい、しかし一度に表示されるモーダルオファーは1つだけです。モーダルオファー拡張機能の複数のインスタンスを追加する場合は、それぞれが異なる条件を持つことを確認してください。