テーマを使用してパーソナライズを作成する

テーマについて

ecforce profileでは、テーマを使用することで簡単にパーソナライズを作成することができます。
現在、ご使用いただけるテーマは以下です。

• スタンダード
• スタンダード（角丸）
• スタンダード（アニメーション）

本記事では、テーマを使用したパーソナライズの作成手順についてご案内します。

テーマを設定してパーソナライズを作成する

「パーソナライズ一覧 > 新規作成」をクリックし、【パーソナライズ新規作成】画面にて、使用するテーマを選択して「登録する」をクリックします。

※パーソナライズの作成方法については、パーソナライズ一覧をご参照ください。

テーマを設定してページを作成する

1.トップページを作成する

【質問・選択肢作成】画面にて「ページ追加」をクリックし、【ページ追加】画面にて、「トップページ」のテーマを選択かつトップページに表示させたい画像を選択して「作成する」をクリックします。

作成したページは以下のように表示されます。

2.フォームのページを作成する

【質問・選択肢作成】画面にて「ページ追加」をクリックし、【ページ追加】画面にて、「フォーム」のテーマを選択して「作成する」をクリックします。

作成したページの「＋ 質問追加」をクリックし、【質問追加】画面にて質問を設定して「作成する」をクリックします。

作成した質問の「＋」をクリックし、【選択肢追加】画面にて「入力項目」にチェックを入れ「作成する」をクリックします。

作成したページは以下のように表示されます。

選択肢が複数ある場合は、以下のように表示されます。

なお、フォームには「必須項目」や「入力形式」を設定することができます。
詳細はフォームに属性を設定するをご参照ください。

3.選択形式（画像テキスト内包/画像テキスト分離）のページを作成する

【質問・選択肢作成】画面にて「ページ追加」をクリックし、【ページ追加】画面にて、「選択_画像テキスト内包」または「選択_画像テキスト分離」のテーマを選択して「作成する」をクリックします。

作成したページにて「＋ 質問追加」をクリックし、【質問追加】画面にて、質問を設定して「作成する」をクリックします。
※「選択方式」は「複数選択」か「単一選択」のどちらかを選択してください。なお、「複数選択」を選択した場合はチェックボックス形式で選択肢が表示され、「単一選択」を選択した場合はラジオボタン形式で選択肢が表示されます。

作成した質問の「＋」をクリックし、【選択肢追加】画面にて、選択肢に表示させたい画像を選択して「作成する」をクリックします。

作成したページは以下のように表示されます。

<「選択_画像テキスト内包」のテーマの場合＞

<「選択_画像テキスト分離」のテーマの場合＞

4.選択形式（テキスト）のページを作成する

【質問・選択肢作成】画面にて「ページ追加」をクリックし、【ページ追加】画面にて、「選択_テキスト」のテーマを選択して「作成する」をクリックします。

作成したページにて「＋ 質問追加」をクリックし、【質問追加】画面にて、質問を設定して「作成する」をクリックする。
※「選択方式」は「複数選択」か「単一選択」のどちらかを選択してください。なお、「複数選択」を選択した場合はチェックボックス形式で選択肢が表示され、「単一選択」を選択した場合はラジオボタン形式で選択肢が表示されます。

作成した質問の「＋」をクリックし、【選択肢追加】画面にて、選択肢を設定して「作成する」をクリックします。

作成したページは以下のように表示されます。

5.結果ページを作成する

デフォルトの結果ページは、以下のように表示されます。

名称	説明
トータルスコア	「BAD」「NORMAL」「GOOD」「EXCELLENT」のいずれかに判定できます。
レーダーチャート	4項目のレーダーチャートを表示できます。
おすすめ商品	9種類の内1種類の商品を表示できます。
メッセージA メッセージB メッセージC	各メッセージ、3種類の内1種類のメッセージを表示できます。

結果ページを使用する場合、以下を行う必要があります。
・選択肢にスコアを設定する（結果ページの内容は、回答結果のスコアを元に表示されるため）
・【ページ設定】画面にて、結果ページの「HTML」を編集する（テキストや画像を変更するため）

結果ページを作成する手順の詳細は、以下をご覧ください。

(1)結果ページを作成する
(2)選択肢にスコアを設定する
(3)結果ページのHTMLを編集する

(1)結果ページを作成する

【質問・選択肢作成】画面にて「ページ追加」をクリックし、【ページ追加】画面にて、「結果ページ」のテーマを選択して「作成する」をクリックします。

