WordPressサイトで離脱防止ポップアップを作成する方法をお探しですか?
離脱防止ポップアップは、リードを獲得するために非常に効果的です。訪問者の注意をすべて引きつけることで、説得とコンバージョンを目的として設計されています。
しかし、ゼロからコーディングするのは大変です。まず、ポップアップを作成するために十分なHTML、CSS、JavaScriptの知識が必要になり、いつ表示するかというトリガールールも必要になります。次に、メールサービスプロバイダーとの手動統合を作成する必要があります。そして最後に、プライバシーとセキュリティの問題に対処する必要があります。
朗報:もっと簡単な方法があります。
この記事では、WordPressでコーディングなしで10分以内にフルスクリーンポップアップを起動する方法をご紹介します。
さあ、始めましょう。
離脱防止ポップアップとは?
離脱防止ポップアップとは、訪問者がサイトから離れようとしたときに表示されるオプトインフォームです。通常、離脱防止ポップアップは、離脱しようとしている訪問者にメールアドレスと引き換えにオファーを提供します。ただし、必要に応じて、割引コード付きの商品や、コンバージョン率が最も高いコンテンツにリダイレクトすることもできます。
要するに:離脱防止ポップアップは、そうでなければコンバージョンせずに離脱していたであろう訪問者をコンバージョンさせるために構築されています。
例を以下に示します。

離脱防止ポップアップを使用して、以下を行うことができます:
- 新規訪問者を歓迎する
- 割引クーポンを提供する
- 訪問者を最高のコンテンツに誘導する
- 訪問者をソーシャルメディアプロフィールに送信する
その他。ポップアップのお問い合わせフォームを作成することもできます。ポップアップは非常に柔軟で、創造性を発揮すれば、コンバージョン率の高いものを簡単に設定できます。
WordPressで離脱防止ポップアップを作成する方法
離脱防止ポップアップとは何か、そしてなぜ作成したいのかを理解したところで、どのように作成するのでしょうか?すべてのポップアップの作成には、OptinMonsterの使用をお勧めします。

OptinMonsterは世界No.1のコンバージョンツールキットであり、私たち自身もそれを使用しています。OptinMonsterを使用すると、コンバージョンする強力なポップアップを非常に簡単に作成できます。そして、コーディングを一切使用する必要はありません。
OptinMonsterには、メールリードジェネレーションプロセスを開始、成長、およびスケーリングするために必要なものがほぼすべて揃っています。
ツールキットを使用してできることの簡単な概要を以下に示します:
- リマーケティングのためにメールリストをスムーズに増やす
- 初回訪問者を定期的な読者に転換する
- カート放棄率と閲覧放棄率を減らす
- 実際のカウントダウンタイマーで期間限定オファーを作成する
- eBookのダウンロードとデジタル製品の売上を増やす
- ライブイベントのファネルを作成する
- ゲーミフィケーションされたポップアップを使用してサイトエンゲージメントを向上させる
- トラフィックを収益を生み出すページや投稿にリダイレクトする
- 本物のリードリストを作成し、2段階オプトインを使用して偽のメールを削除する
私たちは OptinMonster を頻繁に使用しており、完全なOptinMonster レビューも作成しました。そちらを確認するか、今すぐキャンペーンを開始してください。OptinMonster にサインアップして、この記事の残りの部分に従ってください。
ステップ#1: キャンペーンを作成する
OptinMonsterダッシュボードに移動し、作成ボタンをクリックします:

事前にデザインされたテンプレートを使用してオプトインを作成するには、テンプレートオプションを選択します。

このチュートリアルでは、フルスクリーンポップアップを作成します。フルスクリーンポップアップテンプレートを開始するには、フルスクリーンを選択してください:

次に、キャンペーンテンプレートを選択します。好きなテンプレートを選択できますが、このチュートリアルではProduct Recommendation (Gamified)キャンペーンテンプレートを使用します。
テンプレートを選択したら、キャンペーンに名前を付けます。このキャンペーン名はあなた専用であり、さまざまなターゲティングオプションを持つ多くのポップアップを作成することになるでしょう。そのため、後で混乱しないように、キャンペーンにわかりやすい名前を付けてください。
また、プランによっては、複数のサイトでOptinMonsterを使用することもできます。そのため、キャンペーンを表示したいウェブサイトも選択してください。

完了したら、ビルド開始を押します。
ステップ#2:ポップアップの編集
OptinMonsterを使用すると、ビジュアルドラッグアンドドロップポップアップビルダーが利用できます。キャンペーンの作成が完了したら、ポップアップの最も細かい詳細まで編集できます。ポップアップの見出しの編集から始めます:

