ポップアップ管理
自社のホームページやランディングページなどの外部サイトに「ポップアップ」を表示し、LINE公式アカウントの友だち登録やキャンペーンページなどへ誘導するための画面です。
仕組みは次のとおりです。ここで作成したポップアップごとに、サイトに貼り付けるための小さなスクリプト（Javascriptタグ）が発行されます。そのタグを自社サイトのページに設置しておくと、サイトの訪問者に対して、設定した条件（ページを開いてから一定時間が経ったとき、一定割合までスクロールしたとき など）でポップアップ画像が表示されます。訪問者が画像をクリックすると、設定しておいた誘導先URL（友だち追加URLなど）へ移動します。表示回数やクリックなどの成果は「ポップアップ > レポート」で確認できます。
全体の流れは次のとおりです。
この画面では、作成済みのポップアップを一覧で確認し、新しく作成したり、編集・削除したりできます。
場所: サイドバー「ポップアップ > ポップアップ」（URL: /popup）
一覧の見方
一覧には次の列が表示されます。並び順の初期値は「最終更新日」の新しい順です。
| 列 | 内容・意味 |
|---|---|
| （チェックボックス） | 行を選択するためのチェックボックスです。複数選択して、まとめて削除するときに使います。 |
| （画像） | 設定したポップアップ画像のサムネイルです。 |
| ポップアップ名 | ポップアップの管理用の名前です。 |
| ステータス | 「有効」か「無効」かを表します。「無効」のポップアップはサイトに設置していても表示されません。 |
| メモ | 管理者用に入力したメモです。 |
| 最終更新日 | このポップアップを最後に更新した日付です。 |
| 編集 | クリックすると、そのポップアップの編集画面へ移動します。 |
| 削除 | クリックすると、そのポップアップを削除する確認画面が開きます。 |
並び替えができます
「ポップアップ名」「ステータス」「メモ」「最終更新日」の各列は、見出しをクリックして並び替えできます。
まとめて削除できます
左端のチェックボックスで複数のポップアップを選ぶと、上部に「○件選択中」のバーが表示され、「選択したポップアップを削除」からまとめて削除できます。
ポップアップを検索・絞り込みする
一覧上部の「検索条件」で、次の条件を組み合わせて絞り込めます。
| 検索条件 | 検索方法 |
|---|---|
| ポップアップ名 | 入力した文字を含む名前を検索します。 |
| ステータス | すべて / 有効 / 無効から選びます。 |
| メモ | 入力した文字を含むメモを検索します。 |
| 最終更新日（開始） | 指定した日以降に更新されたポップアップへ絞り込みます。 |
| 最終更新日（終了） | 指定した日以前に更新されたポップアップへ絞り込みます。 |
条件を入力して「検索」を押すと、一覧の先頭ページから結果を表示します。「リセット」を押すと条件を消して全件表示へ戻ります。ポップアップ名とメモは部分一致で、英字の大文字・小文字は区別しません。開始日と終了日は片方だけでも指定でき、両方を指定した場合はその期間内（両端の日を含む）に絞り込みます。
検索またはリセットを行うと、チェックボックスで選択していた行は解除されます。列の並び順はURLに保存され、再読み込み後も復元されますが、検索条件は保存されません。
画面右上には次のボタンがあります。
| ボタン | 内容 |
|---|---|
| 新規作成 | 新しいポップアップを作成する画面を開きます。 |
| JSONエクスポート | 登録済みのポップアップ設定をJSONファイルとして書き出します。 |
| サンプルダウンロード | JSONインポート用のサンプルファイルをダウンロードします。 |
| JSONインポート | サンプル形式のJSONファイルを読み込み、ポップアップを一括で取り込みます。 |
ポップアップを作成する
右上の「新規作成」を押すと、作成フォームが開きます。入力欄は「基本情報」と「詳細設定」の2つのまとまりに分かれています。
基本情報
| 項目 | 必須 | 形式 | 意味・制約 |
|---|---|---|---|
| ポップアップ名 | 必須 | テキスト | 管理用の名前です。一覧に表示されます。 |
| ポップアップ画像 | 必須 | 画像 | サイトに表示する画像です。アップロードできるファイルサイズは最大5MBまでです。 |
| 管理者用メモ | 任意 | テキスト | 管理用のメモです。サイト訪問者には表示されません。 |
詳細設定
| 項目 | 必須 | 形式 | 意味・制約 |
|---|---|---|---|
| ステータス | - | 切替（有効/無効） | 「有効」でサイトに表示されます。「無効」にすると、タグを設置していても表示されません。初期値は「有効」です。 |
| 表示タイプ | - | 選択（モーダル/バナー） | 「モーダル」は画面中央に重ねて大きく表示します。「バナー」はタグを貼った場所にそのまま画像を差し込みます。初期値は「モーダル」です。 |
| 表示サイズ | - | PC/スマートフォンごとに選択・数値 | モーダル画像の表示サイズを端末別に指定します。初期値はどちらも「自動調整」です。詳しくは下の「モーダルの表示サイズ」を参照してください。 |
| 表示タイミング | 任意 | 複数選択 | ポップアップを表示するきっかけです。下表の4つから選べます（複数選択可）。「表示タイプ」が「モーダル」のときだけ表示・利用できます。 |
| 滞在時間 | 条件付き必須 | 数値（秒） | 「表示タイミング」で「滞在時間で指定」を選んだときに表示される入力欄です。ページを開いてから指定した秒数が経つと表示します。0以上・9桁以内の整数で入力します。 |
| スクロール率 | 条件付き必須 | 数値（%） | 「表示タイミング」で「スクロール率で指定」を選んだときに表示される入力欄です。ページを指定した割合までスクロールすると表示します。0〜99の整数で入力します。 |
| クリック時のURL | 任意 | テキスト（URL） | 画像がクリックされたときに開くURLです（友だち追加URLなど）。空欄の場合は、クリックしてもポップアップが閉じるだけになります。 |
| クエリパラメータを引き継ぐ | 任意 | チェック | チェックすると、設置ページのURLの「?」以降の文字列を、クリック時のURLに引き継ぎます。 |
| クリック時のタブの扱い | - | 選択（同タブ/別タブ） | クリック時のURLを同じタブで開くか、新しいタブで開くかを選びます。初期値は「同タブ」です。 |
| 再表示抑制 | - | 切替（有効/無効） | 「有効」にすると、同じ訪問者に何度も表示しすぎないよう、表示の間隔と回数に上限を設けられます。詳しくは下の「再表示抑制」を参照してください。初期値は「無効」です。 |
モーダルの表示サイズ
「表示タイプ」が「モーダル」のときは、PC（画面幅768px以上）とスマートフォン（画面幅768px未満）の表示サイズを別々に設定できます。ページ表示後にブラウザの大きさを変えたり端末を回転したりした場合も、その時点の画面幅に合うPC／スマートフォン設定を選び直して表示サイズを調整します。
端末ごとに次の方法から選びます。
| 選択肢 | 指定値 | 表示サイズ |
|---|---|---|
| 自動調整（従来どおり） | なし | 元画像と画面の大きさに合わせて自動調整します。既存のポップアップもこの設定で表示されます。 |
| 元画像の幅に対する割合 | 1〜1000% | アップロードした画像本来の横幅に対する割合で指定します。 |
| 画面幅に対する割合 | 1〜100% | ブラウザで実際に表示されている領域の横幅に対する割合で指定します。 |
| 画面高さに対する割合 | 1〜100% | ブラウザで実際に表示されている領域の高さに対する割合で指定します。 |
| 幅をpxで指定 | 1〜10000px | 画像の横幅をピクセルで指定します。 |
| 高さをpxで指定 | 1〜10000px | 画像の高さをピクセルで指定します。 |
どの方法でも画像の縦横比は維持されます。指定したサイズが画面より大きい場合は、画像と閉じるボタンが安全な余白を保って画面内に収まる大きさまで自動で縮小されます。幅と高さを同時に指定することはありません。
表示サイズを大きくしても画像の解像度・画質は上がりません
この設定で変わるのはサイト上での描画サイズだけです。画像の解像度や画質はアップロードした元画像に依存します。元画像より大きく表示すると粗く見えることがあるため、必要な表示サイズに合った画像を用意してください。
バナーの表示サイズは変わりません
「表示タイプ」が「バナー」の場合はこの設定を使わず、これまでどおりJavascriptタグを設置したコンテナの幅100%で表示します。
表示タイミングの4つの選択肢
| 選択肢 | 表示されるきっかけ |
|---|---|
| ブラウザバック時(戻るボタンタップ時) | 訪問者がブラウザの「戻る」を操作したときに表示します。 |
| タブの変更時 | 訪問者が別のタブに切り替えるなど、ページが非表示になったときに表示します。 |
| 滞在時間で指定 | ページを開いてから指定秒数が経過したときに表示します（上の「滞在時間」欄で秒数を指定）。 |
| スクロール率で指定 | ページを指定割合までスクロールしたときに表示します（上の「スクロール率」欄で割合を指定）。 |
バナーを選ぶと表示タイミングは使いません
「表示タイプ」を「バナー」に切り替えると、「表示タイミング」「滞在時間」「スクロール率」の設定は隠れます。バナーはタグを設置した場所にそのまま表示されるため、これらの表示条件は使いません。
再表示抑制（フリークエンシーキャップ）
詳細設定の「再表示抑制」を「有効」にすると、同じ訪問者に対してポップアップを何度も表示しすぎないよう、表示の間隔と回数に上限を設けられます。表示のたびに同じ画像が繰り返し出てしまうのを抑え、しつこい印象を避けたいときに使います。
抑制は同一ブラウザ単位で判定します（訪問者のブラウザに保存した表示履歴をもとに、次の表示を控えます）。
「有効」にすると、次の2つの入力欄が表示されます。
| 項目 | 形式 | 意味・制約 |
|---|---|---|
| 再表示までの抑制時間 | 数値（時間） | 一度表示してから、次に表示するまで待つ時間です。上の画像のように「24」にすると、表示してから24時間は同じブラウザで再表示しません。0以上8760以下（最大1年）の整数で入力します。0にすると、時間による抑制を行いません。 |
| 最大表示回数 | 数値（回） | 同じブラウザで表示する回数の上限です。上の画像のように「3」にすると、4回目以降は表示しません。0以上99999以下の整数で入力します。0にすると、回数による抑制を行いません（無制限）。 |
2つの条件は組み合わせて使えます
「再表示までの抑制時間」と「最大表示回数」は同時に設定できます。たとえば抑制時間を24、最大表示回数を3にすると、「同じ訪問者には24時間あけて表示し、合計3回までで止める」という設定になります。どちらか一方だけ使いたいときは、もう片方を0にしてください。
A/Bテスト
1つのポップアップに複数の「バリアント（出し分け案）」を用意し、配信ウェイトに応じて訪問者ごとに出し分ける機能です。画像（クリエイティブ）や表示タイミング、誘導先URLを変えた案を同時に配信して、どれが一番クリックされるかを比べたいときに使います。
作成フォーム下部の「A/Bテスト」を「有効」にすると、バリアントの設定欄が表示されます。
「＋ バリアントを追加」を押すとバリアントが増えます。A/Bテストにはバリアントが2件以上必要です。 バリアントごとに次の項目を設定します。
| 項目 | 必須 | 形式 | 意味・制約 |
|---|---|---|---|
| バリアント名 | 必須 | テキスト | バリアントを区別するための名前です（初期値はA、B…と自動で入ります）。 |
| 画像 | 必須 | 画像 | そのバリアントで表示するポップアップ画像です。 |
| 配信ウェイト | - | 数値 | 配信されやすさの相対値です。1以上の整数で入力します。大きいほど配信されやすくなります。たとえばAを3、Bを1にすると、おおよそ3:1の割合で配信されます。初期値は1です。 |
| このバリアントを配信する | - | チェック | チェックを外すと、そのバリアントは配信対象から外れます。配信対象のバリアントは1件以上必要です。 |
| 表示タイミング | 任意 | 複数選択 | そのバリアントを表示するきっかけです（基本情報・詳細設定と同じ4つから選べます）。「表示タイプ」が「モーダル」のときだけ利用できます。 |
| クリック時のURL | 任意 | テキスト（URL） | そのバリアントの画像をクリックしたときに開くURLです。 |
| クエリパラメータを引き継ぐ | 任意 | チェック | 設置ページの「?」以降の文字列を、クリック時のURLに引き継ぎます。 |
| クリック時のタブの扱い | - | 選択（同タブ/別タブ） | クリック時のURLを同じタブで開くか、新しいタブで開くかを選びます。 |
A/Bテストを有効にすると、各バリアントの設定が使われます
A/Bテストが「有効」のときは、基本情報の「ポップアップ画像」と詳細設定の発火条件（表示タイミング）・誘導先URLは使われず、各バリアントに設定した画像・発火条件・誘導先が使われます。「無効」に戻すと、基本情報・詳細設定の設定が使われます。
バリアント別の成果はレポートで確認できます
表示回数・クリック数・クリック率（CTR）は「ポップアップ > レポート」でバリアントごとに確認できます。どの案が一番反応が良かったかを比べられます。
入力が終わったら、画面下部の「保存」を押すと作成されます。「キャンセル」を押すと、保存せずに一覧へ戻ります。
サイトへの設置方法
作成したポップアップを実際のサイトに表示するには、専用のスクリプト（Javascriptタグ）をサイトに設置します。手順は次のとおりです。
- 一覧から対象のポップアップの「編集」を開きます。
- 編集画面の詳細設定にある「Javascriptタグ」欄に、設置用のタグが表示されています（例:
<script src="https://cdn.subscline.jp/sdk/popup/v1/latest.js?id=○○○"></script>）。横のコピーボタンでコピーできます。 - コピーしたタグを、ポップアップを表示したい自社サイトのページに貼り付けます。
- 「モーダル」の場合は、ページのどこに貼っても画面中央に重ねて表示されます。
- 「バナー」の場合は、タグを貼り付けた場所にそのまま画像が差し込まれるので、表示したい位置に設置してください。
Javascriptタグは作成後に発行されます
Javascriptタグは、ポップアップを保存したあとの「編集」画面で確認できます。新規作成のフォーム上にはまだ表示されません。
注意点
編集・作成・削除には権限が必要です
ポップアップの「新規作成」「編集」「削除」、JSONのエクスポート／インポートは、ポップアップ管理権限（ポップアップを管理）を持つアカウントにのみ表示されます。権限がない場合、これらのボタンや列は表示されず、一覧の閲覧のみとなります。
「無効」のポップアップは表示されません
ステータスが「無効」のポップアップは、Javascriptタグを設置していてもサイト上に表示されません。表示を止めたいときは、タグを外さずにステータスを「無効」に切り替える方法も使えます。
誘導先URLは必ず設定しましょう
「クリック時のURL」が空欄だと、画像をクリックしてもポップアップが閉じるだけになり、友だち追加などへ誘導できません。LINEの友だち追加URLなどを設定してください。
成果はレポートで確認できます
表示回数やクリックなどの成果は「ポップアップ > レポート」で確認できます。