アプリ接客コンテンツを作成したい(GUI)

テンプレートを選択する

web接客」をクリックします

web接客を作成する」をクリックします

新規作成」をクリックします

アプリ」を選択し、「適用」をクリックします

使用するテンプレートクリックします

作成したいアプリ接客のイメージに近いテンプレートを選択してください。
GUI編集モードでコンテンツを作成選択し、「適用」をクリックします

エディター画面にテンプレートが表示されるので、こちらでアプリ接客を編集します

アプリ接客の内容を編集する

今回はテンプレートを使って以下のアプリ接客を作成する例をもとに、説明していきます!

➊ サイズを変更する

コンテンツサイズの編集」をクリックします

サイズ」を入力します

今回は横幅を「80VW」から「90VW」に変更します。

入力したサイズに変更されます

画像」を選択し、横に広げます

画像の枠についてる青い点をクリックしたまま動かすと、サイズを変更することができます。
画像」をコンテンツサイズに合わせます

➋ テキストを編集する

テキスト」をクリックします

テキストを選択し、「フォント」「太字」「斜体」「アンダーバー」「斜線」「文字色」「ハイライト」「文字サイズ」「行間」「背景色」「文字位置」の変更をすることができます

テキストを入力/変更します

テキストの文字サイズは選択肢にない値を設定することもできます

テキストの文字サイズは、プルダウンの選択肢の中から選択することで設定できますが、プルダウンにない文字サイズを指定したい場合は、任意の文字サイズを直接入力することで指定することも可能です。直接入力箇所については、以下の参考画像をご確認ください。

【参考:文字サイズの直接入力箇所】

➌ 透明度を変更する

透明度」をクリックします

」を選択し、「閉じる」をクリックします

透明度が変更されます

今回はテキストの透明度を変更しましたが、画像の透明度も変更することができます。

❹ 画像を変更する

画像」をクリックします

画像」を選択し、「適用」をクリックします

画像が反映されます

画像のサイズと位置を変更します

❺ 画像に丸角を付ける

画像」を選択し、「角丸」をクリックします

px」を入力し、「閉じる」をクリックします

画像の角が変更されます

❻ 画像に枠線を付ける

画像」を選択し、「枠線」をクリックします

任意の「枠線の種類」「枠線の太さ」「枠線の色」を入力し、「閉じる」をクリックします

画像の枠線が変更されます

境界線を差し込む

境界線」をクリックします

追加された「境界線」を移動させ、任意の長さに変更します

境界線の種類」「境界線の太さ」「境界線の色」を任意で設定します

境界線に反映されます

❽ 影を差し込む

ボタン」を選択し、「シャドウ」をクリックします

影のサイズ」「影の色」を入力し、「閉じる」をクリックします

ボタンに影が差し込まれます

画像などにも影を付けることができます。

❾ リンクを差し込む

以下では、リンク挿入の方法について説明します。リンクの挿入先として選択が可能な箇所は「テキスト」「画像」「ボタン」となっています。
※画像の一部分にリンク挿入はできませんので、ご注意ください

リンクを挿入する」をクリックします

テキストを選択してリンクを挿入をした場合は、リンク挿入をしたテキストに下線がつきます。テキストボックスを選択してリンクを挿入した場合は、テキストに下線がつきません。
リンクの遷移先を選択します
挿入したいリンク」を入力し、「適用」をクリックします

リンクが挿入されます

❿ 値を差し込む

アプリ接客にデータ挿入を行う方法について説明します。以下では「氏名」カラムの値を差し込む手順を例に、データ挿入の方法を紹介します。

差し込みたい箇所にカーソルを合わせ、「データ挿入」をクリックします

データファイル」を選択し、「適用」をクリックします

データファイルが出てこない??

差し込み用のデータファイルを選択する画面には、”「セグメント」アプリで作成したセグメント”のみが表示されます
b→dashへデータ連携と取り込みを行っただけのデータファイルは表示されませんので、ご注意ください。

差し込みたいカラム」を選択し、「適用」をクリックします

選択したカラムの値が差し込まれます

アプリ接客にセル挿入を行う方法

