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