「HTMLパーツ」について

最終更新日:

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

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

HTMLパーツ

HTMLパーツとは、ウェブページの要素をSATORI上で簡単に作成できる機能です。

HTMLパーツの種類には

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

の二種を指定でき、SATORI上でHTMLを自由に作成・編集して自社のウェブページに埋め込むHTML要素を追加や、ポップアップの作成ができます。

 メニューの場所

コンテンツセクションを開きHTMLパーツメニューに進むと表示されます

HTML___1.png

 

 HTMLパーツ新規登録方法

 

HTMLパーツは以下のステップで作成していきます

  1. コンテンツ作成方法選択
  2. コンテンツ設定
  3. プレビュー・CSS設定
  4. ターゲット設定
  5. エンベッド・ポップアップ設定
  6. 設置コードの取得

1.コンテンツ作成方法選択

ポップアップ表示・エンベッドの2種類から作成するHTMLパーツを選択します

HTML___1.png

 

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

入力が必要な項目は以下の2項目となります

  • 「HTMLパーツ名」
  • 「パーツの内容」(WYSIWYGエディタで作成)

 HTML___2.png

 

 3.プレビュー・CSS設定

基本設定で設定したHTMLパーツのプレビューを表示します。

CSSを編集することで自由にポップアップの表示を編集することが可能です。

編集が完了したら、「登録」ボタンを押下して、タッゲット設定を行います

HTML___3.png

 

4.ターゲット設定

HTMLパーツを表示するセグメントを選択します。すべてのユーザーに表示する場合は、「全てのカスタマーを対象にする」を選択します

HTML___4.png

 

5.ポップアップ設定

HTMLパーツを表示する場所とタイミングを設定します

HTML___5.png

※エンベッド設定画面

HTML___6.png

以下それぞれの項目の説明です。

以下の項目は「ポップアップ」選択時にのみ表示されます。
※エンベッドの場合は以下の選択はできません

  • 表示する場所」はポップアップを表示する場所を指定します。
  • ポップアップさせるタイミング」は以下の種類より選択できます。
    1. 即時(即時にポップアップが表示されます)
    2. スクロール量(指定したピクセルだけスクロールした際にポップアップが表示されます。
    3. スクロールパーセント(指定した%だけスクロールした際にポップアップが表示されます。
    4. 'satori__popup_button' class付きボタン押下時('satori__popup_button' というクラス名の付いたHTML要素をクリックした際にポップアップが表示されます)
    5. 時間(ポップアップが表示されるまでの秒数を指定できます。)
    6. 任意のタイミング(SatoriHTMLPart.showWidget(); を実行することにより、ポップアップが表示されます)

 

  • 閉じるボタンの動作」は以下の種類より選択できます。
    ※エンベッドの場合は以下の選択はできません
    1. 以降表示しない(閉じるボタンを押すと、そのポップアップは表示されなくなります)
    2. 再アクセス時には再度表示(閉じるボタンを押すと最小化され、再度HTMLパーツを設置したページにアクセスが有った場合には、再度ポップアップが表示されます)
    3. 以降最小化状態で表示(閉じるボタンを押すと最小化され、再度HTMLパーツを設置したページにアクセスが有った場合には、最小化状態のまま表示されます)

コンテンツ追加をクリックすると、複数のHTMLパーツを設置して、ABテストを実施する事ができます。

 

6.設置コードの取得

 

_______230524_1.png

______230524_1.png

登録が完了すると、「HTMLパーツ設置コード」が取得できますので、HTMLパーツを表示したいウェブページに設置してください。

  • ポップアップ」を選択している場合はbody閉じタグ(</body>)の直前に設置してください。
  • エンベッド」を選択している場合は、表示させたい任意の箇所に設置してください。

※ポップアップのGTM連携につきましてはこちらをご参照ください。

 

 

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

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