概要
Webプッシュ通知は、ユーザーがWebサイトを積極的に閲覧していないときに再エンゲージし、重要な情報を配信する強力な方法です。テキスト、画像、アクションボタンを含むリッチコンテンツをサポートし、ユーザーの定着率とエンゲージメントの向上に役立ちます。
Webプッシュ通知は、ユーザーがサイトにいないときでもリーチできます
- HTTPSウェブサイト：Webプッシュは、有効なSSL証明書を持つセキュアなサイトでのみ機能します
- 単一ドメインオリジン：同一オリジンポリシーに従う必要があります
- ユーザー権限：ユーザーは通知を受信するために明示的に権限を付与する必要があります
- サポートされているブラウザー：ほとんどの最新ブラウザー（Chrome、Firefox、Safari、Edge）で動作します
- ユーザーはシークレットまたはプライベートブラウジングモードではサブスクライブできません
- iOSデバイスには追加のセットアップが必要です（iOS用Webプッシュを参照）
- 一部のブラウザーには通知制限があるか、ユーザーの操作が必要な場合があります。WebプッシュFAQを参照してください
Webプッシュ開発者ガイド
Webプッシュ通知を送信する前に、開発者は次の手順を完了する必要があります。開発者ではありませんか？ チームメンバーの管理を参照して、OneSignalプロジェクトへの開発者アクセス権を持つチームメイトを招待してください。
Web SDKセットアップ
ローカルホストテストと権限プロンプトを含む、OneSignal Web SDKのインストールと構成に関する完全なガイド。
WordPressプラグイン
公式プラグインを使用してWordPressにプッシュ通知をすばやく統合します。コーディングは不要です。
iOS Webプッシュセットアップ
iOS 16.4+を実行しているiPhoneとiPadでWebプッシュを有効にするためのApple固有の手順に従ってください。
別のプロバイダーからの移行
別のWebプッシュプロバイダーから移行し、サブスクライバーを維持する方法を学びます。
構成オプション
OneSignalダッシュボードのSettings > Push & In-App > WebでWebサイトをWebプッシュ用に設定します。
OneSignal設定でWebプラットフォームをアクティブ化
Webサイトのセットアップに基づいて統合タイプを選択
通常のサイト
推奨 - ダッシュボードでプロンプト、ウェルカム通知、サービスワーカーのセットアップを直接構成します。バックエンドコーディングは不要です。
WordPress
公式OneSignalプラグインを使用して、完全なUIベースの構成でWordPressサイトにプッシュを簡単にセットアップします。
カスタムコード
コードですべてをカスタマイズしたい開発者向けの完全制御セットアップ。
- サイト名：デフォルトの通知タイトルで使用されます
- サイトURL：ドメインオリジンと完全に一致する必要があります（パスや
wwwの不一致はありません） - 自動再サブスクライブ：推奨 - ブラウザーデータをクリアした再訪問ユーザーを自動的に再サブスクライブします
- デフォルトアイコンURL：通知に表示される
256x256pxの画像（設定されていない場合、デフォルトのベルアイコンが使用されます）
自動再サブスクライブ
Webプッシュの重要な概念として、ユーザーがブラウザーデータをクリアすると、プッシュ通知の受信が停止します。このオプションを有効にすると、ユーザーがサイトに戻ったときに自動的に再サブスクライブされます。詳細については、サブスクリプションを参照してください。
OneSignalダッシュボードのWeb設定
Web権限プロンプト
通知権限のプロンプトは、オプトインにとって重要です。セットアップに基づいて、権限リクエストの動作と外観をカスタマイズできます。 ベストプラクティス：- 利点を説明する明確なメッセージを使用する
- 適切なタイミングでユーザーにプロンプトを表示する（例：エンゲージメント後）
- ネイティブブラウザーダイアログをトリガーする前にプレプロンプトを使用する
Web権限プロンプト
さまざまなプロンプトタイプ（スライドダウン、カテゴリベース、ネイティブ、サブスクリプションベルなど）を比較し、それぞれをいつ使用するかを学びます。
Web SDKリファレンス
SDKを使用してプロンプトをいつどのように表示するかをプログラムで制御する方法を学びます。
ウェルカム通知
ユーザーがサブスクライブした直後に送信されるオプションの確認プッシュを有効にできます。 通常のセットアップとWordPress統合では、ダッシュボードでこれを設定できます。
ウェルカム通知はサブスクリプションの成功を確認し、価値を示します
OneSignal.init関数のwelcomeNotificationオブジェクトを使用します。詳細については、Web SDKリファレンスを参照してください。
ウェルカム通知を送信する理由：
- ユーザーにサブスクリプションが成功したことを知らせる
- 今後の通知がどのように表示されるかを示す
- オンボーディングコンテンツまたは次のステップを提供する
ユーザーとサブスクリプションの理解
ユーザーがプッシュにサブスクライブすると、OneSignalは自動的にブラウザー/デバイスに関連付けられた一意のサブスクリプションを作成します。 Webプッシュサブスクリプションは、次の場合に作成されます：- 特定のブラウザーとデバイスを使用して、Webサイトでプッシュ通知の権限を付与する
- ブラウザーデータをクリアした後にサイトに戻る（自動再サブスクライブが有効な場合）
- 新しいブラウザーまたはデバイスからサブスクライブする
- ブラウザー/デバイスの組み合わせごとに個別のサブスクリプションが作成されます
- シークレット/プライベートブラウジングモードではサブスクリプションを作成できません
- WebプッシュサブスクリプションはExternal IDを割り当てるまで匿名のままです
OneSignalダッシュボード：Audience > Users
ユーザー
ユーザーの管理、External IDの割り当て、アクティビティの追跡方法を学びます。
サブスクリプション
ブラウザーとデバイス間でサブスクリプションがどのように機能するかを理解します。
セグメント
行動、デバイスなどに基づいてターゲティングするためにユーザーをセグメントにグループ化します。
iOSサポート
Appleは、iOS 16.4+を実行しているiPhoneとiPad向けにWebプッシュのサポートを追加しましたが、より厳しい要件があります：- ユーザーはサイトをホーム画面に追加する必要があります
- 権限プロンプトはそのステップの後にのみ表示されます
- 有効にすると、通知はネイティブアプリのアラートのように動作します
iOS用Webプッシュ
サービスワーカーとマニフェストのセットアップを含む、iOSサポートを有効にするためのステップバイステップの手順。
オーディエンスにホーム画面への追加を促す
iOS Webプッシュを受信できるようにサイトをインストールするようユーザーを促すためのヒント。
Webプッシュ通知のデザイン
優れたプッシュ通知を作成するには、テキストを書くだけでは不十分です。デザインも重要です。カスタマイズ可能な要素とその効果的な使用方法を学びましょう。
Webプッシュ通知の構造 - 要素1〜6はカスタマイズ可能、7〜9はブラウザーによって制御されます
- タイトル：注目を集める見出し（推奨：
50文字未満） - メッセージ：メインの通知コンテンツ（推奨：
120文字未満） - アイコン：ブランドアイコンまたは通知固有の画像（推奨：
256x256pxPNGまたはJPG） - 大きな画像：目を引くビジュアルコンテンツ
- アクションボタン：コールトゥアクションボタン
- ブラウザー：プッシュを表示するブラウザー/アプリ
- ドメイン：ブラウザーによって自動的に設定されるサイトのオリジン
- タイムスタンプと閉じる：ブラウザーがこれらのコントロールを追加します
- その他のオプション：ブラウザー固有の追加コントロール
メッセージのパーソナライゼーションとローカライゼーション
各ユーザーの設定と言語に合わせてプッシュメッセージをカスタマイズできます。Webプッシュの動作を構成
プッシュメッセージが送信された後の動作（表示されるタイミング、保存期間、ユーザーとの対話方法）を制御します。配信、表示、閉じる設定
スロットリング
通知配信速度を制御します。
頻度制限
同じユーザーへの通知の過剰送信を防ぐ制限を設定します。
Time To Live（TTL）
デバイスがオフラインのときにプッシュサービスがメッセージを保持する期間を定義します。
Webプッシュトピック
トピックを使用して、重複する通知をグループ化、置換、または抑制します。
クリック動作
ユーザーが通知をクリックしたときに何が起こるかを制御します。 デフォルト： クリックするとホームページが開きます。 カスタマイズ：- ユーザーを特定のURLに誘導する
- UTMトラッキングを使用する
?_osp=do_not_openでデフォルトの動作を抑制する
URL、リンク、ディープリンク
ディープリンクとトラッキングを使用して、ユーザーを関連するコンテンツまたはページにルーティングします。
アクションボタン
ユーザーが通知から即座にアクションを実行できるようにします。
SDKプッシュ通知イベントリスナー
クリックイベントをリッスンし、カスタムコードでアプリ内動作をトリガーします。
セットアップのテスト
起動前に、デバイスとブラウザー全体でWebプッシュ実装を徹底的にテストします。起動前チェックリスト
- SDKがエラーなしで正しく読み込まれている
- 権限プロンプトが表示され機能する
- テスト通知が送信され受信される
- アイコンと画像が正しくレンダリングされる
- サービスワーカーが更新されている
- HTTPS証明書が有効である
プッシュ分析とトラブルシューティング
通知のパフォーマンスを測定し改善します：プッシュメッセージレポート
各メッセージの配信、開封率、クリックスルーメトリクスを表示します。
分析の概要
チャネル全体のエンゲージメントとユーザー行動メトリクスを探索します。
通知が表示されない、または遅延する
メッセージが表示されない場合のトラブルシューティングチェックリスト。
通知画像が表示されない
さまざまなブラウザーでの画像レンダリングの問題を修正します。