ビュー
ビューはウィジェットのページのように機能します。
- 各ウィジェットは少なくとも1つのビューを持つ必要があります。
- ウィジェットには常に初期ビューがあり、これはウィジェットが最初に表示されるときに表示されるビューです。
共通設定
ビュータイプ
オーバーレイビュー
オーバーレイビューは、ウェブサイト上の他のコンテンツの上にフロート表示されます。画面の中央やページ端に配置できます。
オーバーレイビューにはオプションの背景を設定できます。これはビューの背後に位置し、ページ全体を覆います。これにより、ビューに視覚的な焦点を当てるためにページを暗くしたり明るくしたりすることができます。
埋め込みビュー
埋め込みビューは、ページの特定の部分に挿入されます。このビューはページ上でスペースを占め、他の要素のフローとレイアウトに影響を与えます。
埋め込みセレクター
ビューの挿入ポイントは、CSSセレクターとして指定されます。
例えば、セレクター#banner_containerは、以下のHTMLドキュメントのセクションをターゲットにするために使用できます。
<!doctype html>
<html>
<head>
...
</head>
<body>
...
<div id="banner_container">...</div>
...
</body>
</html>埋め込みセレクターの優先順位
埋め込みは、ブラウザのdocument.querySelector関数と同様に機能します。
複数のセレクターを指定したい状況があるかもしれません。例えば、デスクトップサイトとモバイルサイトの両方で表示されるウィジェットがあり、それぞれ異なるHTMLを持つ場合などです。
埋め込みセレクターの例: #desktop-wrapper, .mobile-embed。
これは、ドキュメント内で最初に現れる方に応じて、#desktop-wrapperまたは.mobile-embedのいずれかを見つけます。いずれか一方のみが現れる場合でも有効であり、そこに埋め込みが表示されます。
ChromeのDevice Modeのようなものを使用して、デスクトップとモバイルの両方で埋め込みをテストすることをお勧めします。
埋め込みモード
ビューが埋め込みコンテナに対してどこに埋め込まれるかを決定します。オプションは以下の通りです。
- 内部の先頭に挿入 - 埋め込みコンテナの内側、他のコンテンツの前にビューを挿入します。
- 内部の末尾に挿入 - 埋め込みコンテナの内側、他のコンテンツの後にビューを挿入します。
- 手前に挿入 - 埋め込みコンテナの外側、その前にビューを挿入します。
- 後ろに挿入 - 埋め込みコンテナの外側、その後にビューを挿入します。
埋め込みタイミング
埋め込みタイミング設定は、ビューコンポーネントがページ上の埋め込みコンテナに自身をどのように挿入するかを制御します。
即時 (デフォルト) - ウィジェットが実行されるとすぐにビューを埋め込みコンテナに挿入します。埋め込みコンテナが読み込み時にページ上に存在することが保証されている場合に使用します。
要素を待つ - 埋め込みコンテナ要素がDOMに存在することを確認してから、それが現れるとビューを挿入します。埋め込みコンテナが動的に追加される場合（例: 別のスクリプト、CMS、またはクライアントサイドルーティングによるもの）に使用します。
複数要素が一致する場合
埋め込みビューの場合、これは埋め込みセレクターによって複数の要素が一致したときに、どの要素を埋め込みターゲットとして使用するかを決定します。
- 最初のマッチを使用 - 選択された要素のうち、最初に一致した要素を使用します。
- 最後のマッチを使用 - 選択された要素のうち、最後に一致した要素を使用します。
埋め込みサイズ調整
高さ固定 (デフォルト) - ビューは定義された正確な高さでレンダリングされます。
比率 - 固定サイズの幅と高さを使用するビューの場合、このオプションは最初に定義された幅/高さの比率を維持し、この表示比率で埋め込みコンテナを埋めるようにビューをスケーリング（縮小または拡大）します。
埋め込みラッパーの高さ
埋め込みビューは、ページに挿入される前に「ラッパー」要素内に作成されます。デフォルトでは、このラッパー要素はビュー自体の高さを自動的に引き継ぎますが、特定の高さを指定することもできます。
例えば、ラッパーの高さをビューよりも高くすることで、ビューをページの一部に埋め込み、垂直方向に中央揃えにすることができます。
Zインデックス
z-indexプロパティを使用すると、ページ上の他のコンテンツに対するビューの重ね順を上書きできます。
一部のウェブサイトでは、ビューがページ上の他のコンテンツの上に表示されるように、z-indexに大きな値を指定する必要がある場合があります。
トランジション
ビューは、表示される際に画面上にトランジションするように設定できます。
ビューに切り替えるアクションを使用してあるビューから別のビューに切り替わる場合、トランジションはスキップされます。これは、_オファーフライアウト_ウィジェットテンプレートのように、ウィジェットが複数のビューを連続する画面として持つ一般的なユースケースを可能にするためです。