クローズボタンを押すと、閉じずに最小化ポップアップとして残り、最小化ポップアップをクリックすると、元の大きさに復元するような「最小化型ポップアップ」の作成方法をお伝えいたします。
この施策を実装するために、3つの体験を用意します。
事前に用意するもの
- 通常のポップアップ画像
- 最小化時のポップアップ画像（小さなアイコンなど）
全体構成（3つの体験を使用します）
-
通常ポップアップ呼び出し用（ページ編集）体験
ページ読み込み後にポップアップを表示するためのコードを仕込む体験 -
通常ポップアップ体験
通常の大きいポップアップ本体 -
最小化ポップアップ体験
最小化時の小さいアイコンとしてのポップアップ
Step 1：ポップアップ呼び出し用のページ編集体験を作成
ページ編集体験を作成し、ポップアップを表示するためのコードを体験コードモードに追加します。
追加するコード（この時点で、以下のコードをそのまま追加いただくようお願いします）
- ポップアップのIDはあとで通常ポップアップのIDに差し替えます
- ポップアップのID取得方法は後ほど説明いたします
setTimeout(function() {
// ポップアップのJSコードを下記に入れ替えてください
ptengine.showEngagement('ポップアップのID');
}, 500);
こちらでページ読み込み後に、ポップアップを呼び出せます
Step 2： 「通常ポップアップ」体験を作成します
次に作るのは、最初に表示される「通常ポップアップ」です。
併せて「最小化ポップアップ」に変わる仕組みを作ります。
ここで大事なのはクローズボタン「×」です。
通常の閉じるボタンは削除して、代わりに自分で「×」のボタンを作ります。
このボタンが、「最小化ポップアップ」に変身してくれます
設定手順
- クローズボタン（標準の×）を削除
→ 最小化動作を作るため、代わりに「×」と書かれたボタンを作成 - このボタンに クリックアクションを設定
×ボタンのクリックアクション
- 「コードを実行」を選択
- 以下のコードを追加（※後で ID を置き換えます）
setTimeout(function() {
if (typeof ptengine.showEngagement === 'function') {
ptengine.showEngagement('最小化ポップアップのIDをここに入れる');
}
}, 200);
（この時点でも、上記のコードをそのまま追加いただくようお願いします）
-
「クリック後、ポップアップを閉じる」にチェック
→ 最小化アイコンに切り替えるため
次は、表示タイミングの設定を行います
- 「表示するタイミング」→「指定のJavascriptコードで表示タイミングをコントロール」を選択
- 表示用のJSコードが出るのでコピーしてメモ
→ 後で別体験で使います
Step 3： 「最小化ポップアップ」体験を作成します。
併せて「最小化ポップアップ」から「通常ポップアップ」に戻る仕組みを作ります。
設定手順
- 画像にクリックアクションを付ける
- 「クリック後、ポップアップを閉じる」
クリックアクションの設定
- 「コードを実行」を選択
- 以下のコードを追加（※後で ID を置き換えます）
（この時点でも、以下のコードをそのまま追加いただくようお願いします）
setTimeout(function() {
if (typeof ptengine.showEngagement === 'function') {
ptengine.showEngagement('通常ポップアップのIDをここに入れる');
}
}, 200);
- 「クリック後、ポップアップを閉じる」にチェック
Step2と同様に、表示タイミングを設定し、JSを取得
- 「指定のJavascriptコードで表示タイミングをコントロール」を選択
- JSコードをコピーしてメモしておく
Step 4：各ステップで保存したID を入れ替えて完成させる
1. 通常ポップアップ → 最小化ポップアップへ切り替えるコード
Step 2 の ×ボタンのクリックアクションコードの中に step3の表示タイミングで保存しておいた
「最小化ポップアップのID」に置き換える。
2. 最小化ポップアップ → 通常ポップアップへ戻すコード
Step 3 のポップアップのクリックアクションコードの中に step2の表示タイミングで保存しておいた
「通常ポップアップのID」に置き換える。
3. ページ編集体験のコードも最後に確定
Step 1 に戻り、「ポップアップのID」を
「通常ポップアップの ID」 に置き換える。