2021/11/11のUI刷新 第一弾リリースにてカラースキーム(配色設計)とタイポグラフィ(文字の書体、大きさ、配列のしかたなど)を変更しております。オンラインマニュアルに掲載している画面キャプチャと実際の管理画面の配色や文字の状態が異なる場合がございますがご了承いただけますと幸いでございます。
HTMLパーツでは、Webページの要素をSATORI上で作成することができます。
目次
HTMLパーツで可能になること
HTMLパーツには以下の2種類があります。
- ポップアップ
- エンベッド
SATORI上でHTMLを自由に作成・編集してWebページに埋め込むHTML要素を追加やポップアップの作成ができます。
※HTMLパーツにJavaScriptやPHPを記述することはできません。
HTMLパーツの作成
「HTMLパーツリスト」画面右上の「＋」ボタンから新しいHTMLパーツの作成を行います。
HTMLパーツの作成は以下の手順で行います。
1. コンテンツの選択
作成するHTMLパーツの種類を「ポップアップ」または「エンベッド」から選択します。
2. ポップアップ・エンベッドのコンテンツ設定
入力が必要な項目は以下の2項目となります。
- 「HTMLパーツ名」
- 「パーツの内容」（WYSIWYGエディタで作成）
HTMLパーツを編集するツールとして、「TinyMCE」というWYSIWYGエディタを利用しております。
画像やリンクの挿入など基本的な操作は、コーディングやHTMLの知識がなくても簡単に行うことが可能です。
詳細は、オンラインマニュアル（WYSIWYGエディタ）をご参照ください。
2-1. プレビュー・CSS設定
基本設定で設定したHTMLパーツのプレビューを表示します。
CSSを編集することで自由にポップアップの表示を編集することが可能です。
編集が完了したら、「登録」ボタンを押下して、タッゲット設定を行います。
2-2. ターゲット設定
HTMLパーツを表示するセグメントを選択します。すべてのユーザーに表示する場合は、「全てのカスタマーを対象にする」を選択します。
2-3. ポップアップ・エンベッドの設定
名称を設定します。コンテンツの設定でポップアップを選択した場合は、HTMLパーツを表示する場所やタイミングも設定します。
※ポップアップの設定画面
※エンベッドの設定画面
以下それぞれの項目の説明です。
以下の項目は「ポップアップ」選択時にのみ表示されます。
※エンベッドの場合は以下の選択はできません
- 「表示する場所」はポップアップを表示する場所を指定します。
- 「ポップアップさせるタイミング」は以下の種類より選択できます。
- 即時（即時にポップアップが表示されます）
- スクロール量（指定したピクセルだけスクロールした際にポップアップが表示されます。
- スクロールパーセント（指定した％だけスクロールした際にポップアップが表示されます。
- 'satori__popup_button' class付きボタン押下時（'satori__popup_button' というクラス名の付いたHTML要素をクリックした際にポップアップが表示されます）
- 時間（ポップアップが表示されるまでの秒数を指定できます。）
- 任意のタイミング（SatoriHTMLPart.showWidget(); を実行することにより、ポップアップが表示されます）
- 「閉じるボタンの動作」は以下の種類より選択できます。
- 以降表示しない（閉じるボタンを押すと、そのポップアップは表示されなくなります）
- 再アクセス時には再度表示（閉じるボタンを押すと最小化され、再度HTMLパーツを設置したページにアクセスが有った場合には、再度ポップアップが表示されます）
- 以降最小化状態で表示（閉じるボタンを押すと最小化され、再度HTMLパーツを設置したページにアクセスが有った場合には、最小化状態のまま表示されます）
コンテンツ追加をクリックすると、複数のHTMLパーツを設置して、ABテストを実施する事ができます。
3. 設置コードの取得
登録が完了すると「設置コード」が取得できます。HTMLパーツを表示したいWebページに設置してください。
※ポップアップのGTM連携につきましてはこちらをご参照ください。
- 「ポップアップ」を選択している場合は、body閉じタグ（</body>）の直前に設置してください。
- 「エンベッド」を選択している場合は、表示させたい任意の箇所に設置してください。