プッシュ通知用のクリック・トゥ・サブスクライブリンクを作成する方法

クリックして購読するリンクを作成し、プッシュ通知購読者を収集する方法をお探しですか？

わかります。購読者を増やす方法に少し柔軟性を持たせたい場合、それがより便利になることがあります。

心配いりません。お任せください。

この記事では、独自の購読ボタンまたはリンクを作成する方法をステップバイステップでご紹介します。

ここでは、PushEngage を使用してその方法を説明します。

しかし、他のベンダーを使用している場合でも心配いりません。プロセスはほぼ同じはずです。しかし、購読者を増やすことに真剣に取り組んでいるのであれば、PushEngage を試すべきです。PushEngage は世界No.1のプッシュ通知ソフトウェアです。

まだの方は、今日からPushEngageを始めましょう。

準備はいいですか？始めましょう。

PushEngage を使用してクリックして購読するボタンを作成する方法

まだ PushEngage を設定していない場合は、今が設定するのに良い時期です。

ステップ #1: PushEngage の開始

PushEngage のホームページにアクセスし、開始ボタンをクリックします。

次に、PushEngage を試すために無料プランを選択するか、ビジネスの成長に真剣に取り組んでいる場合は有料プランを選択します。有料プランには、より多くのキャンペーンオプションと、さらに大きな購読者リストを構築する機能が付属しています。

ステップ #2: スニペットをコピーする

あなたの PushEngage ダッシュボードで、サイト設定 » サイト詳細に移動し、セットアップ手順を表示するにはここをクリックボタンをクリックします。任意のサイトの下に、インストールコードが表示されます。

警告: ダッシュボードから取得したコードをコピーする必要があります。コードは PushEngage ユーザーごとに固有です。画像内のコードをコピーしてプッシュ通知購読者を収集することはできません。

PushEngage ダッシュボードでコードを取得したら、このスニペットをコードに追加します。

<script> window._peq = window._peq || [];</script>

最終的なコードは次のようになります。

<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];</script>

ステップ #3: ボタンまたはリンクを作成する

HTML で購読クリックボタンを作成する方法

コードが取得できたので、難しい部分はほとんど完了です。次に、クリックされたときにコードをトリガーするボタンを作成する必要があります。これは「onclick イベント」と呼ばれるものです。

購読クリックボタンを作成するには、この HTML スニペットを使用します。

<button onclick="subscribeOnClickButton()">Subscribe</button>

購読ボタンは、ファーストビューのコールトゥアクションとして優れています。

スタイリングなしの場合、次のようになります。

スクリーンショットのヘッダーと段落は無視してください。ウェブサイトのファーストビューにどのように表示されるかを示すためだけのものです。HTML スニペットはヘッダーと段落を生成しません。

もちろん、コードを貼り付けたら CSS を使用してボタンをスタイリングする必要があります。HTML 要素のスタイリング方法がわからない場合は、ここに便利な例のリストがありますので参照してください。

HTML で購読クリックリンクを作成する方法

購読リンクを使用して購読者を収集することもできます。その場合、HTML スニペットは次のようになります。

<a onclick="subscribeOnClickButton();" href="javascript:void(0)">Subscribe</a>

これは、テキスト内のハイパーリンクを作成する場合に使用します。ブログ記事にプッシュ通知購読の提案を挿入したい場合に非常に便利です。

次のようになります。

HTMLスニペットは「購読」と表示されるリンクしか作成しません。画像のように、残りのコンテンツを自由に追加してください。そうすれば、はるかに自然に感じられます。

これで完了です！リンクの準備ができました。

ステップ4：WordPressにコードを埋め込む

終わりましたか？では、残りのコードに取り掛かりましょう。

ボタンがクリックされたときにのみ購読者を収集したい場合は、このコードを貼り付けます。

<script>
function subscribeOnClickButton() {
window._peq.push(['subscribe']);
}
</script>

ここには派手な機能はありません。クリックすると購読者を収集するだけのボタンです。

しかし、もう少し高度なことをしたい場合は、PushEngageサーバーからの応答をコンソールにも記録できます。

function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
if(res.statuscode==1)
{
// Code to return response
console.log(res);
}
}]);
}

ボタンがクリックされたときに購読者を収集し、それらの購読者を自動的にセグメント化したい場合は、代わりにこのコードを使用できます。

function subscribeOnClickButton(){
window._peq.push(['subscribe','segment_name',function(res){
if(res.statuscode==1)
{
// Code to return response
console.log(res);
}
}]);
}

これで完了です。最適なコードスニペットを選んで、ウェブサイトのHTMLコードに貼り付けてください。

次に、ボタンまたはリンクを機能させるには、ページの最後にさらにJavaScriptコードを貼り付ける必要があります。

WordPressサイトを実行している場合、最も簡単な方法はプラグインを使用することです。この目的に最適なプラグインはInsert Headers and Footersプラグインです。プラグインをインストール（無料です）して、設定 » ヘッダーとフッターの挿入に移動します。

そして、完全なコードをフッターのスクリプトボックスに貼り付けます。PushEngageダッシュボードから取得したコードと、ボタンまたはリンクを正しく実行するために必要なJavaScriptコードの両方を貼り付ける必要があります。

ステップ5：サイトにボタンまたはリンクのHTMLコードを貼り付ける

最後に、ページや投稿にボタンまたはリンクのHTMLコードを貼り付ける必要があります。

WordPressを使用している場合は、記事に直接HTMLコードを貼り付けることができます。

これを初めて行う場合でも問題ありません。

ここに、WordPressにHTMLコードを追加する方法に関するステップバイステップの説明記事があります。

この時点で、すべてが正常に機能しているかを確認するためにプッシュ通知をテストすることを強くお勧めします。

すべてうまくいけば、サイトにクリックすると購読者を収集するボタンまたはリンクが表示されます。うまくいかない場合は、カスタマーサクセスチームにお気軽にお問い合わせください。喜んでお手伝いさせていただきます。

まとめ

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

サイトにクリックして購読するボタンを作成したら、高度なセグメンテーションルールを確認してください。

詳細なセグメントを作成することで、プッシュ通知を大幅にパーソナライズできます。これは、プッシュ通知キャンペーンからのエンゲージメント、クリック率、および売上の向上を意味します。

プッシュ通知が初めての場合は、PushEngageを試してみてください。PushEngageは、どこでも最も強力で柔軟なプッシュ通知キャンペーンを提供します。したがって、ビジネスの成長に真剣に取り組んでいる場合は、今すぐPushEngageを使い始めましょう！