(2)選択肢にスコアを設定する

【質問・選択肢作成】画面にて、選択肢にスコアを設定します。

トータルスコア用のスコア設定
レーダーチャート用のスコア設定
おすすめ商品用のスコア設定
メッセージ用のスコア設定

※スコアの詳細についてはスコアについてをご覧ください。

＜トータルスコア用のスコア設定＞

結果ページをデフォルトのまま使用する場合、トータルスコアの算出に使用する変数名は「totalscore」であるため、スコアは「totalscore = 任意の値」で設定してください。

＜レーダーチャート用のスコア設定＞

結果ページをデフォルトのまま使用する場合、レーダーチャートの表示に使用する変数名は「chart_X」（X=a,b,c,d）であるため、スコアは「chart_X = 任意の値」（X=a,b,c,d）で設定してください。

＜おすすめ商品用のスコア設定＞

結果ページをデフォルトのまま使用する場合、おすすめ商品の判定に使用する変数名は「product_X」（X=a,b）であるため、スコアは「product_X = 0~2までの値」（X=a,b）で設定してください。

＜メッセージ用のスコア設定＞

結果ページをデフォルトのまま使用する場合、メッセージの判定に使用する変数名は「msg_X」（X=a,b,c）であるため、スコアは「msg_X = 0~2までの値」（X=a,b,c）で設定してください。

(3)結果ページのHTMLを編集する

【ページ設定】画面にて、「結果ページ」のテーマが適用されているページの「HTML」を編集します。

トータルスコアのタイトルの編集
レーダーチャートのタイトルの編集
レーダーチャートの項目名の編集
おすすめ商品のタイトルの編集
おすすめ商品の商品名の編集
おすすめ商品の画像の編集
メッセージのタイトルの編集
メッセージの編集
メッセージの画像の編集

＜トータルスコアのタイトルの編集＞

HTMLの以下のダブルクォーテーション内の箇所を変更してください。

86行目 「var totalscoretitle = "トータルスコアタイトル";」

変更すると、結果ページのトータルスコアのタイトルが変わります。

＜レーダーチャートのタイトルの編集＞

HTMLの以下のダブルクォーテーション内の箇所を変更してください。

110行目 「var chartTitle = "チャートタイトル";」

変更すると、結果ページのレーダーチャートのタイトルが変わります。

＜レーダーチャートの項目名の編集＞

HTMLの以下のダブルクォーテーション内の箇所を変更してください。

・114行目 「chartLabels.push("項目A");」
・117行目 「chartLabels.push("項目B");」
・120行目 「chartLabels.push("項目C");」
・123行目 「chartLabels.push("項目D");」

変更すると、結果ページのレーダーチャートの項目名が変わります。

＜おすすめ商品のタイトルの編集＞

HTMLの以下のダブルクォーテーション内の箇所を変更してください。

167行目 「var productTitle = "商品タイトル";」

変更すると、結果ページのおすすめ商品のタイトルが変わります。

＜おすすめ商品の商品名の編集＞

HTMLの以下のダブルクォーテーション内の箇所を変更してください。

・169行目 「var productName = "商品A";」
・172行目 「productName = "商品A";」
・175行目 「productName = "商品B";」
・178行目 「productName = "商品C";」
・181行目 「productName = "商品D";」
・184行目 「productName = "商品E";」
・187行目 「productName = "商品F";」
・190行目 「productName = "商品G";」
・193行目 「productName = "商品H";」
・196行目 「productName = "商品I";」

変更すると、結果ページのおすすめ商品の商品名が変わります。

＜おすすめ商品の画像の編集＞

HTMLの以下のimageタグのsrc属性に指定されているURLを、表示させたい画像のURLに変更してください。

