+10、-10:: 訪問者のメールアドレスをWebサイトアドレスと紐付けることで、顧客にアプローチし、法人のコンバージョン向上に必要な情報をPageSenseのポップアップテンプレートエディターで収集できます。1:: 2:: 使いやすいドラッグ3:: –4:: アンド5:: –6:: ドロップエディターでは、7:: 8:: カスタム要素9:: （例えば10:: テキスト、画像、11:: ビデオ、入力箱、ソーシャルメディア、ラジオボタン、その他12:: ）を、13:: ポップアップボックスにHTMLやCSSの知識なしで14:: 挿入できます。また、15:: 16:: 17:: 18:: 各要素の外観（ 19:: 背景色、影の効果、20:: または21:: 境界線のスタイルなど） 22:: 多彩な設定23:: を左側の24:: パ25:: ンで利用できます。  

26:: 本記事では、PageSenseのテンプレートエディターを使用して、ポップアップ内にさまざまなタイプの要素を追加・カスタマイズする方法を説明します。

27:: ポップアップに新しい要素を挿入するには：

33:: 34:: グリッドを35:: 挿入する

グリッドは、行と列のコンテナで構成されており、ポップアップの初期構造を作成するために使用します。その後、必要なコンテンツ要素を追加することで、コンセプトに最適な場所にコンテンツを整理・配置できます。テンプレートエディターでグリッド構造を選択すると、自動的に1つまたはその他の空の列や行がポップアップに配置されます。

グリッドを挿入する方法：
1. 左側のペインから、GRID要素をドラッグ＆ドロップし、ポップアップ上で挿入したいコンテナが表示されるまでホバーします。

2. 要件に合ったグリッドスタイルを選択し、追加したい行数と列数を入力します。

3. 各コンテナ内に挿入したいコンテンツ要素（テキスト、画像、動画など）を配置し、左側のペインで利用可能な各種書式設定を使って要素の見た目をカスタマイズします。

テキストの挿入

104:: 2. 105:: 必要な106:: 107:: テキストをポップアップ上のテキストボックス内に入力します。

108:: 3. 109:: エディタウィンドウに表示される様々なテキスト書式設定110:: を使用して、テキストのフォントスタイル、フォントサイズ、フォントフェイス（太字、斜体、下線）、テキストの配置（左・右・中央）、文字間隔、その他の変更が可能です。111:: また、リンクアイコンをクリックすると、テキストにリンクを追加できます。

112:: さらに、できること 113:: テキストボックス（差出人の左ペイン）の見た目を以下のようにカスタマイズできます:

• 114:: 115:: BACKGROUND 116:: セクション（左ペイン）で、テキストボックス内に設定したい標準の背景色または画像を選択します。
  117:: メモ: 118::  119:: Transparent 120:: を選択すると、ポップアップの背景色や画像を削除できます。

• 左ペインのTEXT SHADOWセクションで、カラーピッカーよりテキストのシャドウ色を選択し、さらに垂直・水平位置やぼかし具合などのプロパティをスライダーでカスタマイズできます。下記のスクリーンショットをご参照ください。
  
  
  

• PADDINGセクションでは、Top, Right, Bottom, Left を含むパディングスライダーを使用してテキストボックスの枠とテキストの間の余白を増減できます。また、希望する値（ピクセル単位）を手動で入力し入力キーを押すことも可能です。
  
  
  

• MARGINセクションでは、marginスライダー（上・右・下・左を含む）を使用して、テキストボックスの周囲または特定の辺に余白を調整・追加し、ポップアップデザインに最適な白いスペースを設定できます。希望する値（ピクセル単位）を手動で入力し、入力キーを押すことも可能です。
  
  
  

• BORDER AND SHADOW セクションでは、Border Styleドロップダウンをクリックして、適用したいボーダーの種類（点線・破線・二重線など）を選択します。
  また、Border Color、Border Thickness、角の丸みの設定でボーダーのプロパティをカスタマイズできます。スクリーンショットのとおりです。
  
  
  

• テキストボックスのシャドウカラーはカラーピッカーから選択し、そのプロパティ（位置やぼかし具合など）をBORDER AND SHADOWセクションでカスタマイズできます。スクリーンショットを参照してください。
  
  
  

