モバイルポップアップに関する注意点:コンバージョンには非常に効果的ですが、ほとんどの人が間違った方法で実装しています。Googleからペナルティを受けたり、訪問者を失ったりするウェブサイトを数え切れないほど見てきました。なぜなら、モバイルエクスペリエンスを損なう邪魔なポップアップを作成したからです。
一方で、ポップアップの使用を恐れるあまり、何千ものリードを逃しているビジネスオーナーも見てきました。
WPBeginnerでは、OptinMonsterを使用して、特別オファーやセールのためにポップアップ、スライドイン、インラインポップアップ、ヘッダーバナーを表示しています。これらのポップアップは、訪問者に購入や意思決定を促す上で非常に効果的であることがわかっています。しかし、それを正しく行うには多くのテストが必要でした。
このガイドでは、Googleの評価を維持しながらコンバージョンを促進するモバイルポップアップを正確に作成する方法を説明します。モバイル訪問者を煩わせたり、検索ランキングを損なったりすることなく、より多くのリードと売上を獲得するために当社が使用する具体的なテクニックを学びます。

訪問者にクーポンを提供するべき理由
新規事業主は、クーポンが利益を圧迫することを心配することがよくあります。しかし、確立された事業主は、割引を提供することが、訪問者が迷いを断ち切って決断を下すための強力な方法であることを知っています。
クーポンコードを提供することは、放棄されたカートの売上を回復し、訪問者を顧客に転換し、より多くの売上を上げるのに役立ちます。
WooCommerceのようなほとんどのeコマースプラットフォームでは、クーポンコードを簡単に作成できます。しかし、これらのクーポンコードをお客様と共有することが、すべてを変えます。
そのため、この記事では、訪問者とクーポンを共有するための2つの異なる方法を紹介します。これらには、クーポン離脱防止ポップアップとクーポン回転ホイールオプトインが含まれます。
WordPressまたはWooCommerceでクーポンポップアップを作成する方法を見てみましょう。
WordPressでクーポンポップアップを作成する方法
クーポンポップアップを作成する最良の方法は、OptinMonsterを使用することです。これは市場で最高のWordPressポップアッププラグインであり、リードジェネレーションソフトウェアです。
詳細については、完全なOptinMonsterレビューをご覧ください。

まず、アカウントを作成するためにOptinMonsterのウェブサイトにアクセスする必要があります。単に「今すぐOptinMonsterを入手」ボタンをクリックして開始してください。
クーポンホイールキャンペーンやポップアップの詳細なターゲティングルールが含まれているため、少なくともGrowthプランが必要です。
その後、WordPressサイトにOptinMonsterプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。
このプラグインは、OptinMonsterアカウントとWordPressウェブサイト間のコネクタとして機能します。
プラグインを有効にすると、OptinMonsterセットアップウィザードが表示されます。「既存のアカウントを接続」ボタンをクリックしてください。

新しいウィンドウが開き、WordPressサイトをOptinMonsterに接続する必要があります。WordPressサイト
「WordPressに接続」ボタンをクリックして続行してください。

WooCommerceストアをOptinMonsterに接続することもできます。WordPressでeコマースストアを設定していることを確認してください。
まず、WordPress管理パネルから OptinMonster » 設定 に移動する必要があります。
その後、「一般」タブに移動し、「キーを自動生成 + WooCommerceに接続」ボタンをクリックします。

WooCommerceは自動的にキーを生成し、OptinMonsterアカウントに接続します。
これで、最初のクーポンポップアップキャンペーンを作成する準備が整いました。
クーポンポップアップキャンペーンの作成
キャンペーンを作成するには、WordPressダッシュボードからOptinMonster » Campaignsに移動し、「最初のキャンペーンを作成」ボタンをクリックします。

次の画面で、OptinMonsterはさまざまなキャンペーンタイプとテンプレートを表示します。
まず、キャンペーンタイプを選択する必要があります。「ポップアップ」を使用しますが、これはデフォルトの選択肢であるはずです。