・34行目 「<img class="product_a" src="https://d14z86bolisqf0.cloudfront.net/a/2/assets/img/sampleimage_12.jpg" style="display:none;" alt="">」
・35行目 「<img class="product_b" src="https://d14z86bolisqf0.cloudfront.net/a/2/assets/img/sampleimage_12.jpg" style="display:none;" alt="">」
・36行目 「<img class="product_c" src="https://d14z86bolisqf0.cloudfront.net/a/2/assets/img/sampleimage_12.jpg" style="display:none;" alt="">」
・37行目 「<img class="product_d" src="https://d14z86bolisqf0.cloudfront.net/a/2/assets/img/sampleimage_12.jpg" style="display:none;" alt="">」
・38行目 「<img class="product_e" src="https://d14z86bolisqf0.cloudfront.net/a/2/assets/img/sampleimage_12.jpg" style="display:none;" alt="">」
・39行目 「<img class="product_f" src="https://d14z86bolisqf0.cloudfront.net/a/2/assets/img/sampleimage_12.jpg" style="display:none;" alt="">」
・40行目 「<img class="product_g" src="https://d14z86bolisqf0.cloudfront.net/a/2/assets/img/sampleimage_12.jpg" style="display:none;" alt="">」
・41行目 「<img class="product_h" src="https://d14z86bolisqf0.cloudfront.net/a/2/assets/img/sampleimage_12.jpg" style="display:none;" alt="">」
・42行目 「<img class="product_i" src="https://d14z86bolisqf0.cloudfront.net/a/2/assets/img/sampleimage_12.jpg" style="display:none;" alt="">」

変更すると、結果ページのおすすめ商品の画像が変わります。

＜メッセージのタイトルの編集＞

HTMLの以下のダブルクォーテーション内の箇所を変更してください。

・204行目 「var msgATitle = "メッセージAタイトル";」
・218行目 「var msgBTitle = "メッセージBタイトル";」
・232行目 「var msgCTitle = "メッセージCタイトル";」

変更すると、結果ページのメッセージのタイトルが変わります。

＜メッセージの編集＞

HTMLの以下のダブルクォーテーション内の箇所を変更してください。

・205行目 「var msgA = "メッセージA_1";」
・207行目 「msgA = "メッセージA_1";」
・209行目 「msgA = "メッセージA_2";」
・211行目 「msgA = "メッセージA_3";」
・219行目 「var msgB = "メッセージB_1";」
・221行目 「msgB = "メッセージB_1";」
・223行目 「msgB = "メッセージB_2";」
・225行目 「msgB = "メッセージB_3";」
・233行目 「var msgC = "メッセージC_1";」
・235行目 「msgC = "メッセージC_1";」
・237行目 「msgC = "メッセージC_2";」
・239行目 「msgC = "メッセージC_3";」

※205行目と219行目と233行目のダブルクォーテーション内の箇所は、
スコアの値がない、もしくはスコアの値が「0」「1」「2」以外の場合に表示させたいメッセージに変更してください。

変更すると、結果ページのメッセージが変わります。

＜メッセージの画像の編集＞

HTMLの以下のimageタグのsrc属性に指定されているURLを、表示させたい画像のURLに変更してください。

・53行目 「<img alt="" src="https://d14z86bolisqf0.cloudfront.net/a/2/assets/img/sampleimage_13.jpg" />」
・61行目 「<img alt="" src="https://d14z86bolisqf0.cloudfront.net/a/2/assets/img/sampleimage_14.jpg" />」
・69行目 「<img alt="" src="https://d14z86bolisqf0.cloudfront.net/a/2/assets/img/sampleimage_15.jpg" />」

変更すると、結果ページのメッセージの画像が変わります。

フォームに属性を設定する

「フォーム」のテーマを使用している場合、フォームに属性を設定することができます。

1.属性を設定する

選択肢の「属性名」と「属性値」に値を入力し、「追加」をクリックします。
※以下の画像では、フォームを必須項目にするために、「属性名」に「required」を「属性値」に「１」を入力しています。

属性が追加された状態であることを確認したら、「作成する」をクリックします。

以下の通り、フォームが必須項目となります。

2.フォームに設定できる属性

フォームに設定できる属性は以下の通りです。
※type属性の指定がない場合、"type=text"となります。

属性名	属性値	説明
required	1	必須項目になります。
placeholder	プレースホルダーに表示させたい文言	プレースホルダーが表示されます。
type	text	一行テキストボックスになります。
type	tel	電話番号入力欄になります。
type	url	URL入力欄になります。
type	email	メールアドレス入力欄になります。
type	password	パスワード入力欄になります。
type	datetime-local	日時の入力欄になります。
type	date	日付の入力欄になります。
type	month	月の入力欄になります。
type	week	週の入力欄になります。
type	time	時間の入力欄になります。
type	number	数値の入力欄になります。
min	入力欄の最小値	数値や日付の入力欄の最小値を設定できます。
max	入力欄の最大値	数値や日付の入力欄の最大値を設定できます。