入力箱を挿入する

input 箱は、訪問者から情報や入力を収集したい場合に使用します。ポップアップ上のインタラクティブな項目として機能し、顧客が入力するカスタム応答を通じて、多様なニーズを把握できます。この情報は、後でWebサイト上の今後のプロモーションやオファーの最適化に活用できます。ユーザーに年齢、名前、国、または関心のある地域などの質問をしてみましょう。

input 箱を挿入するには：

2. 差し込み項目セクション（左側のパネル）で、訪問者にinput 箱へ入力してほしい必須テキストを入力します。

3. 左側のパネルで利用可能な各種書式設定により、input 箱のプロパティをカスタマイズできます。要素ごとに適用できる各種書式設定の詳細はこちらをご覧ください。

ボタンを挿入する

ポップアップ内のボタンを活用することで、Webサイトのさまざまなページへ訪問者を接続し、全体的なエンゲージメント単価の向上につなげる最適な方法です。PageSenseでは、CTAをポップアップへ簡単に追加でき、ボタンのクリック時の動作も柔軟にカスタマイズできます。たとえば、別ページへのリダイレクト、別のポップアップ画面へのジャンプ、またはCTAクリック後にポップアップウィンドウを閉じるといった設定が可能です。さらに、テンプレートエディターでは、ポップアップ上のボタンについて、コンバージョンおよびリジェクトの観点から成功・失敗の両方のクリックをトラッキングでき、ポップアップが十分に機能しているか、あるいはさらに変更・改善が必要かどうかを把握するのに役立ちます。

ボタンを挿入する方法：
1. 左側のパネルからBUTTONエレメントをドラッグ＆ドロップして、ポップアップ内の新規ボタンを追加したい位置に配置し、ボタン名を編集します。


2. 左側パネルのオン クリック 操作ドロップダウンから、訪問者がこのボタンをクリックした際に実行したい操作を選択します。以下のいずれかを選択できます：

1. 選択Redirectを選択すると、訪問者を新しいウェブページのURLへリダイレクトします。差し込み項目項目（左ペイン）で、訪問者がこのボタンをクリックした際に開きたいウェブページのURLリンクを入力してください。
   
   例えば、eコマース法人の場合、このリダイレクトオプションを利用して、新発売の商品を紹介するウェブページや、注文確定後に顧客満足度フォームを開くページへ顧客を誘導することができます。eコマースサイト上で活用可能です。
   
   
   
2. 有効化 Redirect with query paramsをオンにすると、URL内のクエリパラメーターとともに訪問者をウェブページに誘導できます（任意）。URLにクエリパラメータ文字列（ボタン名やID、ポップアップキャンペーン名、メインランディングページなど）を表示することで、どのポップアップボタンやページがサイトで多くクリックされているか、またどのランディングページからリダイレクトページへトラフィックが送られているかを確認できます。
   
   
   
3. 有効化 リンクを新規タブで開くをオンにすると、リダイレクトリンクをブラウザの新しいタブで開くことができます（任意）。
   
   
   
4. 242:: 選択する 243:: 画面へジャンプ244:: を選択すると、訪問者が「次へ」や「ありがとうございました」画面、またはキャンペーン内の特定の画面へ移動できるようになります。このオプションは、ポップアップ内で訪問者の前回の回答に基づき、適切な画面へ案内したい場合に利用します。
   
   245:: 例えば、246:: 画面へジャンプ247:: を利用することで、「コードを取得」や「オファーを受け取る」など、アクションボタンをクリックした顧客に対し、クーポンコードや追加のショッピング割引を表示できます。
   
   
   
5. 248:: 選択する 249:: 閉じる 250:: を選択すると、リダイレクトせずにポップアップウィンドウのみを閉じます。
   

1. 251:: カスタム JS:252:: 253:: カスタムJavaScript254:: を使用すると、必要な操作を実現するためのコードを埋め込むことができます。
   
   255:: 例えば、Webサイトのチャットボットを開いたり、顧客のアカウントにウェルカムボーナスとしてクレジットを追加したり、ボタンをクリックした際に任意の処理を実行することが可能です。
   