その後、テンプレートを選択するように求められます。
OptinMonsterには、さまざまなレイアウトとカラースキームを持つ、豊富なテンプレートがあります。「クーポン」テンプレートは、このポップアップの作成に最適です。ただし、必要に応じて別のテンプレートを選択することもできます。
検索ボックスを使用してクーポンテンプレートを見つけるか、ページを下にスクロールしてください。

次に、テンプレートにカーソルを合わせ、「テンプレートを使用」ボタンをクリックします。
クーポンポップアップを作成する前の最後のステップは、キャンペーンに名前を付けることです。名前を入力したら、「ビルド開始」ボタンをクリックします。

クーポンポップアップのデザイン
「ビルド開始」をクリックすると、ドラッグアンドドロップ式のキャンペーンビルダーが表示されます。
これを使用して、テンプレートにさまざまなブロックを追加したり、クーポンテキスト、色、デザインを好きなように変更したりできます。

デザインの任意の要素をクリックして、さらに変更することもできます。ここでは、テキストを編集して色を変更しました。
変更を加えるとすぐに、クーポンポップアップテンプレートでリアルタイムの更新を確認できます。

ポップアップ内のテキストを目立たせたり、ブランドに合わせたりするために、さまざまなフォントや色を試してみると良いでしょう。
ポップアップ内のテキストや要素以外にも、背景色を変更したり、クーポンに画像を追加したり、境界線の色を設定したり、境界線のスタイルを変更したりできます。

変更が完了したら、画面上部にある緑色の「保存」ボタンをクリックしてキャンペーンを保存してください。
クーポンコードの配信方法を決定する
クーポンポップアップの設定が完了したら、訪問者にクーポンコードをどのように配信するかを決定する必要があります。
OptinMonsterでこれを行う方法はいくつかありますが、最善の方法は、OptinMonsterの成功ビューを通じてクーポンコードをすぐに配信し、メールニュースレターで送信することです。
そのようにすれば、訪問者がすぐに購入する準備ができていなくても、後で参照しやすいようにクーポンコードがメール受信トレイに届きます。
デフォルトでは、ボタンがクリックされるとすぐにクーポンポップアップが「成功ビュー」を使用するように設計されています。確認するには、ボタンをクリックし、画面左側にある「ビューに移動」オプションを確認してください。

別のボタンアクションが必要な場合は、ここで変更できます。ただし、最初のクーポンについては、デフォルトのままにしておくことをお勧めします。
OptinMonsterをメールリストと連携させる
クーポンコードを自動的にメールで送信し、訪問者をメールリストに追加するには、OptinMonsterをメールマーケティングサービスと統合する必要があります。
Constant Contactは、OptinMonsterと組み合わせて使用するのに最適なサービスであり、WPBeginnerの読者はこのクーポンを使用することで、最初の3ヶ月間20%割引になります。
ただし、別のメールサービスを使用している場合でも、OptinMonsterはほぼすべての主要プロバイダーと連携します。
「インテグレーション」タブに移動し、「+ 新規インテグレーションを追加」ボタンをクリックするだけで、メールマーケティングサービスを追加できます。

これが完了したら、クーポンポップアップを通じてメールリストに登録した人が現れるたびに送信される自動メールを設定できます。
ボーナスヒント:成功ビューテンプレートを編集する
キャンペーンのデザインタブに戻り、画面下部にある「成功」オプションをクリックすると、「成功ビュー」テンプレートを表示および変更できます。
デフォルトは以下のようになりますが、クーポンポップアップを編集したのと同じように、好きなように編集できます。

クーポンポップアップの表示ルールを変更する
デフォルトでは、クーポンポップアップは、訪問者がサイトのいずれかのページに5秒間滞在した後、表示されます。
これを変更したい場合は、「表示ルール」タブに移動してください。

