ポップアップ/固定バーの作成

体験作成 #

  • 1「体験を新規作成」から体験を作成し、「Web接客」を選択します。
  • 2体験名を設定し、体験作成へ進めてください。
  • 3テンプレートまたは「空のポップアップを作成」を選択し、ポップアップ・固定バー作成画面に入ります。

ポップアップの編集 #

ポップアップ編集には下記の機能があります。

  • 1位置とサイズ
    ポップアップの配置、サイズを選択できます。「オーバーレイ」にチェックを入れると、ポップアップ表示時に背景がグレイアウトされます。
  • 2背景とスタイル
    背景をカラーコードまたは画像から選択、ポップアップの角の鋭角や、影、クローズボタンの設置を調整できます。
  • 3クリックアクション
    ポップアップ内に配置した要素に対して、クリックアクションイベント計測を有効化できます。

    Note:「リンクへ遷移」「LINE公式アカウントを開く」を利用する場合は、下記の設定もご活用ください。
    新しいタブで開く:指定したURLを新しいタブで開きます。
    クリック後、ポップアップを閉じる:この要素をクリックしたらポップアップが自動的に閉じます。

  • 4マイテンプレートに保存
    編集したクリエイティブをテンプレートとしてライブラリーに保存でき、他の体験でも簡単に利用できます。
  • 5要素の追加・編集
    ポップアップには、左側のツールバーからテキスト、画像、動画、ボタン、図形、フォームといった要素を追加できます。追加した要素は簡単に編集することも可能です。

テキスト #

新たにテキスト要素を追加したい場合は、左側のツールバーからテキストアイコンをクリックします。
テキスト要素を選択すると、ツールバーが現れ、編集、クリックアクション、コピー、レイヤー、削除が可能です。フォントや行間、文字揃え、斜体、下線、取消線、ハイライト、箇条書、番号無しリストなどを編集したい場合は、「編集」をクリックしてください。

画像 #

新しく画像を追加したい場合は、画像アイコンをクリックしてください。お手持ちの画像を追加することができます。ローカルフォルダからのアップロードまたはURLに対応しています。

<アップロード可能な画像形式>
形式:jpeg,png,gif,avif,webp,ico,svg
容量:最大6メガバイト

画像要素をクリックすると、画像変更、スタイル編集(不透明度、枠線の太さ、角丸、影)、クリックアクション、コピー、レイヤー、トリミング、その他の設定が行えます。その他の設定からは、代替テキスト(Alt)の設定が可能です。

動画 #

ビデオアイコンからは動画を追加することができます。YouTube URLまたはiframeをご利用ください。

(1) YouTube URL:ブラウザに表示されるリンク、または共有URLにて動画を追加できます。(例:https://www.youtube.com/watch?v=-_p7pkxjkiM
(2) iframe:様々な動画プラットフォームで発行されている埋め込み用のiframeコードにて動画を追加できます(例: &ltiframe&gt…&lt/iframe&gt)。

サムネイルについて

ビデオURLを選択した場合は、サムネイル用画像を追加できます。
YouTubeリンクの場合は、YouTubeで設定したサムネイルが使用されます。

再生設定について

動画を自動的に再生するか、ループ再生にするか、コントロールバーを表示するかについて設定することができます。

ボタン #

新しくボタンを追加したい場合はボタンアイコンをクリックしてください。編集をクリックすると、フォント(サイズ、太さ、色)、行間、文字揃え、斜体、下線、取消線、ハイライト、箇条書きなどを設定できます。

図形 #

図の追加からは、ポップアップや固定バーの装飾として様々なアイコンを追加することができます。

フォーム #

フォームはポップアップまたは固定バーに1つまで追加できます。

お好きなテンプレートから追加したフォームは、要素ごとにドラック&ドロップで移動したり、サイズの調整、項目、入力欄などのフォント、色などを自由に編集できます。

ユーザー属性として収集 #

フォームの項目に入力された内容は、ユーザー属性データとして収集することが可能です。ユーザー属性として収集すると、体験配信の対象ユーザーに指定したり、ユーザーグループからレポートを確認することができます。

ユーザー属性としてデータを収集する場合は、項目の編集から、「ユーザー属性として収集」にチェックを入れれてください。

詳しくはフォーム機能をご参考ください。

表示・停止条件の設定 #

クリエイティブを保存したら、表示・停止させるタイミングを設定してみましょう。(アドバンス編集モードの場合は、クリエイティブ編集画面よりポップアップの表示・停止条件の設定を行ってください。)

特定のタイミングで表示

  • 1ブラウザから離脱した時:
    該当ページに 5 秒以上滞在した上で、下記の条件を満たす必要があります。
    PCの場合:カーソルがページ内容外に置かれた時(ブラウザのブックマークバーやタブバーなどへ移動した時)。
    スマホの場合:ブラウザの戻るボタンを押す、またはスワイプ操作をした時に体験が表示されます。
    詳しくはこちらの記事をご確認ください。
  • 2アクティビティ:
    ユーザーの最後のアクティビティ(クリック、スクロール)からX秒経過した時
  • 3ページ訪問:
    対象ページをアクセスして X 秒経過した時
  • 4ページのXX%まで閲覧した時:
    ユーザーが該当ページの指定の位置までスクロールした時
  • 5指定のJavascriptコード:
    指定のJavascriptが発火した時(詳細はこちらの記事をご確認ください)

特定のタイミングで停止

  • 1ユーザーにX回表示した後:
    表示回数がX回に達したユーザーには体験の配信を停止ます。
  • 2ユーザーがX回以上クローズ:
    ポップアップの「閉じる」ボタンをクリックした数がX回に達したユーザーには体験の配信を停止ます。
  • 31回でもボタンや画像をクリックした場合:
    体験のエディターから追加したボタンまたは画像を1回クリックしたユーザーには体験の配信を停止ます。
  • 4フォームに回答した場合:
    体験のエディターから追加したフォームに回答したユーザーには体験の配信を停止ます。

頻度

  • 11セッションでX回まで
    1回のセッション内に表示する回数を制限します。
  • 21日ごとに最大X回表示
    1日に表示する回数を制限します。
  • 以降の配信条件の設定についてはこちらの記事をご確認ください。

また、頻度設定はアドバンスモードをご利用の場合、ご利用いただけません。ご注意ください。

Webアクセシビリティへの対応 #

Ptengine Experienceで設置するすべてのポップアップ・固定バーは、キーボード入力に対応しています。詳しくはWebアクセシビリティへの対応をご参照ください。

この記事についてどう思いますか?

  • いいですね!
  • よくないです

評価いただきありがとうございました

  申しわけありません!理由を教えてください。

    サポートチームに直接問合せたい場合、こちらをクリックしてチャットしましょう