パーソナライズの作成・管理

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

テーマについて

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

  • スタンダード
  • スタンダード(角丸)
  • スタンダード(アニメーション)

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

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

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

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

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

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」を「属性値」に「1」を入力しています。

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

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

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 入力欄の最大値 数値や日付の入力欄の最大値を設定できます。

 

この記事の目次

このセクションの記事

パーソナライズの作成・管理