---
title: モーダルオファー拡張
description: モーダルオファー拡張機能は、プロモーション、コールトゥアクション、またはオファーをユーザーに通知するために、任意のページにモーダルオーバーレイを挿入することを可能にします。
url: https://docs.tealium.com/ja/iq-tag-management/extensions/extensions-list/modal-offer-extension/
---
## 前提条件
* [拡張機能について]()
## 仕組み
モーダルオファー拡張機能は、ページ上にモーダルポップアップウィンドウを生成します。ポップアップの内容と外観は、選択した**モーダル公開モード**に基づいて構成されます：
* **標準**：**ヘッダー**、**ボディ**、**フッター**の3つのフィールドにテキストを入力することで内容が構成されます。高さと幅も指定できます。
* **カスタム**：CSSとHTMLを直接編集してコンテンツがコード化されます。
ポップアップは、拡張機能に適用された条件に基づいて起動します。
拡張機能はすべてのページのDOM-Readyスコープで実行されますが、定義された条件が`true`に評価されたときにのみ実行されます。
## 拡張機能の使用
モーダルオファー拡張機能の構成を開始するには、モーダルの内容を準備して、構成に入力する準備ができていることを確認してください。
拡張機能が追加されると、次の構成オプションが利用可能になります：
* **モーダル公開モード**：モーダル公開モードを使用してモーダルポップアップの内容を構成します
* **標準**：（デフォルト）シンプルなテンプレートを使用してモーダルの内容を入力し、高さと幅を調整します。標準モードでは、ウィンドウの外観は以下のルールに従います：
* モーダルは常に中央に配置されます。
* モーダルのフォントスタイルは``要素から継承されます。
* モーダルの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に置き換えます：
```js
// 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]()で使用することで、モーダルオファーウィンドウの起動動作をカスタマイズできます。
追加の読み物：[モーダルオファー拡張機能のトリガー（ユースケース）](https://support.tealiumiq.com/en/support/solutions/articles/36000363394-triggering-the-modal-offer-extension-use-cases-)
## FAQ
#### プロフィールに複数のモーダルオファー拡張機能を追加できますか？
はい、しかし一度に表示されるモーダルオファーは1つだけです。モーダルオファー拡張機能の複数のインスタンスを追加する場合は、それぞれが異なる条件を持つことを確認してください。