ポップアップにプッシュ通知購読ボタンを追加する方法

ポップアップにプッシュ通知購読ボタンを追加する方法をお探しですか？

ポップアップは、コンバージョンを高め、メールリストを増やすための優れた方法です。しかし、それだけではありません。適切なポップアップビルダーを使用すれば、ポップアップに関するあらゆることをカスタマイズできます。

デフォルトでは、プッシュ通知にはポップアップモーダルも付属します。しかし、ポップアップビルダーを使用すると、さらに多くのカスタマイズオプションを利用できます。

そこで、ポップアップビルダーを使用してポップアップを作成し、プッシュ購読者を収集するための購読リンクを追加します。

ポップアップから直接プッシュ通知購読者を収集するためのボタンを簡単に追加できます。しかも非常に簡単です。必要なのは、ポップアップビルダーとプッシュ通知ソフトウェアだけです。これにより、プッシュ購読者を収集するためのカスタムポップアップを設定できます。

さあ、始めましょう。

プッシュ購読者を収集するためのポップアップを作成する方法

まず、ポップアップを作成しましょう。すべてのポップアップの作成には、OptinMonster の使用をお勧めします。

OptinMonsterは世界No.1のコンバージョンツールキットであり、私たち自身もそれを使用しています。OptinMonsterを使用すると、コンバージョンする強力なポップアップを非常に簡単に作成できます。そして、コーディングを一切使用する必要はありません。

OptinMonster には、リードジェネレーションプロセスを開始、成長、およびスケーリングするために必要なものがほぼすべて揃っています。

ツールキットを使用してできることの簡単な概要を以下に示します：

• ポップアップを使用してプッシュ通知購読者を収集する
• 初回訪問者を定期的な読者に転換する
• カート放棄率と閲覧放棄率を削減
• 実際のカウントダウンタイマーで期間限定オファーを作成する
• 電子書籍のダウンロードとデジタル製品の販売を増加
• ライブイベント用のファネルを作成する
• ゲーミフィケーションされたポップアップを使用してサイトエンゲージメントを向上させる
• トラフィックを収益を生み出すページや投稿にリダイレクトする

私たちは OptinMonster を頻繁に使用しており、完全なOptinMonster レビューも作成しました。そちらを確認するか、今すぐキャンペーンを開始してください。OptinMonster にサインアップして、この記事の残りの部分に従ってください。

ステップ 1: 購読者を収集するためのポップアップキャンペーンを作成する

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

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

このチュートリアルでは、ブラックフライデー用のポップアップを作成します。ポップアップキャンペーンタイプを選択し、キャンペーンテンプレートを検索してください。

好きなテンプレートを選択できますが、このチュートリアルではブラックフライデーキャンペーンテンプレートを使用します。

テンプレートを選択したら、キャンペーンに名前を付けます。このキャンペーン名はあなた専用であり、さまざまなターゲティングオプションを持つ多くのポップアップを作成することになるでしょう。そのため、後で混乱しないように、キャンペーンにわかりやすい名前を付けてください。

また、プランによっては、複数のサイトで OptinMonster を使用することもできます。そのため、キャンペーンを表示したいウェブサイトも選択してください。完了したら、ビルド開始をクリックします。

ステップ 2: ポップアップを編集して見た目をカスタマイズする

OptinMonster では、ビジュアルドラッグアンドドロップポップアップビルダーが利用できます。キャンペーンに名前を付けたら、ポップアップに関する最も細かい詳細まで編集できるようになります。

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

画像を含むポップアップに関するあらゆることを編集できます。オプトインの外観に満足したら、より高度な設定に進むことができます。

この特定のテンプレートは、ポップアップに 3 つの部分があるように設定されています。訪問者がブラックフライデーのクーポンをオプトインする最初のはい/いいえ画面があります。これは、上の画像で確認できるものです。デフォルトでは、送料無料クーポンです。しかし、好きなオファーやクーポンを追加できます。

訪問者がポップアップの「はい」ボタンをクリックすると、「オプトイン」画面に移動します。ここで購読者情報を収集します。デフォルトでは、オプトイン画面はメールアドレスを収集しますが、今回はそれをプッシュ購読者を収集するボタンに置き換えます。

最後に、訪問者が購読したときに表示される「成功」画面があります。

一つずつ進めましょう。

ステップ3：ポップアップからメールオプトインを削除する