1. 258:: コンバージョン: 259:: このオプションを選択して、260:: 設定261:: ポップアップ内のボタンクリックをコンバージョンとしてカウントします。
   
   262:: 例えば、キャンペーンの目的が、ニュースレターのサブスクリプション263:: ポップアップ 264:: をブログ内に設置し、フォームに入力・送信した訪問者をトラッキングすることであれば、265:: 266:: '267:: はい, 268:: サブスクリプション管理' ボタンのクリックをコンバージョンとして設定することで、ニュースレターに正常に登録した訪問者数を記録できます。269:: ポップアップ経由で登録された件数を把握できます。
   
   
   
2. 270:: 拒否271:: : 272:: このオプションを選択する 273:: と、274:: 設定275:: したポップアップのボタンクリックを拒否として扱います。訪問者がポップアップメッセージを却下する理由には、提案内容に興味がない、メッセージが自身に関連していないと感じる、または今は質問に答えたくない場合などがあります。276:: 277::  
   
   278:: 例えば、ブログ内にニュースレターサブスクリプションフォームを設置しているとします。279:: そして、2つのCTA「280:: はい, 281:: サブスクリプション管理」と「いいえ, 282:: ありがとう283:: 」のボタンがあります。284:: この場合、285:: ポップアップ上の「いいえ, ありがとう」ボタンのクリックを拒否として設定できます。
   
   
   
   
3. 286:: なし: 287:: このオプションは、ボタンクリックをコンバージョンや拒否のいずれとしても設定せず、単に訪問者が1つのポップアップ画面から別の画面、もしくはサイト内の他のページへ移動するために使用したい場合に選択します。
   

294:: 画像を挿入する

画像を挿入する方法:
1. 左側のペインから画像要素をドラッグ＆ドロップし、画像を追加したいポップアップの場所へ移動します。

1. 画像のサイズを増減するには、Sizeスライダーを使用します。
   

2. 画像がポップアップ内の差し込み項目でどのように圧縮・拡大されるかを調整するには、画像 Fitドロップダウンをクリックします。
   

3. アライメント設定として、左揃え、右揃え、中央揃え、または両端揃えを選択し、2つ以上の画像同士の位置を差し込み項目内で揃えることができます。
   

4. 左側のペインで画像のmargin、padding、border、およびshadowの設定を編集できます。
   

   
   

動画を挿入

動画は世界中で最も人気のあるコンテンツマーケティングの形式の一つです。ポップアップ内に動画を設置することで、高い効果が期待できます。動画はヘルプメッセージを視覚的に伝え、Webサイト訪問者のエンゲージメント時間を増加させることができます。PageSenseテンプレートエディタでは、簡単にYouTube動画を埋め込むことができます (ローカル動画は直接アップロードできません)。さらに、動画のプレビューをポップアップウィンドウ上で直接表示できます。また、ボーダーやシャドウ効果の追加、マージン位置の調整、自動再生の有無など、動画のカスタマイズも可能です。

動画を挿入・カスタマイズする方法：
1. 左側のパネルから、 VIDEO エレメントをドラッグ＆ドロップし、動画を挿入したいポップアップの場所に配置します。

1. Autoplayボタンを有効にすると、訪問者がポップアップを開いた際に自動的に動画の再生が開始されます。
   

2. 動画をポップアップ内の差し込み項目や他の要素に合わせて配置するには、左揃え、右揃え、中央揃え、または両端揃え設定をクリックしてください。
   

3. サイズスライダーを使って、ポップアップ内の動画ボックスの大きさを増減できます。また、左側のパネルから動画のmargin、border、shadow設定も編集可能です。

テキスト地域の挿入

テキスト地域は、訪問者がポップアップ内で短い文章を入力できる入力ボックスです。詳細な情報を訪問者から収集したい場合に最適です。テンプレートエディタを使用することで、テキスト地域の背景色、シャドウ効果、角丸などを適用し、見た目をカスタマイズできます。例えば、「週末のプランは何ですか？」や「標準の出張先はどこですか？」、「プランの作成をどのように改善すべきですか？」などの質問を設定することが可能です。

テキスト地域の挿入とカスタマイズ方法：

