Looking for a way to create a full screen popup for your WordPress site?
A full screen popup can be incredibly effective for capturing leads. They’re designed to convince and convert by pulling the visitor’s entire focus on themselves.
しかし、ゼロからコーディングするのは大変です。まず、ポップアップを作成するために十分なHTML、CSS、JavaScriptの知識が必要になり、いつ表示するかというトリガールールも必要になります。次に、メールサービスプロバイダーとの手動統合を作成する必要があります。そして最後に、プライバシーとセキュリティの問題に対処する必要があります。
朗報：もっと簡単な方法があります。
In this article, we’re going to show you how to launch a full screen popup in WordPress with zero coding in less than 10 minutes.
さあ、始めましょう。
What is a Full Screen Popup in WordPress?
A full screen popup is an opt-in form that popups up with a full screen cinematic effect. Think of it as watching a movie on Netflix in full-screen mode. When a full screen optin form pops up, you can’t see the rest of the WordPress site. This way, your entire focus is on the popup.
例を以下に示します。
You can use full screen popups to:
- Welcome new visitors
- Offer a discount coupon
- Point visitors to their best content
- Send visitors to their social media profiles
And more. You can even create popup contact forms. Popups are super flexible and as long as you’re creative, you can set up high-converting ones easily.
How to Create a Full Screen Popup in WordPress
Now that you understand what a full screen popup is and why you’d want to create one, how do you create a full screen popup? We recommend using OptinMonster to create all your popups.
OptinMonsterは世界No.1のコンバージョンツールキットであり、私たち自身もそれを使用しています。OptinMonsterを使用すると、コンバージョンする強力なポップアップを非常に簡単に作成できます。そして、コーディングを一切使用する必要はありません。
私たちはOptinMonsterのレビュー全体も書きました。
それをチェックするか、今すぐキャンペーンを開始してください。OptinMonsterにサインアップして、この記事の残りに従うだけです。
ステップ#1: キャンペーンを作成する
OptinMonsterダッシュボードに移動し、作成ボタンをクリックします：
事前にデザインされたテンプレートを使用してオプトインを作成するには、テンプレートオプションを選択します。
Select the Fullscreen to get started with full screen popup templates:
Then, choose a campaign template. You can choose whatever template you like, but we’re going with the Product Recommendation (Gamified) campaign template for this tutorial.
テンプレートを選択したら、キャンペーンに名前を付けます。このキャンペーン名はあなた専用であり、さまざまなターゲティングオプションを持つ多くのポップアップを作成することになるでしょう。そのため、後で混乱しないように、キャンペーンにわかりやすい名前を付けてください。
Also, depending on your plan, you can also use OptinMonster on multiple sites. So, select the website where you want to display your campaign as well.
完了したら、ビルド開始を押します。
Step #2: Edit Your Popup
OptinMonsterを使用すると、ビジュアルドラッグアンドドロップポップアップビルダーが利用できます。キャンペーンの作成が完了したら、ポップアップの最も細かい詳細まで編集できます。ポップアップの見出しの編集から始めます：
ここでの最も素晴らしい点は、編集したいテキストをクリックするだけで、インラインで変更できることです。フォームに入力したり、ポップアップ内のHTMLコードを編集したりする必要はありません。
You can edit everything you want about your full screen popup. When you’re happy with the optin’s appearance, you can move on to more advanced settings.
Step #3: Set Full Screen Popup Display Rules
表示ルールは、キャンペーンがサイトに表示されるタイミングと、誰が表示するかを定義するためのものです。
終了インテントをトリガー条件として変更することをお勧めします。
次のステップをクリックしてアクションを選択します。ここでは、キャンペーンビューを表示をオプトインビューに設定し、MonsterEffectで表示を好きなエントリーアニメーションに設定し、サウンドエフェクトを再生をポップアップの好きなサウンドエフェクトに設定することをお勧めします。
次に、次のステップボタンをクリックします。概要タブで設定の全範囲を確認できます。
ステップ4：ポップアップにクリックして購読するボタンを追加する
プッシュ通知は、ウェブサイトのトラフィックとエンゲージメントを自動で増やすのに役立ちます。オンラインストアを運営している場合は、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> コードブロックの間に挿入すれば完了です！
Step #5: Setup Your Email Integration
次のステップは、メール統合を設定することです。統合タブから新しい統合を追加をクリックし、メールサービスプロバイダーを選択します。
まだメールサービスプロバイダーをお持ちでない場合は、メールマーケティングにDripを使用することをお勧めします。
Step #6: Publish Your Full Screen Popup in WordPress
新しいキャンペーンを作成すると、デフォルトで一時停止されます。
トップメニューから公開タブに移動して公開オプションを表示します。次に、ステータスを公開に設定し、ウェブサイトプラットフォームを選択します。
WordPressサイトを実行している場合、OptinMonsterプラグインが残りのセットアップを自動的に処理します。ShopifyとBigCommerceも同様です。その他のサイトの場合は、任意のサイトをクリックして、埋め込みコードをウェブサイトのヘッドに貼り付けます。
これで完了です！
What to do After Creating a Full Screen Popup in WordPress
今回は以上です、皆さん！
Let us know if this article helped. Creating popups on your site can help you convert your traffic into email subscribers and genuine business leads. And we highly recommend that you start creating full screen popups right away.
トラフィックを増やすための手頃な方法を探している場合は、プッシュ通知の使用をお勧めします。プッシュ通知は、より多くのリピートトラフィックとサイトエンゲージメントをもたらすのに役立ちます。売上を生み出す自動プッシュ通知キャンペーンを作成することもできます。
まだ納得できませんか？これらのリソースを確認してください。
- 顧客エンゲージメントを高めるための7つのスマートな戦略
- プッシュ通知は効果的ですか？7つの統計情報＋3つの専門家のアドバイス
- 放棄されたカートのプッシュ通知を設定する方法（簡単なチュートリアル）
- Web通知WordPressプラグインをサイトに追加する方法
プッシュ通知キャンペーンを作成するには、PushEngageの使用をお勧めします。PushEngageは、世界No.1のプッシュ通知ソフトウェアです。まだお済みでない場合は、今すぐPushEngageを使い始めましょう！
