HTMLパーツでは、ウェブページの要素をSATORI上で作成することができます。
目次
HTMLパーツで可能になること
HTMLパーツには以下の2種類があります。
- ポップアップ
- エンベッド
SATORI上でHTMLを自由に作成・編集し、Webページに埋め込むHTML要素やポップアップの作成ができます。
※HTMLパーツにJavaScriptやPHPを記述することはできません。
HTMLパーツの作成
[HTMLパーツリスト] 画面右上の [＋] ボタンから新しいHTMLパーツの作成を行います。
HTMLパーツの作成は以下の手順で行います。
1. コンテンツを選択する
左メニューの [HTMLパーツ] > 画面右上の [＋] をクリックします。
作成するHTMLパーツの種類を「ポップアップ」または「エンベッド」から選択します。
2. ポップアップ・エンベッドのコンテンツを設定する
- 2-1. HTMLパーツの作成
- 2-2. CSSの設定
- 2-3. プレビューの確認
- 2-4. ターゲットの設定
- 2-5. ポップアップの設定
- 2-6 エンベッドの設定
- 2-7. HTMLパーツの設定
- 2-8. 目標の設定
2-1. HTMLパーツの作成
[HTMLパーツ設定画面] で、コンテンツを編集します。
| 項目 | 内容 |
| ① 期間 |
コンテンツの表示期間を指定します。表示開始日時より前、および表示終了日時より後は、コンテンツは表示されません。 |
|
② 優先度 |
1つのエンベッドまたはポップアップに複数のコンテンツを設定している場合、どのコンテンツを優先して表示するかを指定します。 |
|
③ エディタ画面 |
コンテンツ内容を編集します。 |
2-2. CSSの設定
[プレビュー・CSS設定] 画面の右側で、CSSを変更することが可能です。
※HTML・CSSの具体的な記述につきましてはサポート範囲外となります。
2-3. プレビューの確認
[プレビュー・CSS設定] 画面で、HTMLパーツのプレビューを表示します。
[スマートフォンモード] をONにすると、スマートフォンでの表示プレビューに切り替わります。
※プレビューページは「管理画面上で作成したコンテンツが外部のCSS等影響を受けていない状態のプレビュー」です。
実際に設置するページのCSSやJavaScriptの影響を受け、意図しない表示となる可能性があるため、必ず確認をお願いします。
2-4. ターゲットの設定
HTMLパーツを表示するセグメントを選択します。
すべてのカスタマー（ウェブサイトに訪問したすべてのカスタマー）にフォームを表示させる場合は、[全てのカスタマーを対象にする] を選択します。
2-5. ポップアップの設定 (HTMLパーツの種類に「ポップアップ」を選択した場合)
[ポップアップ設定] 画面で、ポップアップの表示方法を指定します。項目は以下の通りです。
| 項目 | 内容 |
| ① 表示する場所 |
ポップアップを表示する場所を「右上」「中央」「右下」から指定します |
|
② ポップアップさせるタイミング |
ポップアップさせるタイミングを以下種類から選択します
|
|
③ 閉じるボタンの動作 |
ポップアップの閉じるボタンを押した時の挙動を選択します
|
2-6. エンベッドの設定 (HTMLパーツの種類に「エンベッド」を選択した場合)
[エンベッド設定] 画面でエンベッド名を入力し、[登録] をクリックします。
2-7. コンテンツの設定
コンテンツ欄の右側 [＋] ボタンからコンテンツを追加できます。複数のコンテンツを登録することでABテストが可能です。
※複数のコンテンツを登録した場合、ターゲット条件を満たすコンテンツが均等な割合で表示されます。順番はランダムに決まります。
2-8. 目標の設定
目標欄の [歯車] マークから目標を設定できます。目標を設定することで、ポップアップのコンテンツ毎の目標到達数（目標到達率）を計測可能です。
※目標到達数（目標到達率）はコンテンツが「HTMLパーツ」の場合のみ計測可能です。
3. HTMLパーツを設置する
すべての設定を完了すると、HTMLパーツを表示させるための設置コードが表示されます。
設置コードは、[コードをコピーする] ボタンを押すとコピーできます。
以下のいずれかの方法でHTMLパーツをウェブページに設置してください。
GTM（Googleタグマネージャー）を使用して設置する場合はこちらをご参照ください。
※活用支援サイトはSATORI有料ご契約者様のみご覧いただけます。閲覧方法についてはこちらをご確認ください。
ポップアップを設置する
設置コードをbody閉じタグ（</body>）の直前に設置してください。
エンベッドを設置する
設置コードをbodyタグ内（<body>～</body>）の表示させたい位置に設置してください。