「HTMLパーツ」について

最終更新日:

2021/11/11のUI刷新 第一弾リリースにてカラースキーム(配色設計)とタイポグラフィ(文字の書体、大きさ、配列のしかたなど)を変更しております。オンラインマニュアルに掲載している画面キャプチャと実際の管理画面の配色や文字の状態が異なる場合がございますがご了承いただけますと幸いでございます。

HTMLパーツでは、ウェブページの要素をSATORI上で作成することができます。

目次

 

HTMLパーツで可能になること

HTMLパーツには以下の2種類があります。

  • ポップアップ
  • エンベッド

SATORI上でHTMLを自由に作成・編集し、Webページに埋め込むHTML要素やポップアップの作成ができます。

※HTMLパーツにJavaScriptやPHPを記述することはできません。

 

HTMLパーツの作成

[HTMLパーツリスト] 画面右上の [+] ボタンから新しいHTMLパーツの作成を行います。
HTMLパーツの作成は以下の手順で行います。

    1. コンテンツを選択する
    2. ポップアップ・エンベッドのコンテンツを設定する
    3. HTMLパーツを設置する

 

1. コンテンツを選択する

左メニューの [HTMLパーツ] > 画面右上の [+] をクリックします。
作成するHTMLパーツの種類を「ポップアップ」または「エンベッド」から選択します。
htmlparts_202412_01.png

 

2. ポップアップ・エンベッドのコンテンツを設定する

 

2-1. HTMLパーツの作成

[HTMLパーツ名] を入力し、コンテンツを編集します。
コンテンツ編集では「TinyMCE」というWYSIWYGエディタを利用しています。
画像やリンクの挿入など基本的な操作は、コーディングやHTMLの知識がなくても簡単に行うことが可能です。
詳細な使用方法は、オンラインマニュアル(WYSIWYGエディタ)をご参照ください。

htmlparts_202412_02.png

 

2-2. CSSの設定

[プレビュー・CSS設定] 画面の右側で、CSSを変更することが可能です。
※HTML・CSSの具体的な記述につきましてはサポート範囲外となります。

 

2-3. プレビューの確認

[プレビュー・CSS設定] 画面で、HTMLパーツのプレビューを表示します。
[スマートフォンモード] をONにすると、スマートフォンでの表示プレビューに切り替わります。
※プレビューページは「管理画面上で作成したコンテンツが外部のCSS等影響を受けていない状態のプレビュー」です。
実際に設置するページのCSSやJavaScriptの影響を受け、意図しない表示となる可能性があるため、必ず確認をお願いします。

htmlparts_202412_03.png

 

2-4. ターゲットの設定

HTMLパーツを表示するセグメントを選択します。
すべてのカスタマー(ウェブサイトに訪問したすべてのカスタマー)にフォームを表示させる場合は、[全てのカスタマーを対象にする] を選択します。

htmlparts_202412_04.png

 

2-5. ポップアップの設定 (HTMLパーツの種類に「ポップアップ」を選択した場合)

[ポップアップ設定] 画面で、ポップアップの表示方法を指定します。項目は以下の通りです。

htmlparts_202412_05.png

項目 内容
① 表示する場所

ポップアップを表示する場所を「右上」「中央」「右下」から指定します

② ポップアップさせるタイミング

ポップアップさせるタイミングを以下種類から選択します

  • 即時
    即時にポップアップが表示されます
  • スクロール量を指定
    指定したピクセルだけスクロールした際にポップアップが表示されます
  • スクロールパーセントを指定
    指定した%だけスクロールした際にポップアップが表示されます
  • 'satori__popup_button' class付きボタン押下時
    'satori__popup_button' というクラス名の付いたHTML要素をクリックした際にポップアップが表示されます
    詳細はこちらをご参照ください
  • 時間
    ポップアップが表示されるまでの秒数を指定できます
  • 任意のタイミング
    SatoriHTMLPart.showWidget(); を実行することにより、ポップアップが表示されます

③ 閉じるボタンの動作

ポップアップの閉じるボタンを押した時の挙動を選択します

  • 以降表示しない
    閉じるボタンを押すと、そのポップアップは表示されなくなります
  • 再アクセス時には再度表示
    閉じるボタンを押すと最小化され、再度ポップアップを設置したページにアクセスが有った場合には、再度ポップアップが表示されます
  • 以降最小化状態で表示
    閉じるボタンを押すと最小化され、再度ポップアップを設置したページにアクセスが有った場合には、最小化状態のまま表示されます

 

2-6. エンベッドの設定 (HTMLパーツの種類に「エンベッド」を選択した場合)

[エンベッド設定] 画面でエンベッド名を入力し、[登録] をクリックします。

htmlparts_202412_06.png

 

2-7. コンテンツの設定

コンテンツ欄の右側 [+] ボタンからコンテンツを追加できます。複数のコンテンツを登録することでABテストが可能です。
※複数のコンテンツを登録した場合、ターゲット条件を満たすコンテンツが均等な割合で表示されます。順番はランダムに決まります。 

htmlparts_202412_09.png

 

2-8. 目標の設定

目標欄の [歯車] マークから目標を設定できます。目標を設定することで、ポップアップのコンテンツ毎の目標到達数(目標到達率)を計測可能です。
※目標到達数(目標到達率)はコンテンツが「HTMLパーツ」の場合のみ計測可能です。

htmlparts_202412_10.png

 

3. HTMLパーツを設置する

すべての設定を完了すると、HTMLパーツを表示させるための設置コードが表示されます。
設置コードは、[コードをコピーする] ボタンを押すとコピーできます。
以下のいずれかの方法でHTMLパーツをウェブページに設置してください。

GTM(Googleタグマネージャー)を使用して設置する場合はこちらをご参照ください。
※活用支援サイトはSATORI有料ご契約者様のみご覧いただけます。閲覧方法についてはこちらをご確認ください。

ポップアップを設置する

設置コードをbody閉じタグ(</body>)の直前に設置してください。

htmlparts_202412_07.png

エンベッドを設置する

設置コードをbodyタグ内(<body>~</body>)の表示させたい位置に設置してください。

htmlparts_202412_08.png

この記事は役に立ちましたか?

1人中0人がこの記事が役に立ったと言っています