“GUI編集モード” で「web接客コンテンツ」を作成したい
回答
本記事では、b→dashで「web接客コンテンツ」をGUI編集モードで作成する方法について紹介しています。
作成手順は、大きく下記の3つです。
1. テンプレートを選択する
2. web接客の内容を編集する
3. プレビューで確認する
各手順の詳細は、以下をご参照ください。
1. テンプレートを選択する
1.「web接客」>「web接客を作成する」をクリックします
2. 右上の「新規作成」をクリックします
3.「web接客」を選択し、「適用」をクリックします
4. 作成したいweb接客のイメージに近い「使用するテンプレート」をクリックします
5.「GUI編集モードでコンテンツを作成」を選択し、「適用」をクリックします
6. エディター画面にテンプレートが表示され、web接客を編集できます
※ 表示するweb接客のサイズについては、テンプレートをご参考ください
2. web接客の内容を編集する
テンプレートを使ってweb接客コンテンツを編集します。以下では、各機能の操作手順を説明します。
サイズを変更する
1.「コンテンツサイズの編集」をクリックします
2.「サイズ」を入力します
3. 入力したサイズに変更されます
※ 画像の枠についている青い点をクリックしたまま動かすことで、個別要素のサイズを変更できます
テキストを編集する
1. テキストを選択し、「フォント」「文字サイズ」「斜体」「アンダーバー」「斜線」「文字色」「ハイライト」「行間」を必要に応じて変更します
2. テキストを入力/変更します
※ 文字サイズはプルダウンの選択肢の中から選択するほか、任意の文字サイズを直接入力することで指定することも可能です
透明度を変更する
1. テキストボックスや画像を選択し、「透明度」をクリックします
2.「値」を選択し、「閉じる」をクリックします
3. 透明度が変更されます
閲覧人数を差し込む
「閲覧人数挿入」機能を使用することで、web接客に「貴社webページ/バナーを閲覧した人数」を挿入できます。
1. 差し込みたい箇所にカーソルを合わせ「閲覧人数挿入」をクリックします
2.「閲覧対象」「閲覧人数計測対象ページ」「集計タイミング」「最低閲覧人数」を選択し、「適用」をクリックします
3. 閲覧人数が差し込まれます
※「閲覧人数」として表示される数字は、貴社webサイトに訪問したユーザーの「ビジターID」をユニークカウントした数字です
「閲覧人数」を挿入した場合、デフォルトは「文字色: 青色」「下線: あり」です。
文字色の変更
1.「ページ閲覧人数」を選択し、「文字色」をクリックします
2. 任意の「文字色」を選択します
※「カスタム」をクリックすることで、カラーコードを使用して文字色を変更できます
下線の削除
「下線」をクリックすると、下線が削除されます。
画像を変更する
1.「画像」をクリックします
2.「画像」を選択し、「適用」をクリックします
3. 画像が反映されます(サイズと位置を変更可能)
1.「動画」をクリックします
2.「動画」を選択し、「適用」をクリックします
3. 動画が反映されます(サイズと位置を変更可能)
※ 動画を挿入したweb接客コンテンツを配信すると、ポップアップが表示されるタイミングと同時に、挿入した動画が自動再生されます。ユーザーは再生/一時停止の操作や音量調節が可能です
※ web接客コンテンツに差し込む動画ファイルは下記の仕様/推奨値を満たしている必要があります
・拡張子: 「mp4」のみ可能
・大きさ: 横幅300pxまではそのまま表示。300pxより大きい場合、アスペクト比を固定し横幅を300pxに変更したものが差し込まれます
・サイズ: 1〜5MBを推奨(大きい場合、ポップアップ表示時に動画表示に時間を要します)
コンテンツボックスへのアップロード方法は「コンテンツボックスを使用したい」をご参照ください
画像に丸角を付ける
1.「画像」を選択し、「角丸」をクリックします
2.「px」を入力し、「閉じる」をクリックします
3. 画像の角が変更されます
画像に枠線を付ける
1.「画像」を選択し、「枠線」をクリックします
2.「枠線の種類」「枠線の太さ」「枠線の色」を入力し、「閉じる」をクリックします
3. 画像の枠線が変更されます
境界線を差し込む
1.「境界線」をクリックします
2.「境界線の色」「境界線の太さ」「境界線の種類」を入力します
3. 境界線が差し込まれます
影を差し込む
1.「ボタン」を選択し、「シャドウ」をクリックします
2.「影の大きさ」「影の色」を入力し、「閉じる」をクリックします
3. ボタンに影が差し込まれます
※ 画像などにも影を付けることができます
リンクを差し込む
リンクの挿入先として選択できる箇所は「テキスト」「画像」「ボタン」です。
1.「リンクを挿入する」をクリックします
2.「挿入したいリンク」を入力し、「適用」をクリックします
3. リンクが挿入されます
※ 画像の一部分にリンク挿入はできませんので、ご注意ください
1. リンクを確認したいweb接客コンテンツを選択し、「編集」をクリックします
2. リンクを挿入した要素をクリックします
3.「リンク挿入」を選択し、「適用」をクリックすると、挿入したリンクを確認できます
・クリック計測/流入元計測(配信パラメータの付与設定): 「webサイトへの流入元を取得したい」
・CV計測(CV設定): 「webサイトのCVを取得したい」
値を差し込む
web接客にデータ挿入を行います。以下では「氏名」カラムの値を差し込む手順を例に説明します。
1. 敬称などのテキストを入力します
2. 差し込みたい箇所にカーソルを合わせ、「データ挿入」をクリックします
3.「データファイル」を選択し、「適用」をクリックします
4.「差し込みたいカラム」を選択し、「適用」をクリックします
5. 選択したカラムの値が差し込まれます
web接客をカスタマイズで作成する場合、テンプレートで作成する場合とは異なり、デフォルトで「閉じるボタン」が設定されていません。
1.「閉じるボタン」をクリックします
2.「追加したい閉じるボタン」を選択し、「適用」をクリックします
3.「閉じるボタン」が反映されます
セル挿入とは、web接客の表示対象となるすべてのユーザーに対して、『あるカラムの最新の値』を表示させたい場合に利用する機能です。例えば、クーポンコードマスターデータの値が月ごとに更新される場合、その月の最新値をすべてのユーザーに自動挿入することができます。
1. 差し込みたい箇所にカーソルを合わせ、「セル挿入」をクリックします
2.「データファイル」を選択し、「適用」をクリックします
3.「差し込みたいセル」を選択し、「適用」をクリックします
4. 選択したセルの値が差し込まれます
3. プレビューで確認する
1.「プレビュー」をクリックします
2. プレビューが表示されるので、差し込みなどが表示されているか確認します
3. 確認ができたら、「保存」をクリックします
4.「名前」を入力し、「保存」をクリックします
5. web接客一覧に表示されます
PCやSPの画面におけるweb接客のプレビューは、一度web接客を保存した後でないと表示できません。
1. 作成したコンテンツを選択し、詳細画面を表示します
2.「プレビュー」をクリックします
3. URLを入力し、「適用」をクリックします
4. PC画面でのプレビューが表示されます
5.「切替ボタン」をクリックすると、SP画面でのプレビューが表示されます
※ PC画面のプレビューでは、配信設定の表示位置に関わらず「右下」に表示されます。SP画面では「中央」に表示されるため、実際の表示位置を確認することはできません
プレビューを表示するためには、貴社のwebサーバーに設定している「X-Frame-Options」を解除してください。ただし、設定を解除するとサイト訪問者の意図しない操作によって情報漏洩やデータ消失などが発生する可能性があるため、貴社のセキュリティ上問題がないか事前にご確認ください。
「X-Frame-Options」を解除できない場合は、テスト配信を実施する方法もあります。詳細は「web接客をテスト配信する方法を知りたい(テスト配信ページを用意できない場合)」をご参照ください。
※「X-Frame-Options」の詳細はMDN Web Docsをご参照ください。