好きな表示ルールを設定できますが、試してみるのに最適なのはExit-Intent®です。
この特別なOptinMonsterテクノロジーは、訪問者がサイトを離れようとしているタイミングを検知し、適切な瞬間にクーポンポップアップを表示できます。
ドロップダウンメニューから「離脱検出」を選択し、キャンペーンを表示するデバイスを選ぶことで、離脱防止機能を追加できます。デフォルトでは、すべてのデバイスに表示されるように設定されています。

離脱インテントの感度を制御するオプションもあります。
その後、スクロールダウンして、キャンペーンを表示したいページを選択します。
例えば、「現在のURLパス」のデフォルト設定を使用し、「いずれかのページ」オプションを選択できます。これにより、キャンペーンはウェブサイト全体に表示されます。
次に、OptinMonsterは、クーポンポップアップが表示されたときに効果音を再生したり、アニメーションを表示したりするオプションも提供します。

その他にも設定があります。
OptinMonsterでは、キャンペーンのCookieを設定し、キャンペーンが異なるユーザーに表示されるまでの日数を設定できます。

クーポンポップアップに満足したら、上部にある「公開」タブに移動できます。
その後、「公開ステータス」セクションで「公開済み」がチェックされていることを確認してください。

上部にある「保存」ボタンをクリックして、キャンペーンビルダーを閉じるのを忘れないでください。
これで、ウェブサイトにアクセスして、クーポンポップアップが機能していることを確認できます。

スピン・トゥ・ウィン クーポンホイールの作成
スピン・トゥ・ウィン(回して当てる)クーポンホイールは、クーポンをサイト訪問者にとってより面白く、楽しいものにするための素晴らしい方法です。訪問者が割引やその他の特典を獲得するためにプレイできるミニゲームのようなものです。
スピン・トゥ・ウィン(回して当てる)のオプションには、10%オフ、20%オフ、送料無料、無料トライアルなど、提供したいものを含めることができます。
OptinMonsterは、「ゲーミファイド」キャンペーンタイプを提供しており、スピン・ザ・ホイール ポップアップを作成できます。

その後、下にスクロールしてホイールテンプレートのいずれかを選択します。
プラグインには、さまざまなスピン・トゥ・ウィン・テンプレートがあります。テンプレートにカーソルを合わせ、「テンプレートを使用」ボタンをクリックするだけです。

次に、クーポンホイールのあらゆる側面を編集してください。
クーポンホイール自体のオプションを編集するには、左側にある「ホイールセクションをカスタマイズ」ボタンをクリックする必要があります。

次に、各オプションのラベルとして任意のテキストを入力し、各当選オプションのクーポンコードを追加できます。
「当選確率」は自動的に決定されることに注意してください。「獲得可能」オプションの1つ以上を切り替えると、OpinMonsterは当選確率を再計算します。

クーポンホイールの作成とサイトへの追加についてさらにヘルプが必要な場合は、WordPressおよびWooCommerceでスピン・トゥ・ウィン・オプティンを追加する方法に関する投稿をご覧ください。この投稿では、プロセスをより詳細に説明しています。
その後、ウェブサイトにアクセスして、スピン・トゥ・ウィン・クーポンポップアップが機能しているのを確認できます。

