Are you just getting started with optimizing your push notification campaigns? The first place to start is your push notification popup.
A push notification popup is a simple popup that encourages your website visitors to opt for your push notifications. But not all popups are the same. In fact, you can get a lot of extra signups just based on the type of popup you choose along with some basic design optimizations.
We’ve spent a lot of time analyzing best practices for push notifications. So, in this article, we’ll show you how you can style your push notification popups for both mobile and desktop.
And the best part? Your popups are going to be conversion optimized from day one!
よさそうですね？さあ、始めましょう。
What is a Push Notification Popup Modal?
プッシュ通知ポップアップモーダルとは、ウェブサイト訪問者にメッセージや通知を表示するために、ウェブサイトまたはモバイルアプリのインターフェイスの上に表示される小さなウィンドウのことです。
The popup modal can be triggered by various events. You can set up popups to get triggered on page visit, on scroll depth, and even on custom actions such as button click. Usually, you’ll see a call to action on the popup modal such as “Subscribe” or “Allow” to get consent from visitors to send them push notifications.
登録者を直接セグメント化できるポップアップモーダルを作成したり、ジオロケーションやブラウザなどのデフォルト属性で登録者を収集するだけの通常のポップアップを作成したりできます。
Push notification popup modals are used to engage with website visitors. But you need to make them as non-intrusive as possible so that you don’t annoy your visitors.
Types of Push Notification Optins
There are two basic types of push notification optin:
- Single Step Optin: Users can subscribe to push notification in a single click. It doesn’t allow any customization and uses only system default styles.
- Two-Step Optin: For two-step optins, the user has to click twice to subscribe. but the upside is that you can customize everything from design to copy.
But you should know that there’s a bunch of different optin subcategories.
Mainly, we’ll see a bunch of variants in two-step optins as single-step optins aren’t really customizable.
You can choose to use a Safari-style optin:
A Large Safari Style Box optin:
A Bell-placed bar optin:
A Large Safari Box with Segments:
A Floating Bar optin:
Or the simple Single Step optin:
If you’re not sure which one you should go for, keep reading. We’ll talk about some of the customizable features for each optin type later in this article.
The cool part is…
You can customize whatever push notification optin you choose for your site directly from your PushEngage dashboard.
And if you’re feeling fancy, you can even change the placement of the optin popup. Everything about the optin is completely customizable including the color of the text or background both for desktop and mobile.
Another important element in subscription optin is the Notification Overlay.
An overlay gives you additional space to explain the benefits of subscribing to your push notifications. For a single-step optin, your Notification Overlay becomes very crucial because you can’t edit the optin copy.
How to Optimize Your Push Notification Optin
In your PushEngage dashboard, head over to Design » Popup Modals and select a type of subscription optin to customize:
The coolest part is that you can use multiple push notification popup modals at the same time.
Now, you can run multiple optins and test which one works better for your site without having to switch between them.
We’re going to talk about what’s different in each optin when we get styling each push notification optin. If you’re completely new to push notification optins, we recommend reading the entire article and deciding what kind of optin is right for your site.
But if you’re already familiar with different types of push notification optins, you should jump to the kind of optin that you want to style:
- How to Customize a Safari Style Push Notification Optin
- 大型Safariスタイルボックスオプトインのカスタマイズ方法
- 配置されたベルバーのカスタマイズ方法
- セグメント付き大型Safariスタイルのカスタマイズ方法
- フローティングバープッシュ通知オプトインのカスタマイズ方法
- シングルステッププッシュ通知オプトインのカスタマイズ方法
各オプトインタイプとそのカスタマイズ方法を見ていきましょう。
Safariスタイルプッシュ通知オプトインのカスタマイズ方法
まず、デスクトップ向けのSafariスタイルプッシュ通知オプトインのカスタマイズから始めましょう。Safariスタイルオプトインとは、標準のSafariポップアップのように見えるポップアップです。ただし、Safariスタイルのプッシュ通知オプトインを作成した場合、サイト訪問者はどのブラウザを使用していてもSafariスタイルが表示されます。そして、デバイスで実行されているオペレーティングシステムとは関係ありません。
したがって、Appleのエコシステムに限定されるわけではありません。スタイルは、購読者がどのブラウザやオペレーティングシステムを使用していても引き継がれます。
最初に知っておくべき機能は、オプトインの画面上の配置です。ウェブサイト上のどこにオプトインを表示したいか、またはドロップダウンで提供されるオプションからオプトインの配置を決定できます。
スタイルのカスタマイズ
「ポップアップの編集」をクリックし、「ポップアップデザイン」タブの下でオプトインをデザインしてください。
ここで、ポップアップモーダルのすべての要素をカスタマイズできます。独自のポップアップメッセージを作成し、ボタンのラベルをカスタマイズします。次に、ブランドカラーを「背景色」とボタンの色に使用します。
プレビューをチェックして、ポップアップが異なる位置でどのように見えるかを確認することもできます。3つの位置から選択できます。
- 左上
- 右上
- 中央上
ライブウェブサイトをチェックして、何が最適かを確認し、配置を選択してください。
下にスクロールして「オプトインサブスクリプションルールを有効にする」に進み、プッシュ通知オプトインを表示したいタイミングを設定できます。
「サブスクリプションオーバーレイ」と「法的同意通知」を作成することもできます。
完了したら、「保存して表示オプションを選択」ボタンをクリックします。そこで、ターゲットページに訪問者が着陸してから遅延を作成することで、オプトインが表示されるタイミングを設定できます。
完了したら、「保存してポップアップを有効にする」をクリックするだけです。完了すると、このようになります。
大型Safariスタイルボックスオプトインのカスタマイズ方法
大型Safariスタイルのボックスが、モバイルとデスクトップの両方でページのセンターに表示されます。これは2段階のオプトインなので、この種のオプトインについても多くのカスタマイズが可能です。
スタイルのカスタマイズ
大型Safariスタイルオプトインでカスタマイズできることに入る前に、カスタマイズできないことを見てみましょう。このサイズのオプトインでは、配置オプションは1つしかありません。
しかし、通常のSafariスタイルオプトインと同様に、以下をカスタマイズできます。
- 背景色
- 許可ボタンの色
- ブロックボタンの色
また、ライブエディタを使用してテキストとフォントオプションをカスタマイズすることもできます。その他のカスタマイズオプションは、オプトイン表示設定と中間ページを含め、通常のSafariオプトインとまったく同じです。
配置されたベルバーのカスタマイズ方法
ページの下部右側または左側に、モバイルとデスクトップの両方でベル付きバーが表示されます。これはカスタマイズ可能な2段階オプトインで、大きなサファリ風オプトインボックスと同じカスタマイズオプションを備えています。そして、その名前の通りです。通知ベルが付いたバーで、ウェブ訪問者は購読するためにクリックする必要があります。
ベル付きバーオプトインのカスタマイズ
前述の通り、このオプトインは下部右側にのみ配置できます。
または、モバイルとデスクトップの両方でページの左下に配置できます。
その意味では、大きなサファリ風ボックスとはわずかに異なります。スタイルに関しては、ベルの色とベル付きバーの背景色を変更できます。
残りの設定は、サファリ風オプションとまったく同じです。
セグメント付き大型Safariスタイルのカスタマイズ方法
セグメント付きの大きなサファリ風ボックスは、まさにその名前の通りです。これは、購読者を自動的にセグメント化するオプションを備えた、大きなサファリ風オプトインです。
プッシュ通知購読者のセグメントを作成することで、キャンペーンを大幅にパーソナライズできます。多様なコンテンツを持つウェブサイトやブログがあり、すでに最もトラフィックの多いソースを知っている場合は、セグメント付きの大きなサファリ風ボックスを使用してみてください。
このタイプのオプトインは、ユーザーがどのような通知を受信したいかを決定するため、ユーザー主導型です。
セグメントを作成したら、デザイン » ポップアップモーダルに移動し、新しいセグメント付きの大きなサファリ風オプトインを作成します。
「ポップアップの編集」をクリックし、「ポップアップデザイン」タブの下でオプトインをデザインしてください。
ここでは、コピーからブランドカラーをオプトインに反映させるまで、オプトインに関するほぼすべてのものをカスタマイズできます。デスクトップでのセグメントオプションフィールドで、訪問者に購読してほしいセグメントを選択できます。
このオプトインの優れた点は、同じ購読者がポップアップから直接複数のセグメントを購読できることです。
下にスクロールして「オプトインサブスクリプションルールを有効にする」に進み、プッシュ通知オプトインを表示したいタイミングを設定できます。
「サブスクリプションオーバーレイ」と「法的同意通知」を作成することもできます。
完了したら、「保存して表示オプションを選択」ボタンをクリックします。そこで、ターゲットページに訪問者が着陸してから遅延を作成することで、オプトインが表示されるタイミングを設定できます。
完了したら、保存してポップアップを有効にするをクリックします。
フローティングバープッシュ通知オプトインのカスタマイズ方法
フローティングバーオプトインは、モバイルとデスクトップの両方で、ページの下部または上部に表示されます。これも中間ページを伴う2段階オプトインです。そのため、多くのカスタマイズが可能です。
フローティングバーのスタイリング方法
フローティングバーオプトインは、ベル付きバーオプトインと非常によく似ています。そのため、スタイリングオプションもかなり似ています。主な違いは、他の2段階オプトインと同様に、オプトインコピーとボタンが得られることです。
画面の下部に配置できます。
または画面の上部に配置できます。
その後、他のオプトインと同様の方法で、残りのオプトインをカスタマイズできます。これには、背景色、ボタンの色、オプトイン全体のテキスト、中間ページ、および表示オプションが含まれます。
シングルステッププッシュ通知オプトインのカスタマイズ方法
簡単な答え：できません。
単一ステップのプッシュ通知オプトインは、システムデフォルトを使用してポップアップを作成するため、カスタマイズできません。カスタマイズできるのは、オプトインに付属するベルアイコンです。
単一ステップ通知のベルを右下に配置できます。
または左下に配置できます。
ベルの色とベルアイコンのホバーテキストを変更することもできます。
下にスクロールして「オプトインサブスクリプションルールを有効にする」に進み、プッシュ通知オプトインを表示したいタイミングを設定できます。
「サブスクリプションオーバーレイ」と「法的同意通知」を作成することもできます。
これはすべてデスクトップバージョンのみであることに注意してください。モバイルバージョンにはシステムデフォルトしかなく、配置を変更することもできません。
シングルステッププッシュ通知オプションのモバイル版は次のようになります。
オプトイン設定では、オプトインが表示されるまでの遅延を設定できます。また、プッシュ通知を拒否したユーザーを記憶するためのCookie期間を変更することもできます。
そして、シングルステップオプションでできることは以上です。購読率を向上させるために、まずはシングルステップオプションから始めることをお勧めします。
プッシュ通知を始めたばかりの場合は、ビジネスにとってリストの構築が最優先事項となります。時間とともに、よりカスタマイズ性の高いツーステップオプションに切り替えることができます。
What to do After Setting Up a Push Notification Popup Modal
Once you’re done customizing one push notification popup modal, go ahead and create more. You can create as many popup modals as you like using PushEngage. As you saw, you can customize when to show each popup modal. So, you can use multiple popups to retarget your visitors.
You can also create different popup modals for different pages. Customizing the push notification popups on your site can help you convert your traffic into push subscribers and genuine business leads on autopilot.
まだ納得できませんか？これらのリソースを確認してください。
プッシュ通知キャンペーンの作成にはPushEngageの使用をお勧めします。PushEngageは世界No.1のプッシュ通知ソフトウェアです。まだお済みでない場合は、今すぐPushEngageを使い始めましょう！
