この記事では「Webメッセージのテンプレートを選択する」で説明した「吹き出し」を選択した場合、メッセージとして設定可能な項目を説明します。
「Webメッセージの作成をはじめる」に従い、キャンペーンを作成しWebメッセージのコンテンツにあたるメッセージ部分を設定するための記事です。
メッセージで設定できる項目は多く存在するため、4つに分割し説明していきます。
メッセージ
①パターン・タイプ・メッセージの表示タイミング・表示位置
| 項目名 | 説明 |
|---|---|
| パターン | 操作対象のパターンを選択します。 [コントロールグループ]をクリックするとコントロールグループ（統制群）の設定ができます。詳しくは「Webメッセージの配信対象者を各パターンに振り分ける」で説明します。 [追加]をクリックするとA/Bテストを行うためのパターンを複数作成できます。詳しくは「WebメッセージのA/Bテストを実施し効果測定をする」を確認してください。 |
| タイプ | スタンダード、カスタムのどちらかを選択します。 カスタムを選択するとHTML・CSS・JavaScriptを利用し、テンプレートをアレンジできます。カスタムでの設定項目は、この記事ではなく「Webメッセージをカスタムする」を確認してください。 |
| メッセージの表示タイミング | メッセージの表示タイミングを調整できます。 - 配信トリガーの発生後、すぐに表示 - 配信トリガーの発生後、以下のいずれかの条件を満たした時表示 詳細は「Webメッセージの表示タイミングを設定する」を参照してください。 |
| 表示位置 | Webサイト内に吹き出しのWebメッセージを表示する位置を設定します。 表示位置の基準となるWebサイト内要素を指定します。 |
表示位置
| 項目名 | 説明 |
|---|---|
| タイプ | 吹き出しを利用する場合、タイプは[要素を指定して固定]が選択されます。 |
| 基準の要素 | 表示位置の基準となる要素をCSSセレクターで指定します。配信トリガーの実行時、指定した基準の要素が存在しない場合はメッセージが表示されません。 |
| 位置 | 基準の要素に対して、配置する方向を以下から指定します。 - 左上 - 上 - 右上 - 左 - 右 - 左下 - 下 - 右下 基準の要素とメッセージの位置は下記図を参考にしてください。 灰色の四角： 基準の要素 赤色の四角： メッセージ - 横軸：基準の要素の横幅の中心がメッセージの左端となるよう配置 - 縦軸：基準の要素の上端がメッセージの下端になるよう配置 |
| オフセット | 指定された基準の要素より、上下左右の距離を調整します。 px単位の絶対値の指定で、数値はマイナスや小数も選択できます。 |
警告⚠
- 基準の要素や位置 、オフセットを元に配置された表示位置がWebサイトのページの幅や高さから溢れると、メッセージが途切れてメッセージ全体が表示できません
- 管理画面上のプレビューには表示位置に関する設定が反映されません
- 実際のサイト内に反映される表示位置を「Webメッセージをプレビュー機能で確認する」も参考にプレビュー機能で確認してから公開してください
②吹き出し・閉じるボタン
| 項目名 | 説明 |
|---|---|
| 吹き出し | メッセージを表示する吹き出し部分を設定します。 上記サンプルでは灰色枠のオレンジ色で表示されている箇所です。 |
| 閉じるボタン | メッセージを表示するダイアログ部分の右上に表示される閉じるボタンのデザインを設定します。 上記サンプルでは青色と白色で表示しています。 |
吹き出し
| 項目名 | 説明 |
|---|---|
| 背景色 | 吹き出し部分の背景の色を設定します。 |
| 余白 | 吹き出しの中に表示するコンテンツ部分の余白を上下左右で指定します。pxによる絶対値で入力します。 |
| 枠線 | 吹き出しの外枠の太さと色を設定します。 |
| 角丸 | 吹き出しの外枠の角にどのくらい丸みをつけるかを指定します。 |
| 矢印長さ | 吹き出しの矢印の長さを入力します。pxによる絶対値で入力します。 |
| 矢印位置 | 吹き出し左端を基準に矢印部分の位置指定をします。%による相対値で指定します。 |
閉じるボタン
| 項目名 | 説明 |
|---|---|
| チェックボックス | メッセージを閉じるボタンの表示有無を選択します。 閉じるボタンを表示しない場合でも、オーバーレイを設定していればユーザーはメッセージを非表示にすることが出来ます。 |
| 位置 | 閉じるボタンの位置をダイアログの内側にするか、外側にするかを指定します。 |
| 背景色 | 閉じるボタンの色を設定します。 |
| アイコン | 閉じるボタンのバツ部分（アイコン）の色を設定します。 |
③画像・見出し・本文・プレビュー
| 項目名 | 説明 |
|---|---|
| 画像の配置 | 画像のあるテンプレートで画像の横幅を設定します。pxによる絶対値もしくは%による横幅に対する相対値で指定できます。 |
| 画像 | メッセージに表示する画像を指定します。画像の指定がないテンプレートもあります。 |
| 見出し（任意） | メッセージのヘッダーを指定します。設定項目は下記です。 - 文言（最大文字数：5000字） - テキストの大きさ - 太字選択 - 左寄せ/中央寄せ/右寄せ - 色/余白 |
| 本文（任意） | メッセージの本文を指定します。設定項目は下記です。 - 文言（最大文字数：5000字） - テキストの大きさ - 太字選択 - 左寄せ/中央寄せ/右寄せ - 色/余白 [高さを固定する]を選択すると、本文が吹き出しの高さを超える場合にスクロールバーが表示され、本文が長くなっても吹き出しのサイズが維持できます。 |
| プレビュー | 作成しているメッセージのデザインを確認できます。 作成中のメッセージの簡易的なデザインチェックに使用し、実際の表示確認には[プレビューをサイトで確認]をクリックしてください。 詳しくは「Webメッセージをプレビュー機能で確認する」で説明します。 |
画像
メッセージで指定できる画像サイズはテンプレートによって3種類あります。
- ファイルフォーマット: JPEG、PNG、GIF
- ファイルサイズ: 最大 1MB
画像つきの吹き出し
画像サイズ - 推奨: 150px × 150px 以上（デスクトップ、モバイル）
画像での指定項目は下記です。
| 項目名 | 説明 |
|---|---|
| 画像 | ファイルを選択しアップロードする、もしくはURLを入力し画像を指定します。 |
| 角丸 | 画像の角をどのくらい丸く切り抜くか指定します。 |
④ボタン
| 項目名 | 説明 |
|---|---|
| ボタンの表示 | ボタンの余白を上下左右で設定します。pxによる絶対値の指定です。 |
| ボタン | メッセージに表示するボタンの設定をします。ボタンの指定がないテンプレートもあります。 |
ボタン
| 項目名 | 説明 |
|---|---|
| ボタン | ボタンの詳細を設定します。 - テキスト（最大文字数：5000字） - テキストの大きさ - 太字選択 - 左寄せ/中央寄せ/右寄せ - ボタンの背景色 - テキストの色 - ボタンの枠線の有無/色 - 外枠の角の丸み |
| URLもしくはディープリンク（任意） | ボタンをクリックした時、遷移するURL（最大文字数：1000字）を指定します。 指定したURLのWebページを開いたり、アプリを起動しアプリ内の任意の画面に遷移することができます。URLもしくはディープリンクを指定しない場合、ボタンをクリックするとWebメッセージが閉じます。 - リンクを別タブで表示 デフォルトでは選択されておらず、現在のタブで表示します。 [リンクを別タブで表示]を選択すると、指定したURLへ遷移する際に別タブでページを表示します。URLもしくはディープリンクを指定しない場合、現在のページが別タブで開きます。 |
| トラッキングイベント名 | ボタンをクリックしたときに記録されるイベント名を入力します。 配信結果の確認時、効果測定に利用できます。 |
Webメッセージのメッセージ部分の設定が完了しました。
次の設定項目にあたる「Webメッセージの配信対象者を各パターンに振り分ける」を参照してください。