ポップアップ内のモジュールは自由に編集できます。下部のバーにある「オプトイン」画面に移動してください。

ここで、メールオプトインモジュールにカーソルを合わせ、削除ボタンをクリックするだけで削除できます。

メールオプトインが削除されたので、プッシュ通知購読者を収集するボタンを追加します。

ステップ4：ポップアップにクリックして購読するボタンを追加する

まず、OptinMonsterのサイドバーからポップアップにHTMLブロックを追加します。

ここで、プッシュ通知購読者を収集するためのコードを追加します。まず、クリック可能なボタンを作成するために、次のコードを貼り付けます。

<button class = "btn" onclick="subscribeOnClickButton()">Get Updates via Push Notifications Instead</button>

HTMLを追加できる場所にコードを貼り付けます。この時点で、ポップアップに新しいボタンが表示されているはずです。

次に、下にスクロールして、次のCSSをCSSコンテナに貼り付けます。

html div#om-{{id}} .btn
{
    font-family: Arial, sans-serif;
    font-weight: 0;
    font-size: 14px;
    color: #fff;
    background-color: #cf1f31;
    padding: 10px 30px;
    width: 100%;
    margin: auto;
    border: solid #cf1f31 2px;
    box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
    border-radius: 50px;
    transition : 1000ms;
    transform: translateY(0);
    display: grid;
    align-text: center;
    cursor: pointer;
}

html div#om-{{id}} .btn:hover
{
    transition : 1000ms;
    padding: 10px 35px;
    transform : translateY(-0px);
    background-color: #ffffff;
    color: #cf1f31;
    border: solid 2px #ffffff;
}

この時点で、ポップアップに美しくデザインされたボタンが表示されているはずです。

ステップ5：PushEngageから購読コードを取得する

プッシュ通知は、ウェブサイトのトラフィックとエンゲージメントを自動的に増加させるのに役立ちます。ウェブプッシュ通知は、セッションを放棄した、またはウェブサイトを離れたユーザーを呼び戻す効果的な方法です。新しいコンテンツ、オファー、イベントを通知することで、ユーザーを再エンゲージするのに役立ちます。

プッシュ通知には、明確で実行可能なメッセージと行動喚起ボタンも含まれており、ユーザーに記事を読む、購入を完了する、イベントに参加するなど、特定の行動を促します。

プッシュ通知は、ユーザーの好み、行動、興味に基づいて調整できるため、メッセージが各ユーザーにとって関連性が高く価値のあるものになります。ユーザーはウェブプッシュ通知を受け取ることに同意する必要があります。これにより、メッセージがスパムと見なされず、ユーザーの許可を得て送信されることが保証されます。

最も素晴らしいのは、メールポップアップからプッシュ通知購読者を収集できることです。そのため、サイト訪問者がメールIDを提供したくない場合でも、ウェブプッシュ通知を使用して購読してもらうことができます。

ウェブプッシュ通知の送信にはPushEngageの使用をお勧めします。

PushEngageで得られるものを簡単に確認できます。

• コンバージョン率の高い自動キャンペーン
• 複数のターゲティングおよびキャンペーンスケジューリングオプション
• 目標追跡および高度な分析
• スマートA/Bテスト
• 専任のサクセスマネージャー

無料で開始できますが、ビジネスの成長に真剣に取り組んでいる場合は、有料プランを購入する必要があります。また、プッシュ通知サービスを購入する前に、プッシュ通知のコストに関するこのガイドを確認してください。

また、オンラインストアを運営している場合、PushEngageは自動化されたeコマースプッシュ通知の作成を支援することで、売上の増加にも役立ちます。

ビジネスのトラフィック、エンゲージメント、売上を伸ばしたいのであれば、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>

ステップ6：ポップアップのHTMLブロックに購読コードを追加する

OptinMonsterのHTMLブロックにこのコードを追加すれば完了です！

完了したら、「保存」および「公開」ボタンをクリックしてください。

ステップ7：クリックトラッキングとキャンペーン終了処理を追加する

最後に、各購読者をOptinMonsterでのコンバージョンとしてカウントするためにクリックトラッキングコードを追加する必要があります。また、訪問者が購読した際には、「成功」画面に移動させるか、キャンペーンを終了させる必要があります。

JavaScriptスニペット内に、次のコード行を追加します。

コンバージョン追跡を有効にするには、このコードを追加してください：