2. 左側のパネルにある差し込み項目から、訪問者にテキスト地域へ入力してもらいたい必須テキストを指定します。

3. 左側のパネルで利用できるさまざまなフォーマット設定を使って、テキスト地域ボックスのプロパティをカスタマイズできます。要素に適用できる各種フォーマット設定について詳しくはこちらをご覧ください。

ラジオボタンを挿入する

ポップアップにラジオボタンを追加すると、訪問者は表示されたリストから1つのオプションを選択できます。これはフォームやアンケートでよく使用されます。テンプレートエディターを使うことで、ラジオボックスの設定の追加・編集・並び替えが簡単にでき、さらに背景色やシャドウ効果、その他カスタマイズ設定を適用して、訪問者の関心をWebサイト上で引きつけることができます。

458:: ラジオボタンを挿入およびカスタマイズする方法:
459:: 1. 左側のペインから460:: 461:: 462:: RADIO 463:: 要素を464:: ポップアップの465:: 挿入したい場所へ466:: ドラッグ＆ドロップします。

467:: 2.  468:: 項目設定（469:: 左側のペイン）で、ポップアップに表示したい質問と回答を入力します。470:: 471:: 新しく追加する option472:: をクリックすると、ラジオボックスに新しい選択肢を追加できます。

1. 表示セクションで、選択して色を設定リストおよびラジオボタン内のボタンに追加できます。ここでは、ラジオボタンのスタイルも選択可能です、スクリーンショットのように表示されます。
   
   

2. フォントセクションで、ラジオボックスの内容に適用したいフォントの種類と色を選択します。
   

   さらに、ラジオボタンにさまざまな書式設定を適用できます。例えばマージン、枠線、シャドウ、その他多くの設定を左側のペインから行えます。詳しくは ポップアップ内の要素に適用できるさまざまな書式設定についてご覧ください。
   
   
   

   
   

チェックボックスを挿入する

507:: チェックボックスを挿入およびカスタマイズする方法:
508:: 1. 509:: 左側のパネルから510:: 511:: 512:: CHECKBOX 513:: 要素をドラッグして、514:: チェックボックスを挿入したいポップアップ上の場所にドロップします。

515:: 2. 516:: 517:: 項目設定（518:: 左側のパネル）で、ポップアップに表示したい質問や回答を入力します。519:: 520:: 新しく追加するオプション521:: をクリックして、チェックボックスに新しいオプションを追加できます。

522:: 3. 523:: 以下のいずれかの操作を行います：

• DISPLAYセクションで、設定リストに色を追加することや、チェックボックスのボタンを選択することができます。また、ここでチェックボックスボタンのスタイルを選択して適用することも可能です。
  

• フォントセクションでは、チェックボックス項目に適用したいフォントの種類や色を選択できます。
  

  さらに、チェックボックスには異なる書式設定（マージン、枠線、シャドウなど）を適用することもできます。 左側のパネルから操作できます。詳しくは ポップアップ内の要素に適用できる各種書式設定についてはこちらをご覧ください。
  

SNSアイコンを挿入する

543:: ソーシャルメディアアイコンは、今日のマーケティング分野で非常に強力なツールです。544:: 545:: 546:: ヘルプ547:: 表示設定を増加させ、548:: 549:: Webサイトの認知度を高めます。Facebook、Twitter、Instagramなどのソーシャルメディアアイコンをポップアップに追加することで、550:: 551:: 訪問者が552:: 簡単に553:: 共有やWebサイトコンテンツのフォローができるようになります554:: 。555:: これにより、Webサイトのグローバルなリーチが増加し、訪問者がページに「いいね！」する機会も広がります。

556:: ソーシャルメディアアイコンを挿入・カスタマイズするには：
557:: 1. 左側のペインから558:: 559:: SOCIALエレメントをポップアップの挿入したい場所にドラッグ＆ドロップします。

1. STYLEセクションで、テキストに適用したいフォントの種類や色を選択します。
   

2. アイコンの高さやアイコンの種類（Circle または Square）、ソーシャルメディアアイコンのスタイル（カラー、白黒、ヴィンテージ）も選択できます。下のスクリーンショットをご参照ください。