モバイルポップアップに関するよくある質問
モバイルポップアップは、コンバージョンとSEOのベストプラクティスとのバランスを取ろうとすると、特に混乱を招くことがあります。ここでは、検索ランキングを損なうことなくコンバージョンを促進するモバイルポップアップの作成に関する最も一般的な質問を紹介します。
1. モバイルポップアップはSEOランキングを下げますか?
Googleのモバイルフレンドリーガイドラインに従っていれば、モバイルポップアップがSEOランキングを損なうことはありません。Googleは、検索結果からページに移動した直後にメインコンテンツを覆う、邪魔なインターロスティシャルをペナルティの対象とします。しかし、遅れて表示されるポップアップ、離脱インテントポップアップ、または重要なコンテンツを覆わないバナーは問題なく、ランキングに影響しません。
2. モバイルポップアップの最適な遅延時間は?
モバイルポップアップの場合、少なくとも5〜10秒の時間遅延を設定することをお勧めします。これにより、訪問者はポップアップが表示される前にコンテンツを読み始めるのに十分な時間が得られます。終了インテントポップアップは、サイトを離れようとしているときにのみトリガーされるため、モバイルではさらに優れています。ページにアクセスしたときにすぐにポップアップを表示すると、ユーザーエクスペリエンスが悪化するため避けてください。
3. ユーザーを煩わせないモバイルポップアップを作成するにはどうすればよいですか?
ポイントは、モバイルポップアップを閉じやすく、ユーザーにとって価値のあるものにすることです。常に、右上隅に明確で目立つ閉じるボタン(X)を含めてください。割引、無料リソース、または限定コンテンツなど、本当に役立つものを提供していることを確認してください。ユーザーがメインコンテンツの一部を見ることができる程度の大きさのポップアップにし、同じ訪問者に同じポップアップを複数回表示しないでください。
4. モバイルポップアップのサイズはどのくらいにすべきですか?
モバイルポップアップは、邪魔だとみなされないように、画面の50〜60%を超えないようにしてください。画面サイズに合わせて自動的に調整されるレスポンシブポップアップの使用をお勧めします。スライドインポップアップやバナー形式のポップアップは、コンテンツを完全にブロックしないため、モバイルで特に効果的です。ポップアップが正しく表示されるように、常にさまざまなモバイルデバイスでテストしてください。
5. モバイルポップアップは実際にコンバージョンを増加させますか?
はい、正しく実装されれば、モバイルポップアップはコンバージョンを大幅に向上させることができます。適切に設計されたモバイルポップアップを使用すると、メールサインアップ率が600%増加したのを確認しています。重要なのは、真の価値を提供し、適切なタイミングで表示し、簡単に閉じられるようにすることです。ポップアップがユーザーの興味に関連しており、ブラウジング体験を妨げない場合、モバイルユーザーはコンバージョンする可能性が高くなります。
高コンバージョンポップアップ作成のための追加リソース
また、サイトでのコンバージョンを促進するためのポップアップ作成に関するその他の役立つガイドもいくつか確認できます。
- WordPressサイトで「はい/いいえ」オプトインを作成する方法
- WordPressサイトにウェルカムマットを作成する方法(例付き)
- ポップアップの心理学を利用してサインアップを250%増やす方法
- WordPressでウェルカムゲートを作成する方法
- ポップアップはまだ関連性がありますか?ポップアップマーケティングの未来を探る
この記事がWordPressでクーポンポップアップを作成する方法を学ぶのに役立ったことを願っています。また、最高のWooCommerceプラグインの選択肢や、WordPressサイトにプッシュ通知を追加する方法に関するガイドも参照してください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。

デニス・ムトミ
デスクトップで離脱防止ポップアップを使用してカート放棄を減らすことに成功しました。
モバイルでも離脱防止ポップアップを試してみたいと思っています。モバイルでの離脱防止ポップアップはどのように機能しますか?どのようにトリガーされるのですか?
WPBeginnerサポート
最も一般的には、上にスクロールすることでトリガーされます。
管理者
デニス・ムトミ
triggering by detecting scrolling up is clever – Now I have a better grasp of how to utilize this on my woocommerce store.
Appreciate you taking the time to answer my question
イジー・ヴァネック
このトリガーはキャンペーンの1つに設定しています。デスクトップでは見事に機能しますが、残念ながらモバイルでは時々しか機能しません。モバイルにはこれよりもはるかに優れたトリガーがあると言わざるを得ません。時々機能し、時々機能しません。おそらくモバイルデバイスのオペレーティングシステムとブラウザによりますが、個人的にはこのトリガーは私にはうまく機能しません。