om{{id}}.Listeners.convert(); //Track submission as a conversion in OptinMonster

購読者を成功画面に移動するには、このコードを追加してください：

om{{id}}.changeView('success'); // Show Success view on submission

購読時にキャンペーンを閉じるには、このコードを追加してください：

om{{id}}.startClose();// Close campaign on submission

複数のコードスニペットを追加することもできます。購読者を成功画面に移動し、コンバージョンを追跡することをお勧めします。したがって、最終的に使用をお勧めするコードスニペット（ボタンとすべてのJavaScriptを含む）は次のとおりです。

<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);
om{{id}}.Listeners.convert(); //Track submission as a conversion in OptinMonster
om{{id}}.startClose();// Close campaign on submission
}]);
}
</script>
<div>
	<button class="btn" onclick="subscribeOnClickButton()">Get Updates via Push Notifications</button>
</div>

または、キャンペーンを直接閉じるには、代わりにこのコードを使用することもできます：

<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);
om{{id}}.Listeners.convert(); //Track submission as a conversion in OptinMonster
om{{id}}.changeView('success'); // Show Success view on submission
}]);
}
</script>
<div>
	<button onclick="subscribeOnClickButton()">Get Updates via Push Notifications</button>
</div>

コードをOptinMonsterポップアップのHMTLブロックにコピー＆ペーストするだけです。

どちらのコードスニペットの場合も、HTMLブロックのCSSセクションに次のCSSを追加することを忘れないでください：

html div#om-{{id}} .btn
{
    font-family: Arial, sans-serif;
    font-weight: 0;
    font-size: 14px;
    color: #fff;
    background-color: #cf1f31;
    padding: 10px 30px;
    width: 100%;
    margin: auto;
    border: solid #cf1f31 2px;
    box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
    border-radius: 50px;
    transition : 1000ms;
    transform: translateY(0);
    display: grid;
    align-text: center;
    cursor: pointer;
}

html div#om-{{id}} .btn:hover
{
    transition : 1000ms;
    padding: 10px 35px;
    transform : translateY(-0px);
    background-color: #ffffff;
    color: #cf1f31;
    border: solid 2px #ffffff;
}

完了したら、保存をクリックします。ウェブサイトを確認すると、ポップアップが電子メールとプッシュ通知の両方の購読者を取得しているのが見えるはずです。

そして、あっという間に、ポップアップからプッシュ購読者を取得できるようになります。プッシュ通知には独自のポップアップモーダルが付属していますが、カスタマイズは少し難しいです。そのため、OptinMonsterを使用して美しいポップアップを作成し、それをプッシュ通知ポップアップとして使用できます。

ステップ#8：WordPressで離脱インテントポップアップを公開する

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

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

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

これで完了です！

ボーナスステップ：PushEngageでクイックインストールを無効にする

クイックインストールは、SSL証明書なしでウェブサイトにプッシュ通知購読者を追加する方法です。現在、ほとんどすべてのサイトにSSL証明書がありますが、万が一インストールしていない場合は、すぐにインストールすることをお勧めします。WordPressにSSL証明書をインストールする方法に関するこの記事を確認してください。

したがって、サイトで購読者を取得し始める前に、クイックインストールも無効にすることをお勧めします。PushEngageダッシュボードにアクセスし、[デザイン] » [ポップアップモーダル]に移動します。次に、[クイックインストール]を無効にします。

これで、ウェブサイトを宣伝し、ブラックフライデーのためにさらに多くの購読者を取得する準備が整いました！

プッシュ購読者の取得を開始した後にやること

今回は以上です、皆さん！

この記事がお役に立ったかどうかお知らせください。サイトでポップアップを作成すると、トラフィックをプッシュ購読者や実際のビジネスリードに変換するのに役立ちます。そして、離脱インテントポップアップをすぐに作成することをお勧めします。

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

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

• 顧客エンゲージメントを高めるための7つのスマートな戦略
• プッシュ通知は効果的ですか？7つの統計情報＋3つの専門家のアドバイス
• 放棄されたカートのプッシュ通知を設定する方法（簡単なチュートリアル）
• Web通知WordPressプラグインをサイトに追加する方法

プッシュ通知キャンペーンを作成するには、PushEngageの使用をお勧めします。PushEngageは、世界No.1のプッシュ通知ソフトウェアです。まだお済みでない場合は、今すぐPushEngageを使い始めましょう！