プッシュ通知のオプトインをスタイリングするのに最適な方法をお探しですか？
プッシュ通知は、リピートトラフィック、エンゲージメント、売上を向上させるための優れたツールです。そのため、オプトイン率を可能な限り高めたいと思うでしょう。
この記事では、モバイルとデスクトップの両方でプッシュ通知のオプトインをスタイリングする方法を紹介します。
さあ、始めましょう。
プッシュ通知オプトインの種類
プッシュ通知オプトインには、主に2つの基本的なタイプがあります。
- シングルステップオプトイン：ユーザーはワンクリックでプッシュ通知を購読できます。カスタマイズは一切できず、システムデフォルトのスタイルのみを使用します。
- 2ステップオプトイン：2ステップオプトインの場合、ユーザーは購読するために2回クリックする必要があります。しかし、利点はデザインからコピーまで、すべてをカスタマイズできることです。
しかし、オプトインのサブカテゴリが多数あることを知っておくべきです。
主に、シングルステップオプトインはあまりカスタマイズできないため、2ステップオプトインのバリエーションが多く見られます。
Safariスタイルのオプトインを使用することを選択できます：
大きなSafariスタイルのボックスオプトイン：
ベル配置バーオプトイン：
セグメント付きの大きなSafariボックス：
フローティングバーオプトイン：
またはシンプルなシングルステップオプトイン：
どちらを選ぶべきか確信がない場合は、読み続けてください。この記事の後半で、各オプトインタイプのカスタマイズ可能な機能について説明します。
クールな点は…
選択したプッシュ通知オプトインは、PushEngageダッシュボードから直接、サイト用にカスタマイズできます。
さらに、おしゃれにしたい場合は、オプトインの配置ポップアップを変更することもできます。オプトインに関するすべて（デスクトップとモバイルの両方のテキストまたは背景の色を含む）は完全にカスタマイズ可能です。
サブスクリプションオプトインのもう1つの重要な要素は、通知オーバーレイです。
オーバーレイは、プッシュ通知の購読の利点を説明するための追加スペースを提供します。シングルステップオプトインの場合、オプトインコピーを編集できないため、通知オーバーレイが非常に重要になります。
プッシュ通知オプトインのスタイリング方法
PushEngageダッシュボードで、デザイン » ポップアップモーダルに移動し、カスタマイズするサブスクリプションオプトインのタイプを選択してください。
最もクールな点は、複数のプッシュ通知ポップアップモーダルを同時に使用できることです。
これで、複数のオプトインを実行し、切り替えることなくサイトに最適なものをテストできます。
プッシュ通知オプトインのスタイリングを行う際に、各オプトインの違いについて説明します。プッシュ通知オプトインが完全に初めての場合は、記事全体を読んで、サイトに適したオプトインの種類を決定することをお勧めします。
しかし、さまざまな種類のプッシュ通知オプトインにすでに慣れている場合は、スタイリングしたいオプトインの種類にジャンプしてください。
- Safariスタイルのプッシュ通知オプトインをカスタマイズする方法
- 大型Safariスタイルボックスオプトインのカスタマイズ方法
- 配置されたベルバーのカスタマイズ方法
- セグメント付き大型Safariスタイルのカスタマイズ方法
- フローティングバープッシュ通知オプトインのカスタマイズ方法
- シングルステッププッシュ通知オプトインのカスタマイズ方法
各オプトインタイプとそのカスタマイズ方法を見ていきましょう。
Safariスタイルプッシュ通知オプトインのカスタマイズ方法
まず、デスクトップ向けのSafariスタイルプッシュ通知オプトインのカスタマイズから始めましょう。Safariスタイルオプトインとは、標準のSafariポップアップのように見えるポップアップです。ただし、Safariスタイルのプッシュ通知オプトインを作成した場合、サイト訪問者はどのブラウザを使用していてもSafariスタイルが表示されます。そして、デバイスで実行されているオペレーティングシステムとは関係ありません。
したがって、Appleのエコシステムに限定されるわけではありません。スタイルは、購読者がどのブラウザやオペレーティングシステムを使用していても引き継がれます。
最初に知っておくべき機能は、オプトインの画面上の配置です。ウェブサイト上のどこにオプトインを表示したいか、またはドロップダウンで提供されるオプションからオプトインの配置を決定できます。
スタイルのカスタマイズ
「ポップアップの編集」をクリックし、「ポップアップデザイン」タブの下でオプトインをデザインしてください。
ここで、ポップアップモーダルのすべての要素をカスタマイズできます。独自のポップアップメッセージを作成し、ボタンのラベルをカスタマイズします。次に、ブランドカラーを「背景色」とボタンの色に使用します。
プレビューをチェックして、ポップアップが異なる位置でどのように見えるかを確認することもできます。3つの位置から選択できます。
- 左上
- 右上
- 中央上
ライブウェブサイトをチェックして、何が最適かを確認し、配置を選択してください。
下にスクロールして「オプトインサブスクリプションルールを有効にする」に進み、プッシュ通知オプトインを表示したいタイミングを設定できます。
「サブスクリプションオーバーレイ」と「法的同意通知」を作成することもできます。
完了したら、「保存して表示オプションを選択」ボタンをクリックします。そこで、ターゲットページに訪問者が着陸してから遅延を作成することで、オプトインが表示されるタイミングを設定できます。
完了したら、「保存してポップアップを有効にする」をクリックするだけです。完了すると、このようになります。
大型Safariスタイルボックスオプトインのカスタマイズ方法
大型Safariスタイルのボックスが、モバイルとデスクトップの両方でページのセンターに表示されます。これは2段階のオプトインなので、この種のオプトインについても多くのカスタマイズが可能です。
スタイルのカスタマイズ
大型Safariスタイルオプトインでカスタマイズできることに入る前に、カスタマイズできないことを見てみましょう。このサイズのオプトインでは、配置オプションは1つしかありません。
しかし、通常のSafariスタイルオプトインと同様に、以下をカスタマイズできます。
- 背景色
- 許可ボタンの色
- ブロックボタンの色
また、ライブエディタを使用してテキストとフォントオプションをカスタマイズすることもできます。その他のカスタマイズオプションは、オプトイン表示設定と中間ページを含め、通常のSafariオプトインとまったく同じです。
配置されたベルバーのカスタマイズ方法
ページの下部右側または左側に、モバイルとデスクトップの両方でベル付きバーが表示されます。これはカスタマイズ可能な2段階オプトインで、大きなサファリ風オプトインボックスと同じカスタマイズオプションを備えています。そして、その名前の通りです。通知ベルが付いたバーで、ウェブ訪問者は購読するためにクリックする必要があります。
ベル付きバーオプトインのカスタマイズ
前述の通り、このオプトインは下部右側にのみ配置できます。
または、モバイルとデスクトップの両方でページの左下に配置できます。
その意味では、大きなサファリ風ボックスとはわずかに異なります。スタイルに関しては、ベルの色とベル付きバーの背景色を変更できます。
残りの設定は、サファリ風オプションとまったく同じです。
セグメント付き大型Safariスタイルのカスタマイズ方法
セグメント付きの大きなサファリ風ボックスは、まさにその名前の通りです。これは、購読者を自動的にセグメント化するオプションを備えた、大きなサファリ風オプトインです。
プッシュ通知購読者のセグメントを作成することで、キャンペーンを大幅にパーソナライズできます。多様なコンテンツを持つウェブサイトやブログがあり、すでに最もトラフィックの多いソースを知っている場合は、セグメント付きの大きなサファリ風ボックスを使用してみてください。
このタイプのオプトインは、ユーザーがどのような通知を受信したいかを決定するため、ユーザー主導型です。
セグメントを作成したら、デザイン » ポップアップモーダルに移動し、新しいセグメント付きの大きなサファリ風オプトインを作成します。
「ポップアップの編集」をクリックし、「ポップアップデザイン」タブの下でオプトインをデザインしてください。
ここでは、コピーからブランドカラーをオプトインに反映させるまで、オプトインに関するほぼすべてのものをカスタマイズできます。デスクトップでのセグメントオプションフィールドで、訪問者に購読してほしいセグメントを選択できます。
このオプトインの優れた点は、同じ購読者がポップアップから直接複数のセグメントを購読できることです。
下にスクロールして「オプトインサブスクリプションルールを有効にする」に進み、プッシュ通知オプトインを表示したいタイミングを設定できます。
「サブスクリプションオーバーレイ」と「法的同意通知」を作成することもできます。
完了したら、「保存して表示オプションを選択」ボタンをクリックします。そこで、ターゲットページに訪問者が着陸してから遅延を作成することで、オプトインが表示されるタイミングを設定できます。
完了したら、保存してポップアップを有効にするをクリックします。
フローティングバープッシュ通知オプトインのカスタマイズ方法
フローティングバーオプトインは、モバイルとデスクトップの両方で、ページの下部または上部に表示されます。これも中間ページを伴う2段階オプトインです。そのため、多くのカスタマイズが可能です。
フローティングバーのスタイリング方法
フローティングバーオプトインは、ベル付きバーオプトインと非常によく似ています。そのため、スタイリングオプションもかなり似ています。主な違いは、他の2段階オプトインと同様に、オプトインコピーとボタンが得られることです。
画面の下部に配置できます。
または画面の上部に配置できます。
その後、他のオプトインと同様の方法で、残りのオプトインをカスタマイズできます。これには、背景色、ボタンの色、オプトイン全体のテキスト、中間ページ、および表示オプションが含まれます。
シングルステッププッシュ通知オプトインのカスタマイズ方法
簡単な答え：できません。
単一ステップのプッシュ通知オプトインは、システムデフォルトを使用してポップアップを作成するため、カスタマイズできません。カスタマイズできるのは、オプトインに付属するベルアイコンです。
単一ステップ通知のベルを右下に配置できます。
または左下に配置できます。
ベルの色とベルアイコンのホバーテキストを変更することもできます。
下にスクロールして「オプトインサブスクリプションルールを有効にする」に進み、プッシュ通知オプトインを表示したいタイミングを設定できます。
「サブスクリプションオーバーレイ」と「法的同意通知」を作成することもできます。
これはすべてデスクトップバージョンのみであることに注意してください。モバイルバージョンにはシステムデフォルトしかなく、配置を変更することもできません。
シングルステッププッシュ通知オプションのモバイル版は次のようになります。
オプトイン設定では、オプトインが表示されるまでの遅延を設定できます。また、プッシュ通知を拒否したユーザーを記憶するためのCookie期間を変更することもできます。
そして、シングルステップオプションでできることは以上です。購読率を向上させるために、まずはシングルステップオプションから始めることをお勧めします。
プッシュ通知を始めたばかりの場合は、ビジネスにとってリストの構築が最優先事項となります。時間とともに、よりカスタマイズ性の高いツーステップオプションに切り替えることができます。
ポップアップモーダルをスタイリングしたら次にやること
プッシュ通知ポップアップモーダルのカスタマイズが完了したら、さらに作成を進めてください。PushEngageを使用すると、好きなだけポップアップモーダルを作成できます。
サイト上のプッシュ通知オプトインをカスタマイズすることで、トラフィックをプッシュ購読者や本物のビジネスリードに自動的に変換することができます。
まだ納得できませんか？これらのリソースを確認してください。
プッシュ通知キャンペーンの作成にはPushEngageの使用をお勧めします。PushEngageは世界No.1のプッシュ通知ソフトウェアです。まだお済みでない場合は、今すぐPushEngageを使い始めましょう！
