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

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

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

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

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

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

さあ、始めましょう。

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

まず、ポップアップを作成しましょう。すべてのポップアップの作成には、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スニペット内に、次のコード行を追加します。

To enable conversion tracking, add this code:

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

To move your subscriber to the Success screen, add this code:

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

To close campaign on subscription, add this code:

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

You can add multiple code snippets as well. We recommend that you move subscribers to the Success screen and track the conversion. So, the final code snippet that we recommend using (including the button and all the Javascript) is:

<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>

Or, you can use this code instead to close the campaign directly:

<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>

Just copy and paste the code into the HMTL block of your OptinMonster popup.

And for either code snippet, remember to add the following CSS in the CSS section of your HTML block:

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;
}

When you’re done, click Save. If you check your website, you should now see the popup collecting both email and push notification subscribers:

And just like that, you’re collecting push subscribers from your popup. Push notifications come with their own popup modals. But they’re a bit difficult to customize. So, you can create beautiful popups using OptinMonster and then use them as your push notification popups.

Step #8: Publish Your Exit Intent Popup in WordPress

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

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

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

これで完了です！

Bonus Step: Disable Quick Install in PushEngage

Quick Install is a method of adding push notification subscribers to a website without an SSL certificate. Nowadays, almost all sites have an SSL certificate, but just in case you don’t have one installed, we highly recommend that you get one installed right away. Check out this article on how to install an SSL certificate in WordPress.

So, before you start collecting subscribers on your site, we recommend disabling Quick Install as well. Head over to the PushEngage dashboard and go to Design » Popup Modals. Then, disable Quick Install:

And now, you’re ready to promote your website and collect more subscribers for Black Friday!

What to do After You Start Collecting Push Subscribers

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

Let us know if this article helped. Creating popups on your site can help you convert your traffic into push subscribers and genuine business leads. And we highly recommend that you start creating exit intent popups right away.

And if you’re looking for an affordable way to grow your traffic, we recommend using push notifications. Push notifications can help you bring in more repeat traffic and site engagement. You can also create automated push notification campaigns that generate sales.

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

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

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