Webプッシュ通知を有効にする

Optimizely Data Platform (ODP) を使用すると、Web およびモバイルの顧客が現在サイトにアクセスしていなくても、リアルタイムのメッセージをプッシュできます。 

デスクトップの例:

Web_Push_-_Desktop.png

モバイルの例:

Web_Push_-_Mobile.png

前提条件

• HTTPS – Web ブラウザでは、顧客が Web プッシュ通知を購読できるように、Web サイトで HTTPS を使用する必要があります。
• Optimizely 統合– ウェブサイトでは、Javascript Web SDK、Shopify 統合、Magento 統合、Google タグ マネージャー統合、Tealium 統合などの Optimizely 統合がすでに使用されている必要があります。
• Firebase 用 Google 開発者Account– 無料のGoogle 開発者Accountに登録して、ODP が Google Chrome の Web プッシュ通知の通知をユーザーに代わって送信できるようにするために使用される送信者 IDとサーバー キーをリクエストします。
• インストール– Web サイトが Shopify サイトではない場合、Web プッシュを有効にするには、Google Chrome に必要な 2 つのファイルを Web サイトのルートにインストールする必要があります。 Web サイトが Shopify サイトの場合は、代わりに Optimizely アプリをインストールする必要があります。

構成

Google Chromeの認証

Google Firebase コンソールで Firebase プロジェクトを作成します。 プロジェクトが作成されたら、 [設定] > [クラウド メッセージング]に移動して、後で使用するためにサーバー キーと送信者 ID を取得します。

Web プッシュ統合の作成

Web プッシュ統合の構成を開始するには、次の手順を使用します。

1. 「Account設定」>「統合」に移動します。
2. [Web プッシュ]を選択して詳細を表示します。
3. [新しい Web プッシュ サイト]を選択し、以下で詳しく説明する要求された情報を入力します。

ステップ 1 - ウェブサイトのセットアップ

注記

このステップのすべてのフィールドは必須です。

• 名前– この統合の表示名。 この名前は、ODP で使用する統合を選択するときに常に表示されます。
• 短い識別子– 主に内部参照とイベント生成に使用される識別子。 一度保存すると変更できません。
• 外部名– 顧客などのエンドユーザーに表示される Web サイト名。多くの場合、ブラウザーやオペレーティング システムによっては通知設定に表示されます。 URL の一致よりもブランドの一致の方が重要です。
• Web サイト URL – Web サイトのベース URL。 たとえば、Web サイトのアドレスがhttps://example.website/home/の場合、ベース URL はhttps://example.websiteになります。
• 通知アイコン URL – この統合から送信されるすべてのプッシュ通知のデフォルト アイコンの URL。 アップロード ボタンをクリックして ODP でイメージをホストするか、既存のイメージの HTTPS を使用して URL を手動で指定します。

「次のステップ」をクリックして続行します。

ステップ2 - Google Chromeを設定する

スイッチをクリックして Google Chrome を有効にし、 Firebase プロジェクトの送信者 IDとサーバー キーを入力します。 Firebase コンソールで[設定] > [クラウド メッセージング]に移動して、これらの項目を両方見つけます。

• 送信者 ID – Firebase プロジェクトに割り当てられた一意の番号。
• サーバー キー– ODP がユーザーに代わって Chrome プッシュ メッセージを送信することを許可するサーバー キー。

注:送信者 ID とサーバー キーの詳細については、 Firebase ドキュメントを参照してください。 「保存して続行」をクリックして構成を検証し、次のステップに進みます。

ステップ3 - エクスペリエンスをカスタマイズする

次のオプションを使用して、顧客のオプトイン エクスペリエンスをカスタマイズします。

• 位置 –画面上のウィンドウの位置。
• 表示遅延 –ウィンドウを表示するまでの待機時間。
• ポップアップ頻度 –ウィンドウの自動ポップアップ間の最小時間。 これはサブスクリプション ウィンドウに固有であり、顧客が操作しない場合に、顧客に通知を送信する許可を求める頻度を制御します。
• 遅延の最小化 –ウィンドウを自動的に最小化するまでの待機時間。
• キャンセル時間 –キャンセルされた後、ウィンドウが表示されるまでの最小待機時間。

いつでもこのステップに戻ってウィンドウをカスタマイズできます。 完了したら、 「保存して続行」をクリックします。

ステップ 4 - インストールと確認

JavaScript タグがWeb サイトのすべてのページ、できればヘッダー セクションに実装されていることを確認してください。 このタグを見つけるには、 [設定] > [統合] > [JavaScript タグ]に移動します。 

Shopify サイトの Web プッシュを構成している場合は、 「Shopify」をクリックし、手順に従って Optimizely アプリがサイトに必要なファイルを設定することを承認します。 

Web サイトが Shopify を使用していない場合は、ファイルをダウンロードしてWeb サイトのルートにアップロードします。 たとえば、Web サイトがhttps://example.website/の場合、マニフェストおよび通知サービス ファイルはhttps://example.website/manifest.jsonおよびhttps://example.website/zaius-notification-service.jsでそれぞれ利用できる必要があります。 

ファイルが Web サイトに配置されるか、Shopify で ODP が承認されたら、 [確認して続行]をクリックします。 Optimizely アプリは Web サイト上のファイルをチェックし、それらが正しくインストールされているかどうかを通知します。

ステップ 5 - ライブ配信を開始する

今すぐ Web プッシュを有効にする準備ができている場合は、[このサイトで Web プッシュを自動的に初期化する] を「オン」の位置に切り替えて、[完了]をクリックします。 手動 Web プッシュ統合を実行している場合、または後で Web プッシュを有効にしたい場合は、自動統合を有効にせずに終了できます。 Web サイトの動作を変更するには、いつでもこのステップに戻ってください。 

注記

注: Web プッシュ構成を変更する場合は、変更が有効になるまでに数分かかることがあります。

カスタム購読エクスペリエンス

Web プッシュ サブスクリプション エクスペリエンスをさらにカスタマイズするには、 Web プッシュ API統合リソースを確認してください。