サイトにライトボックスポップアップを作成する方法(ステップバイステップ)

公開: 2021-12-31

サイトのライトボックスポップアップを作成する方法をお探しですか?

ライトボックスポップアップは、リードをキャプチャするのに非常に効果的です。 彼らは説得して回心するように設計されています。

しかし、最初からコーディングしなければならないのは本当に苦痛です。 まず、ポップアップを作成するのに十分なHTML、CSS、およびJavascriptと、ポップアップを表示するタイミングのトリガールールを知っている必要があります。 次に、電子メールサービスプロバイダーとの手動統合を作成する必要があります。 そして最後に、プライバシーとセキュリティの問題に対処する必要があります。

良いニュース:もっと簡単な方法があります。

この記事では、コーディングがゼロのライトボックスポップアップを10分以内に起動する方法を紹介します。

飛び込みましょう。

ライトボックスポップアップとは何ですか?

ライトボックスポップアップは、映画のような効果でポップアップするオプトインフォームです。 ライトボックスがポップアップすると、バックグラウンドでサイトの残りの部分がぼやけます。 このように、あなたの全体の焦点はポップアップにあります。

ライトボックスポップアップの例

もともと、ライトボックスの概念は屋外広告から来ています。

ライトボックス広告

そして、一部の開発者はこれが本当にクールな効果であると考え、Webアセットに同じ効果を再現するためにJavascriptライブラリを作成しました。 その後、ライトボックスポップアップを使用するというアイデアが登場しました。

ライトボックスポップアップが機能する理由

ライトボックスポップアップは、従来の電子メールオプチンフォームよりも多くの電子メールをキャプチャします。

しかし、なぜそれらは機能するのでしょうか?

ライトボックスポップアップが非常にうまく機能する主な理由を簡単に見てみましょう。

#1。 ライトボックスポップアップは、明確な召喚状を特徴としています

ほとんどの人は、顧客に多くのオプションを提供することは素晴らしいことだと信じています。

しかし、それは実際には真実ではありません。

直接的なコンバージョンを探している場合は、オーディエンスが集中できる単一の明確な行動を促すフレーズが必要です。 このようにして、ユーザーの心から気を散らすものをすべて取り除きます。 また、ライトボックスポップアップは、コアオファーを強調し、人々があなたの行動を促すフレーズに集中できるようにするという優れた役割を果たします。

したがって、当然、コンバージョン率はかなり高くなります。

#2。 ライトボックスポップアップは無視できません

ライトボックスポップアップは画面全体を占め、他のすべてをぼかします。 したがって、それらを無視することは事実上不可能です。

これは、アニメーション化されている場合に特に当てはまります。

ポップアップアニメーション効果

もちろん、ポップアップが邪魔にならないようにする必要があります。 また、サイトでさまざまなポップアップをトリガーするタイミングをカスタマイズすることで、これを行うことができます。 あなたの聴衆が中断に悩まされない限り、あなたは彼らを非常に簡単に説得して回心させることができます。

#3。 ライトボックスポップアップにはパーソナライズされたトリガーがあります

すべてのWeb訪問者に同じオファーを表示するべきではありません。 eコマースストアを運営している場合は、新規顧客とリピーターに対して非常に異なるオファーが必要になります。

新規顧客の場合、ウェルカムキャンペーンをトリガーできます。

クーポンポップアップ

ただし、リピーターの場合は、別のオファーを送信することをお勧めします。

エンゲージメントクーポンポップアップ

両方のオファーの割引額がまったく同じであることに注意してください。 しかし、オファーの構成方法は大幅に異なります。 ライトボックスポップアップは劇場効果のために構築されているため、これは非常に重要です。 したがって、よりパーソナライズされたアプローチを使用すると、確実にはるかに優れた結果が得られます。

ユーザーのコンテンツ設定に基づいてオファーをパーソナライズすることもできます。 彼らが夕食のレシピに関する記事を読んでいる場合は、車のオファーを表示するよりも、夕食のレシピに関連するオファーを表示する方が理にかなっています。

カントリーリビング出口ポップアップ

#4。 ライトボックスポップアップは、放棄した訪問者をキャプチャできます

ライトボックスは、ポップアップを表示するための単なる方法です。 したがって、トリガーを好きな程度にカスタマイズすることを妨げるものは何もありません。 出口を意図したライトボックスポップアップを作成することをお勧めします。

インテントポップアップを終了します

訪問者がWebサイトを終了しようとすると、終了意図のポップアップがトリガーされます。 その結果、あなたはそうでなければあなたのサイトを放棄したであろう膨大な数の訪問者を保持します。 したがって、サイトの放棄に苦しんでいる場合は、必ずexit-intentライトボックスポップアップを作成する必要があります。

ライトボックスポップアップを作成する方法

