サイト用ポップアップ(お知らせ・クーポン・ニュースレター)

サイト用ポップアップ(お知らせ・クーポン・ニュースレター): 用途

よくできたポップアップは、訪問者を驚かせずに、クーポン、新着情報、ニュースレターを知らせられます。タイトル、本文、ボタンを書き、表示するタイミングを選びます。数秒後、ページを一定量スクロールしたとき、またはマウスが出ていくとき(パソコン)です。

コードにはdialog要素を使い(Escキーで閉じ、フォーカスがポップアップ内に留まります)、訪問者が閉じたことを記録して、選んだ日数が過ぎてから再表示します。スマートフォンでは画面下部の帯になります。Googleが、スマートフォンでメインコンテンツを覆うポップアップを邪魔なものとみなしているためです。アニメーションは、動きを減らす設定にも対応しています。

使い方

1. メッセージとボタンを書きます。
2. 表示するタイミングと日数の間隔を選びます。
3. コードをbodyの末尾にコピーします。

使うタイミング

• 初回購入のクーポン。
• 新商品や特別な営業時間のお知らせ。
• ニュースレターやWhatsAppへの案内。

よくある質問

ポップアップはGoogleでのサイトの評価に悪影響がありますか?

悪影響の可能性があります。Googleは、特にスマートフォンで、検索から来てすぐのときにメインコンテンツを覆うポップアップを「邪魔なインタースティシャル」とみなし、ページの体験の評価を下げます。そのためこのコードは、スマートフォンでは小さな帯を表示し、時間やスクロールでポップアップを遅らせられるようにしています。

ポップアップが何度も出ないようにするには?

訪問者がポップアップを閉じたことをコードが記録し(localStorage)、選んだ日数が過ぎるまで再表示しません。ボタンをクリックした人には、以後表示されません。

ページから離れるときのオプションとは?

パソコンでは、マウスがアドレスバーやタブの方へ上がったとき、つまり訪問者が離れようとしているときにポップアップが表示されます。スマートフォンにはそのような動きがないため、数秒後にポップアップが開きます。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール