【実践ガイド】ポップアップを「表示後x秒で自動的に閉じる」設定方法

聞く・答える
#1

Webサイトでポップアップを使うと、キャンペーン告知やお知らせを簡単に伝えられますよね。
でも、「自動で閉じる機能があったら、もっとスマートに見せられるのに…」と思ったことはありませんか？

そんなときに便利なのが、「ポップアップを数秒後に自動で閉じる」設定です。
今回は、表示からx秒後に自動で閉じるポップアップを簡単に実装する方法を、わかりやすく紹介します。

実は、下記のJavaScriptコードを コードモードの JavaScript欄 に追加することで実現できます。

setTimeout(function() {
  ptengine.clearEngagement('対象ポップアップのID');
}, ミリ秒数);

:jigsaw: 解説

1. コードの意味

  • setTimeout()：指定した時間（ここでは2000ミリ秒＝2秒）後に、内部の処理を実行します。
  • ptengine.clearEngagement()：指定したポップアップを閉じる関数です。

2. 他のポップアップに使う場合

別のポップアップで同じ仕組みを使いたいときは、
上記コード内の ID部分 を対象ポップアップのIDに置き換えるだけでOKです。

例：

setTimeout(function() {
  ptengine.clearEngagement('ここに別のポップアップIDを入力');
}, ミリ秒数);

:gear: 設定手順まとめ

  1. 対象のポップアップの体験に入る

  2. ポップアップをコード編集（コードモード） に切り替え、「JavaScript」欄に上記コードを貼り付ける

  3. ポップアップIDを記載する
    ・IDは、 表示/停止の条件 → 指定のJavaScriptコードで表示タイミングをコントロールの括弧内に表示される赤字のコードです ※以下の画像参照

    image
    image1646×710 69.5 KB

  4. 表示時間を記載する

  5. 保存・公開

これで、ポップアップが表示されてから x秒後に自動で閉じる ようになります。

:white_check_mark:ポイント

  • 表示時間を変更したい場合は、ミリ秒数 の数値を変更してください。
    例：3秒後に閉じたい場合 → 3000 、5秒後に閉じたい場合 → 5000 、
  • 自動消去を設定すると、ユーザーが操作しなくても一定時間で閉じるため、
    軽い通知ポップアップを出したい場合におすすめです。
  • 自動で閉じていてもクローズUUにはカウントされず、表示UUのみカウント されます。

ユーザー操作を邪魔したくないときなどにぜひご活用ください！

「いいね！」 1