アプリ接客にセル挿入を行う方法について説明します。
セル挿入とは、アプリ接客の表示対象となるすべてのユーザーに対して、『あるカラムの最新の値』を表示させたい場合に利用する機能です。
例えば、クーポンコードマスターデータにおける『クーポンコード』カラムにある、あるレコードの値が、1月1日~31日までは『01_COUPON』であったものの、2月1日~28日までは同じカラム・同じレコードでも値が『02_COUPON』に更新されるとします。
この場合、1月の間は、すべてのユーザーに対して『01_COUPON』の値が自動挿入され、2月の間は、すべてのユーザーに対して『02_COUPON』の値が自動挿入したい、という場合は、セル挿入機能を利用することで実現ができます。

以下では「クーポン番号」の値を差し込む手順を例に、セル挿入の方法を紹介します。

差し込みたい箇所にカーソルを合わせ、「セル挿入」をクリックします

データファイル」を選択し、「適用」をクリックします

差し込みたいセル」を選択し、「適用」をクリックします

選択したセルの値が差し込まれます

今回は値として「クーポンコード」を差し込みましたが、セルにある他の値も差し込むことができます!
これで内容の編集は完了です!
外部ブラウザへ遷移するリンクのクリック計測やCV計測を行いたい場合は、事前準備が必要です

クリック計測/流入元計測やCV計測を行いたい場合、アプリ接客コンテンツの配信を実施する前に挿入するリンクに対して、b→dash上で設定を行う必要があります
それぞれの設定方法については、以下をご参照ください。

・クリック計測/流入元計測:配信パラメータの付与設定
 b→dash上の設定方法:webサイトへの流入元を取得したい

・CV計測:CV設定
 b→dash上の設定方法:webサイトのCVを取得したい

アプリ接客コンテンツには動画ファイルを差し込むことも可能です

上記の紹介では出てきていませんが、アプリ接客コンテンツには、コンテンツボックスにアップロードしている動画ファイルを差し込むことも可能です

※コンテンツボックスに動画ファイルをアップロードする方法はこちらを参照ください

(参考)「閉じるボタン(✕ボタン)」を編集する

以下では、「閉じるボタン(✕ボタン)」の編集方法について紹介します。
「閉じるボタン」の編集では、以下の項目を編集することができます。

① 閉じるボタンの”デザイン
② 閉じるボタンの”大きさ
③ 閉じるボタンの”位置

ただし、「閉じるボタン」の編集内容は、
「iOS用SDK」は『バージョン 6.3.0』以降
「Android用SDK」は『バージョン 6.2.0』以降
「ReactNative用SDK」は『バージョン 4.1.0』以降
「SDK」を利用している場合のみに反映されますので、ご注意ください。
(参考)「閉じるボタン(✕ボタン)」の編集方法
①「閉じるボタン(✕ボタン)」のデザインを変更する
閉じるボタン」をクリックします

閉じるボタン」のデザインを選択します

適用」をクリックします

デザインが変更されたことを確認します

②「閉じるボタン(✕ボタン)」の大きさを変更する
「閉じるボタン」をクリックします

「閉じるボタン」の枠をドラッグ&ドロップして、任意のサイズに変更します

③「閉じるボタン(✕ボタン)」の位置を変更する
閉じるボタン」をクリックします

「閉じるボタン」をドラッグ&ドロップして、任意の位置に変更します

プレビューで確認する

プレビュー」をクリックします

プレビューが表示されるので、差し込みなどが表示されているかを確認します

プレビューの確認が出来たら、「保存をクリックします

名前」を入力し、「保存をクリックします

web接客一覧に表示されます

アプリ接客のプレビューをSP画面で表示する方法

スマートフォン(SP)の画面におけるアプリ接客のプレビューは、一度アプリ接客を保存した後でないと表示することができません。以下では、アプリ接客のプレビューをSPの画面で表示する方法について説明します。

作成したアプリ接客コンテンツを選択します

詳細」をクリックします

プレビュー」をクリックします

SP画面でのプレビューが表示されます

以上でアプリ接客(GUI)の作成は完了です!