サイトにライトボックスポップアップを作成する方法をお探しですか？
ライトボックスポップアップは、リードを獲得するために非常に効果的です。それらは説得してコンバージョンさせるように設計されています。
しかし、ゼロからコーディングするのは大変です。まず、ポップアップを作成するために十分なHTML、CSS、JavaScriptの知識が必要になり、いつ表示するかというトリガールールも必要になります。次に、メールサービスプロバイダーとの手動統合を作成する必要があります。そして最後に、プライバシーとセキュリティの問題に対処する必要があります。
朗報：もっと簡単な方法があります。
この記事では、コーディングなしで10分以内にライトボックスポップアップを起動する方法をご紹介します。
さあ、始めましょう。
ライトボックスポップアップとは？
ライトボックスポップアップは、シネマティックエフェクトで表示されるオプトインフォームです。ライトボックスが表示されると、背景のサイト全体がぼやけます。これにより、ポップアップに完全に集中できます。
元々、ライトボックスのコンセプトは屋外広告から来ています：
そして、ある開発者がこの効果を非常にクールだと考え、ウェブアセットで同じ効果を再現するためのJavaScriptライブラリを作成しました。その後、ライトボックスポップアップを使用するというアイデアが登場しました。
ライトボックスポップアップが機能する理由
ライトボックスポップアップは、従来のメールオプトインフォームよりも多くのメールを獲得します。
しかし、なぜ機能するのでしょうか？
ライトボックスポップアップが非常にうまく機能する主な理由を簡単に見てみましょう。
＃1。ライトボックスポップアップは明確な行動喚起を特徴とする
ほとんどの人は、顧客に多くの選択肢を与えることは素晴らしいことだと信じています。
しかし、それは実際には真実ではありません。
直接的なコンバージョンを目指すなら、単一で明確な行動喚起が必要です。これにより、ユーザーの心からすべての気を散らすものを排除できます。ライトボックスポップアップは、コアオファーを強調し、人々に行動喚起に集中させるのに役立ちます。
したがって、当然ながらコンバージョン率は非常に高くなります。
＃2。ライトボックスポップアップは無視できない
ライトボックスポップアップは画面全体を占有し、他のすべてをぼかします。そのため、無視することは事実上不可能です。
これは、アニメーションの場合に特に当てはまります：
もちろん、ポップアップが邪魔にならないようにする必要があります。サイトでさまざまなポップアップをトリガーするタイミングをカスタマイズすることで、それを実現できます。視聴者が中断に迷惑を感じない限り、非常に簡単に説得してコンバージョンさせることができます。
＃3。ライトボックスポップアップにはパーソナライズされたトリガーがある
すべてのウェブ訪問者に同じオファーを表示すべきではありません。eコマースストアを運営している場合、新規顧客とリピーターにはまったく異なるオファーが必要になります。
新規顧客には、ウェルカムキャンペーンをトリガーできます：
しかし、リピーターには、別のオファーを送信したい場合があります：
割引額が両方のオファーで全く同じであることに注目してください。しかし、オファーの提示方法は劇的に異なります。そして、これは非常に重要です。なぜなら、ライトボックスポップアップは演劇的な効果のために構築されているからです。したがって、よりパーソナライズされたアプローチは、間違いなくより良い結果をもたらします。
ユーザーのコンテンツの好み に基づいてオファーをパーソナライズすることさえできます。夕食のレシピに関する記事を読んでいる場合、車に関するオファーを表示するよりも、夕食のレシピに関連するオファーを表示する方が理にかなっています。
#4. ライトボックスポップアップは離脱する訪問者をキャプチャできます
ライトボックスはポップアップを表示するための単なる方法です。したがって、トリガーを好きなだけカスタマイズするのを妨げるものは何もありません。離脱インテントライトボックスポップアップの作成をお勧めします。
離脱インテントポップアップは、訪問者がウェブサイトから離れようとしたときにトリガーされます。その結果、そうでなければサイトを離れていたであろう膨大な数の訪問者を維持できます。したがって、サイトの離脱に悩んでいる場合は、離脱インテントライトボックスポップアップを必ず作成してください。
ライトボックスポップアップの作成方法
ライトボックスポップアップとは何か、そしてなぜそれを作成したいのかを理解したところで、どのようにライトボックスポップアップを作成するのでしょうか？ポップアップの作成にはOptinMonsterの使用をお勧めします。
OptinMonsterは世界No.1のコンバージョンツールキットであり、私たち自身もそれを使用しています。OptinMonsterを使用すると、コンバージョンする強力なポップアップを非常に簡単に作成できます。そして、コーディングを一切使用する必要はありません。
私たちはOptinMonsterのレビュー全体も書きました。
それをチェックするか、今すぐキャンペーンを開始してください。OptinMonsterにサインアップして、この記事の残りに従うだけです。
ステップ#1: キャンペーンを作成する
OptinMonsterダッシュボードに移動し、作成ボタンをクリックします：
ライトボックスポップアップキャンペーンタイプを選択します：
次に、キャンペーンテンプレートを選択します。好きなテンプレートを選択できますが、このチュートリアルではシンプルキャンペーンタイプを使用します。
次に、キャンペーンに名前を付けます。このキャンペーン名はあなた用であり、さまざまなターゲティングオプションを持つ多くのポップアップを作成することになるでしょう。したがって、後で非常に混乱しないように、キャンペーンにわかりやすい名前を付けてください。
また、プランによっては、複数のサイトでOptinMonsterを使用することもできます。したがって、キャンペーンを表示したいウェブサイトも選択してください。
完了したら、ビルド開始を押します。
ステップ#2: ライトボックスポップアップを編集する
OptinMonsterを使用すると、ビジュアルドラッグアンドドロップポップアップビルダーが利用できます。キャンペーンの作成が完了したら、ポップアップの最も細かい詳細まで編集できます。ポップアップの見出しの編集から始めます：
ここでの最も素晴らしい点は、編集したいテキストをクリックするだけで、インラインで変更できることです。フォームに入力したり、ポップアップ内のHTMLコードを編集したりする必要はありません。
次に、ボタンのテキストと外観を調整して、明確なコールトゥアクションを作成します：
ポップアップの外観に満足したら、より高度な設定に進むことができます。
ステップ #3：表示ルールを設定する
表示ルールは、キャンペーンがサイトに表示されるタイミングと、誰が表示するかを定義するためのものです。
終了インテントをトリガー条件として変更することをお勧めします。
次のステップをクリックしてアクションを選択します。ここでは、キャンペーンビューを表示をオプトインビューに設定し、MonsterEffectで表示を好きなエントリーアニメーションに設定し、サウンドエフェクトを再生をポップアップの好きなサウンドエフェクトに設定することをお勧めします。
次に、次のステップボタンをクリックします。概要タブで設定の全範囲を確認できます。
ステップ #4：メール統合を設定する
次のステップは、メール統合を設定することです。統合タブから新しい統合を追加をクリックし、メールサービスプロバイダーを選択します。
まだメールサービスプロバイダーをお持ちでない場合は、メールマーケティングにDripを使用することをお勧めします。
ステップ #5：ライトボックスポップアップを公開する
新しいキャンペーンを作成すると、デフォルトで一時停止されます。
トップメニューから公開タブに移動して公開オプションを表示します。次に、ステータスを公開に設定し、ウェブサイトプラットフォームを選択します。
WordPressサイトを実行している場合、OptinMonsterプラグインが残りのセットアップを自動的に処理します。ShopifyとBigCommerceも同様です。その他のサイトの場合は、任意のサイトをクリックして、埋め込みコードをウェブサイトのヘッドに貼り付けます。
これで完了です！
ボーナス：ポップアップからプッシュ通知購読者を収集する
プッシュ通知は、ウェブサイトのトラフィックとエンゲージメントを自動的に増やすのに役立ちます。ウェブプッシュ通知は、セッションを放棄したりウェブサイトを離れたりしたユーザーを呼び戻す効果的な方法です。新しいコンテンツ、オファー、またはイベントを通知することで、ユーザーを再エンゲージするのに役立ちます。
プッシュ通知には、明確で実行可能なメッセージと行動喚起ボタンも含まれており、ユーザーに記事を読む、購入を完了する、イベントに参加するなど、特定の行動を取るように促します。
プッシュ通知は、ユーザーの好み、行動、興味に基づいて調整できるため、メッセージが各ユーザーにとって関連性が高く価値のあるものになります。ユーザーはウェブプッシュ通知を受け取ることに同意する必要があります。これにより、メッセージがスパムと見なされず、ユーザーの許可を得て送信されることが保証されます。
最もクールなのは、メールポップアップからプッシュ通知購読者を収集できることです。したがって、サイト訪問者がメールIDを提供したくない場合でも、ウェブプッシュ通知を使用して購読してもらうことができます。
そして、それが私たちが取り組むことです。
ステップ #1：プッシュ通知サービスを選択する
ウェブプッシュ通知を送信するには、PushEngageを使用することをお勧めします。
PushEngageで何ができるかの概要を以下に示します。
- コンバージョン率の高い自動キャンペーン
- 複数のターゲティングおよびキャンペーンスケジュール設定オプション
- 目標追跡および高度な分析
- スマートA/Bテスト
- 専任のサクセスマネージャー
無料で開始できますが、ビジネスの成長に真剣に取り組んでいる場合は、有料プランを購入する必要があります。また、プッシュ通知サービスを購入する前に、プッシュ通知のコストに関するこのガイドを確認してください。
また、オンラインストアを運営している場合、PushEngageは自動化されたeコマースプッシュ通知の作成を支援することで、売上の増加にも役立ちます。
ビジネスのトラフィック、エンゲージメント、売上を伸ばしたいのであれば、PushEngageが断然最良の選択肢であることがわかるでしょう。予算が限られている場合は、プッシュ通知で少しクリエイティブになることもできます。
ステップ#2：ポップアップにHTMLブロックを追加する
まず、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 Instead</button>HTMLを追加できる場所にコードを貼り付けます。
この時点で、メール購読ボタンのすぐ下に、「プッシュ通知で更新を受け取る」という新しいボタンがポップアップに表示されているはずです。
もちろん、スタイルを調整して、より魅力的に見せることもできます。次に、ボタンをクリックしたときにプッシュ通知購読者を収集するようにします。
ステップ#3：PushEngageから購読コードを取得する
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>ステップ#4：ポップアップのHTMLブロックに購読コードを追加する
このコードをOptinMonsterのHTMLブロックに追加すれば完了です！
完了したら、保存および公開ボタンをクリックします。
ウェブサイトを確認すると、メールとプッシュ通知の両方の購読者を収集する新しいライトボックスポップアップが表示されているはずです。
このようにして、ポップアップからプッシュ購読者を収集できます。プッシュ通知には独自のポップアップモーダルがありますが、カスタマイズが少し難しいです。そのため、OptinMonsterを使用して美しいポップアップを作成し、それをプッシュ通知ポップアップとして使用できます。
ライトボックスポップアップを作成した後に行うこと
今回は以上です、皆さん！
この記事がお役に立った場合は、お知らせください。サイトにポップアップを作成すると、トラフィックをメール購読者や実際のビジネスリードに変換するのに役立ちます。ライトボックスポップアップの作成をすぐに開始することを強くお勧めします。
トラフィックを増やすための手頃な方法を探している場合は、プッシュ通知の使用をお勧めします。プッシュ通知は、より多くのリピートトラフィックとサイトエンゲージメントをもたらすのに役立ちます。売上を生み出す自動プッシュ通知キャンペーンを作成することもできます。
まだ納得できませんか？これらのリソースを確認してください。
プッシュ通知キャンペーンを作成するには、PushEngageの使用をお勧めします。PushEngageは、世界No.1のプッシュ通知ソフトウェアです。まだお済みでない場合は、今すぐPushEngageを使い始めましょう！
