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

Warning：こちらの記事では、2021年12月まで提供していた旧バージョンの Experience におけるポップアップ・固定バーの作成方法をご説明します。それ以降に提供している Experience 2.0 をご利用のお客様は、こちらの記事をご確認ください。

「ポップアップ」または「固定バー」を選定します。お客様オリジナルの内容を新規作成、またはお客様のニーズに合わせて既存テンプレートを利用することも可能です。お客様にもっと品質の高いデザインをより簡単に作成頂くよう、テンプレートにて仕様や業界などに合わせた様々なクリエイティブを用意されており、ヒントやアイディアが得られるかと思います。また、Newエディターでは全ての要素をドロップ＆ドラッグで自由に場所を調整できるので、とても使いやすくなっています。

Warning：ポップアップ・固定バーを、同じ表示条件且つ同タイミングに同じ場所で複数設定すると、ランダムでどちらか一つしか表示されないため、複数設定しないようご注意ください。

デザイン編集 #

デザイン編集画面では、マイライブラリー保存、スタイル編集、レイアウト設定、要素追加、表示停止条件設定の5つの部分があります。

• 1マイライブラリー保存
  編集したクリエイティブをテンプレートライブラリーに保存し、保存した編集クリエイティブを他キャンペーンでも簡単に追加できるようになります。
• 2スタイル編集
  背景、画像、不透明度、角丸、影、クローズボタンの仕様を調整できます。
  
• 3レイアウト設定
  配置（表示場所）、サイズ、オーバーレイを調整できます。
  
• 4要素の追加
  ポップアップや固定バーに追加できる要素は、テキスト、画像、ボタン、図形及びフォームになっています。それぞれの設定方法を下記にてご説明します。

  1. テキストの追加
  削除、コピー、レイヤー、リンク（遷移先やアクションの設定）と編集を行えます。また、編集できる内容：フォント、行間、文字揃え、斜体、下線、取消線、ハイライト、箇条書、番号無しリストとなっています。
  
  2. 画像の追加
  ローカルフォルダからアップロードするか、もしくはURLから画像を追加することができます。更に画像の位置やサイズを自由にドラッグして調整できます。
  
  画像編集では削除、コピー、重なり順、トリミング、クリックリンク、詳細編集が行えます。詳細編集に関しては、画像の不透明度、枠線、角丸、そしてドロップシャドウが編集可能です。
  
  3. ボタンの追加
  
  ボタンの修正ではテキストと同じく削除、コピー、重なり順、リンク（遷移先やアクションの設定可能）、詳細編集ができます。
  
  詳細編集でできる内容は：フォント（サイズ、太さ、色）行間、文字揃え、斜体、下線、取消線、ハイライト、箇条書きなどがあります。
  
  4. 図形の追加
  ポップアップや固定バーの装飾として図形やアイコンを追加することができます。自由にポップアップや固定バーをデザインしてみましょう。
  
  5. フォームの追加
  
  ドラッグ＆ドロップで自由度高くフォームの位置や内容を変更することができます。項目や入力欄などのフォント、色など自由に編集してみましょう。
  更に項目の詳細編集ウィンドウで「ユーザー属性として収集」にチェックを入れれば、実際にユーザーが入力したフォーム内容をユーザー属性として収集することができます。収集した後はユーザーグループで確認したり、パーソナライゼーションに利用することが可能です。
  
  フォームでは削除、重なり順、リンク（遷移先もしくは完了メッセージ）、スタイル編集、項目追加ができます。詳しくはフォーム機能までご参考ください。

表示・停止条件 #

ポップアップや固定バーなどのクリエイティブを編集したら、表示・停止させるタイミングを設定してみましょう。トリガー条件は下記のタイプが選択可能です。

ページ訪問：対象ページをアクセスしてすぐもしくはX秒経過したら、キャンペーンが表示させます。
ブラウザから離脱した時：カーソルがページ内容外に置かれた時（カーソルをページ内容からブラウザのブックマークバーやタブバーなどへ移動）；ブラウザの戻るボタンを押したまたはスワイプ操作をした時、キャンペーンが表示させます。該当ページに5秒以上滞在したことが前提です。
ページのXX％まで閲覧した時：ユーザーが該当ページの違う場所までスクロールした場合表示させるかを判断
アクティビティ停止：アクティビティ（クリック、スクロール）が停止してX秒経過
指定のJavascript：指定のJavascriptが発火されたら表示させる（お客様のニーズに応じて表示させるJSを指定できます）