Looking for a way to create push button notifications and collect push notification subscribers?
わかります。購読者を増やす方法に少し柔軟性を持たせたい場合、それがより便利になることがあります。
心配いりません。お任せください。
In this article, we’re going to show you step-by-step how to create your own push button notifications.
準備はいいですか？始めましょう。
How to Create Push Button Notifications in WordPress
Before you create push button notifications in WordPress, you need to create a landing page to collect push subscribers. We highly recommend using SeedProd to create your landing pages.
SeedProd is the best WordPress landing page builder. It’s perfect for businesses, bloggers, and website owners looking to build high-converting landing pages without any development skills.
With SeedPreed, you get pre-built templates for high-converting landing pages that you can publish instantly. This includes templates for:
そして、さらに多くの機能があります！
ステップ#1：SeedProdのインストールと有効化
まず、SeedProd Proプラグインを入手して有効化します。方法がわからない場合は、WordPressプラグインのインストール方法に関するこの記事をご覧ください。次に、WordPressダッシュボードのSeedProd » Settingsに移動して、Proバージョンを有効化します。
次に、SeedProdのランディングページダッシュボードの概要を確認するために、SeedProd » Pagesに移動します。ここで、SeedProdを使用して作成できるさまざまな種類のランディングページを確認できます。
Keep in mind that these are all special pages with pre-built functionality and design templates. For a landing page, you don’t want to use ANY of these special landing pages. Instead, you’re going to create a custom landing page.
さらに下にスクロールして、新しいランディングページを追加ボタンをクリックして開始してください。
Step #2: Create a New Landing Page for Push Button Notifications
新しいランディングページを追加ボタンをクリックすると、SeedProdのランディングページテンプレートライブラリが表示されます。これらは、完全にレスポンシブな、専門的にデザインされたランディングページテンプレートです。
Next, you can select one of these templates to help you get started.
Remember, the template is just a starting point. you can customize everything about the page later on. For now, find a template that you think will fit. When the templates page opens, you can click Squeeze Page to filter the list:
For this guide, we’ll select the Investment Squeeze Page.
A squeeze page has only one objective. It’s to “squeeze” you just enough to get your email address. Know anyone in the investment and personal finance space? Yeah, they can squeeze for sure!
Go ahead and click on it now.
Next, we’re going to customize the landing page.
ステップ #3: ランディングページのデザインをカスタマイズする
SeedProdのビジュアルビルダーを使用すると、ドラッグアンドドロップのコンテンツブロックを使用してランディングページをカスタマイズできます。
You can create a fully customized header for your landing page in a matter of minutes. You can even add custom elements to convince and convert your traffic. For instance, you can create a video module and embed a YouTube video to convince your visitors to buy your product or service.
It’s also super easy to add a section with a brief description of your product or service . Head over to the Sections tab in the visual builder and under the Hero section, you’ll find several pre-built templates that you can import with a single click.
Go ahead and select one that you like.
Don’t worry about the colors or the content. You can edit all of it. What you should look for is a layout that goes well with your template.
You can customize the hero section the same way we did earlier by choosing a different image and changing the headline and description. While you’re at it, add a call-to-action button that nudges visitors to buy from you.
次に、セクションタブから、お客様の声の見出しを選択し、好きなデザインを選びます。そして、あっという間に、ランディングページにお客様の声セクションができます。
とても簡単です！
Step #4: Add a Push Button Notifications to Your Landing Page
プッシュ通知購読者を収集するために、クリックして購読ボタンを追加することもできます。プッシュ通知は、リピートトラフィックを増やし、エンゲージメントを高め、公式グッズがあれば販売するためにも役立ちます。
SeedProdでは、サイドバーからカスタムHTMLモジュールをドラッグアンドドロップするだけです。
最初の折り目のメールサインアップフォームのすぐ下に、購読ボタンを配置しました。
しかし、ボタンは好きな場所に挿入できます。
For this part, you need some experience with HTML and CSS. Or, you can copy this code and paste it into your Custom HTML block:
<button onclick="subscribeOnClickButton()" style="border: none; padding-left: 5%; padding-right:5%; text-align: center; display: inline-block; color: blue;">Get Updates via Push Notifications</button>That’s a standard button in HTML with very little styling. The only fancy bit is the onclick function in the code. It basically means that your visitors can click on the button to subscribe to something. Now, we need to give the button some extra code to allow your visitors to subscribe to push notifications.
PushEngageのホームページにアクセスし、開始するボタンをクリックします。
PushEngage は世界No.1のプッシュ通知プラグインです。
プッシュ通知は、ウェブサイトのトラフィックとエンゲージメントを自動で増やすのに役立ちます。オンラインストアを運営している場合は、PushEngageが自動eコマースプッシュ通知の作成を支援することで、売上を伸ばすのにも役立ちます。
無料で開始できますが、ビジネスの成長に真剣に取り組んでいる場合は、有料プランを購入する必要があります。また、プッシュ通知サービスを購入する前に、プッシュ通知のコストに関するこのガイドを確認してください。
PushEngageで得られるものを簡単に見てみましょう。
- コンバージョン率の高い自動キャンペーン
- 複数のターゲティングおよびキャンペーンスケジュールオプション
- 目標追跡と高度な分析
- スマートA/Bテスト
- プッシュキャンペーンテンプレート
- 強力なセグメンテーションオプション
- 専任のサクセスマネージャー
ビジネスのトラフィック、エンゲージメント、売上を伸ばしたいのであれば、PushEngageが断然最良の選択肢であることがわかるでしょう。予算が限られている場合は、プッシュ通知で少しクリエイティブになることもできます。
注意: WordPressサイトを実行している場合は、 PushEngage WordPressプラグインをインストールして有効化する必要があります。
次に、PushEngage を試すために無料プランを選択するか、ビジネスの成長に真剣に取り組んでいる場合は有料プランを選択します。有料プランには、より多くのキャンペーンオプションと、さらに大きな購読者リストを構築する機能が付属しています。
あなたのPushEngageダッシュボードで、サイト設定 »サイト詳細に移動し、セットアップ手順を表示するにはここをクリックボタンをクリックします。「任意のサイト」の下に、インストールコードが表示されます。
警告：ダッシュボードから取得したコードをコピーする必要があります。コードはPushEngageユーザーごとに固有です。画像内のコードをコピーしてプッシュ通知購読者を収集することはできません。
PushEngage ダッシュボードでコードを取得したら、このスニペットをコードに追加します。
<script> window._peq = window._peq || [];</script> <script>
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
if(res.statuscode==1)
{
// Code to return response
console.log(res);
}
}]);
}
</script>最終的なコードは次のようになります。
<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];</script> <script>
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
if(res.statuscode==1)
{
// Code to return response
console.log(res);
}
}]);
}
</script>You’ll want to add this code to the HTML block in your landing page after the code for the button. It should look something like this:
Feel free to customize the styles for the button any way you please. When you’re done customizing your landing page, go ahead and hit the Save button.
Step #4: Configure Your Page Settings
After you’re done designing your landing page, click the Connect tab at the top of your page builder, and select your email marketing provider to collect leads on your site.
次に、画面上部にある「ページ設定」タブをクリックします。
ここで、ランディングページにSEOプラグインとGoogle Analyticsプラグインを追加できます。広告パフォーマンスを追跡するために、FacebookピクセルやPinterestピクセルなどのカスタムトラッキングコードを設定することもできます。
Step #5: Publish Your Landing Page in WordPress
Now let’s go ahead and publish your design. To do this, click the dropdown arrow next to the save button and click Publish.
You can then click the See Live Page button to see how it looks.
Congratulations! You just published your very first landing page.
What to do After You Add Push Button Notifications to Your Site
Now that your landng page is live, it’s time to work on your traffic, engagement, and sales. You should try using push notifications on your site. Push notifications are a great marketing tool that can help you grow your business.
これらの素晴らしいリソースをご覧ください。きっと意味がわかるはずです。
プッシュ通知キャンペーンを作成するためにPushEngageの使用をお勧めします。PushEngageは世界No.1のプッシュ通知ソフトウェアです。まだお済みでない場合は、 今すぐPushEngageを使い始めましょう！