ここでの最も素晴らしい点は、編集したいテキストをクリックするだけで、インラインで変更できることです。フォームに入力したり、ポップアップ内のHTMLコードを編集したりする必要はありません。
ポップアップに関するすべての編集が可能です。オプトインの外観に満足したら、より高度な設定に進むことができます。
ステップ3:ポップアップにクリックして購読するボタンを追加する
プッシュ通知は、ウェブサイトのトラフィックとエンゲージメントを自動で増やすのに役立ちます。オンラインストアを運営している場合は、PushEngageが自動eコマースプッシュ通知の作成を支援することで、売上を伸ばすのにも役立ちます。
無料で開始できますが、ビジネスの成長に真剣に取り組んでいる場合は、有料プランを購入する必要があります。また、プッシュ通知サービスを購入する前に、プッシュ通知のコストに関するこのガイドを確認してください。
PushEngageで得られるものを簡単に見てみましょう。
- コンバージョン率の高い自動キャンペーン
- 複数のターゲティングおよびキャンペーンスケジュールオプション
- 目標追跡と高度な分析
- スマートA/Bテスト
- 専任のサクセスマネージャー
ビジネスのトラフィック、エンゲージメント、売上を伸ばしたいのであれば、PushEngageが断然最良の選択肢であることがわかるでしょう。予算が限られている場合は、プッシュ通知で少しクリエイティブになることもできます。
まず、OptinMonsterのサイドバーからポップアップにHTMLブロックを追加します。

ここで、プッシュ通知購読者を収集するためのコードを追加します。まず、クリック可能なボタンを作成するために、次のコードを貼り付けます。
<button onclick="subscribeOnClickButton()" style="border: none; width: 100%; padding-left: 15%; padding-right:15%; text-align: center; display: inline-block; color: white;">Get Updates via Push Notifications</button>
HTMLを追加できる場所にコードを貼り付けます。

もちろん、スタイルを調整して、より魅力的に見せることもできます。次に、ボタンをクリックしたときにプッシュ通知購読者を収集するようにします。
PushEngageのホームページにアクセスし、開始するボタンをクリックします。

次に、PushEngage を試すために無料プランを選択するか、ビジネスの成長に真剣に取り組んでいる場合は有料プランを選択します。有料プランには、より多くのキャンペーンオプションと、さらに大きな購読者リストを構築する機能が付属しています。
あなたのPushEngageダッシュボードで、サイト設定 »サイト詳細に移動し、セットアップ手順を表示するにはここをクリックボタンをクリックします。「任意のサイト」の下に、インストールコードが表示されます。

警告:ダッシュボードから取得したコードをコピーする必要があります。コードはPushEngageユーザーごとに固有です。画像内のコードをコピーしてプッシュ通知購読者を収集することはできません。
PushEngageダッシュボードにコードが表示されたら、2番目のスクリプトを取得し、追加のコードをいくつか追加します。最終的なコードは次のようになります。
<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
console.log(res);
}]);
}
</script>
このコードを OptinMonster のHTML ブロックに、ボタンのコードの直後、<div></div> コードブロックの間に挿入すれば完了です!
ステップ4:離脱防止ポップアップの表示ルールを設定する
表示ルールは、キャンペーンがサイトに表示されるタイミングと、誰が表示するかを定義するためのものです。

ポップアップは離脱が検出された場合に表示されるように設定することをお勧めします:

これにより、離脱防止ポップアップが作成されます。ポップアップは、離脱の意図によってトリガーされるためにフルスクリーンポップアップである必要はありません。表示ルールを変更するだけで、どのポップアップでも離脱防止ポップアップに変換できます。
次のステップをクリックしてアクションを選択します。ここでは、キャンペーンビューを表示をオプトインビューに設定し、MonsterEffectで表示を好きなエントリーアニメーションに設定し、サウンドエフェクトを再生をポップアップの好きなサウンドエフェクトに設定することをお勧めします。

次に、次のステップボタンをクリックします。概要タブで設定の全範囲を確認できます。
ステップ#5:メール統合を設定する
次のステップは、メール統合を設定することです。統合タブから新しい統合を追加をクリックし、メールサービスプロバイダーを選択します。

まだメールサービスプロバイダーをお持ちでない場合は、メールマーケティングにDripを使用することをお勧めします。
ステップ6:WordPressで離脱防止ポップアップを公開する
新しいキャンペーンを作成すると、デフォルトで一時停止されます。
トップメニューから公開タブに移動して公開オプションを表示します。次に、ステータスを公開に設定し、ウェブサイトプラットフォームを選択します。

WordPressサイトを実行している場合、OptinMonsterプラグインが残りのセットアップを自動的に処理します。ShopifyとBigCommerceも同様です。その他のサイトの場合は、任意のサイトをクリックして、埋め込みコードをウェブサイトのヘッドに貼り付けます。

これで完了です!
WordPressで離脱防止ポップアップを作成した後にやること
今回は以上です、皆さん!
この記事がお役に立った場合は、お知らせください。サイトにポップアップを作成することで、トラフィックをメール購読者や本物のビジネスリードにコンバージョンさせることができます。そして、すぐに離脱防止ポップアップの作成を開始することを強くお勧めします。
トラフィックを増やすための手頃な方法を探している場合は、プッシュ通知の使用をお勧めします。プッシュ通知は、より多くのリピートトラフィックとサイトエンゲージメントをもたらすのに役立ちます。売上を生み出す自動プッシュ通知キャンペーンを作成することもできます。
まだ納得できませんか?これらのリソースを確認してください。
- 顧客エンゲージメントを高めるための7つのスマートな戦略
- プッシュ通知は効果的ですか?7つの統計情報+3つの専門家のアドバイス
- 放棄されたカートのプッシュ通知を設定する方法(簡単なチュートリアル)
- Web通知WordPressプラグインをサイトに追加する方法
プッシュ通知キャンペーンを作成するには、PushEngageの使用をお勧めします。PushEngageは、世界No.1のプッシュ通知ソフトウェアです。まだお済みでない場合は、今すぐPushEngageを使い始めましょう!