ライトボックスポップアップとは何か、なぜライトボックスポップアップを作成するのかを理解したところで、ライトボックスポップアップをどのように作成しますか? OptinMonsterを使用してポップアップを作成することをお勧めします。

OptinMonsterホーム

OptinMonsterは世界一の変換ツールキットであり、私たちはそれを自分たちで使用しました。 OptinMonsterを使用すると、変換する強力なポップアップを非常に簡単に作成できます。 また、コーディングを使用する必要はまったくありません。

OptinMonsterの完全なレビューも書きました。

それをチェックするか、今すぐキャンペーンを開始することができます。 OptinMonsterにサインアップして、この記事の残りの部分をフォローするだけです。

ステップ1:キャンペーンを作成する

OptinMonsterダッシュボードに移動し、[作成]ボタンをクリックします。

新しいポップアップキャンペーンを作成する

ライトボックスポップアップキャンペーンタイプを選択します。

ライトボックスポップアップを作成する

次に、キャンペーンテンプレートを選択します。 好きなテンプレートを選択できますが、このチュートリアルではシンプルキャンペーンタイプを使用します。

ポップアップキャンペーンのテーマを選択

次に、キャンペーンに名前を付けます。 このキャンペーン名はあなたのためのものであり、さまざまなターゲティングオプションを使用してこれらのポップアップを大量に作成する可能性があることを忘れないでください。 したがって、キャンペーンに意味のある名前を付けると、後で本当に混乱することになります。

また、計画によっては、複数のサイトでOptinMonsterを使用することもできます。 したがって、キャンペーンを表示するWebサイトも選択してください。

キャンペーンIDを作成する

完了したら、 [ビルドの開始]を押します。

ステップ2:ポップアップを編集する

OptinMonsterを使用すると、視覚的なドラッグアンドドロップポップアップビルダーを利用できます。 キャンペーンの作成が完了すると、ポップアップに関するごくわずかな詳細も編集できるようになります。 ポップアップの見出しを編集することから始めます。

見出しを編集する

ここで最も驚くべき部分は、編集したいテキストをクリックしてインラインで変更するだけです。 フォームに入力したり、ポップアップのHTMLコードを編集したりする必要はありません。

次に、ボタンのテキストと外観を調整して、明確な行動を促すフレーズを作成します。

CTAをカスタマイズする

ポップアップの外観に満足したら、より高度な設定に進むことができます。

ステップ3:表示ルールを設定する

表示ルールは、キャンペーンがいつサイトに表示され、誰がそれを見るかを定義することを目的としています。

ポップアップ表示ルール

トリガー条件をexit-intentに変更することをお勧めします。

終了インテントライトボックスポップアップ

[次のステップ]をクリックして、アクションを選択します。 ここでは、[キャンペーンビューの表示]を[Optinビュー]に設定し、 MonsterEffectを使用したショーを任意のエントリアニメーションに設定し、ポップアップの任意の効果音に効果音を再生することをお勧めします。

キャンペーンアクション設定

次に、[次のステップ]ボタンをクリックします。 [概要]タブで、設定の全範囲を確認できます。

ステップ4:メール統合を設定する

次のステップは、Eメール統合をセットアップすることです。 [統合]タブから[新しい統合の追加]をクリックし、電子メールサービスプロバイダーを選択します。

OptinMonster統合

メールサービスプロバイダーをまだお持ちでない場合は、メールマーケティングにDripを使用することをお勧めします。

ステップ5:ライトボックスポップアップを公開する

新しいキャンペーンを作成すると、デフォルトで一時停止されます。

トップメニューから[公開]タブに移動して、[公開オプション]を表示します。 次に、ステータスを[公開]に設定し、Webサイトプラットフォームを選択します。

OptinMonsterキャンペーンを公開する

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

グローバル埋め込み

そして、あなたは完了です!

まとめ

皆さん、これですべてです。

この記事が役に立ったかどうかお知らせください。 サイトにポップアップを作成すると、トラフィックを電子メールサブスクライバーや本物のビジネスリードに変換するのに役立ちます。 また、ライトボックスポップアップの作成をすぐに開始することを強くお勧めします。

また、トラフィックを増やすための手頃な方法を探している場合は、プッシュ通知を使用することをお勧めします。 プッシュ通知は、より多くのリピートトラフィックとサイトエンゲージメントをもたらすのに役立ちます。 売り上げを生み出す自動プッシュ通知キャンペーンを作成することもできます。

納得できませんか? これらのリソースを確認してください。

  • カスタマーエンゲージメントを高めるための7つのスマート戦略
  • プッシュ通知は効果的ですか? 7つの統計+3つのエキスパートのヒント
  • 放棄されたカートのプッシュ通知を設定する方法(簡単なチュートリアル)

PushEngageを使用してプッシュ通知キャンペーンを作成することをお勧めします。 PushEngageは、世界一のプッシュ通知ソフトウェアです。 したがって、まだ行っていない場合は、今日からPushEngageを開始してください。