> For the complete documentation index, see [llms.txt](https://manual.dxable.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://manual.dxable.com/optimizely/platform/optimizely-data-platform/campaign-content/enable-web-push-notifications.md).

# ウェブプッシュ通知を有効にする

### Webプッシュ通知を有効にする <a href="#gjdgxs" id="gjdgxs"></a>

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

デスクトップの例:

![Web\_Push\_-\_Desktop.png](/files/JQoCvXygctNVXyGBDH0o)

モバイルの例:

![Web\_Push\_-\_Mobile.png](/files/N8pdDm8RlHmf7F3cvb7V)

### 前提条件 <a href="#id-30j0zll" id="id-30j0zll"></a>

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

### 構成 <a href="#id-1fob9te" id="id-1fob9te"></a>

#### **Google Chromeの認証** <a href="#id-3znysh7" id="id-3znysh7"></a>

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

#### **Web プッシュ統合の作成** <a href="#id-2et92p0" id="id-2et92p0"></a>

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

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

#### **ステップ 1 - ウェブサイトのセットアップ** <a href="#tyjcwt" id="tyjcwt"></a>

注記

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

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

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

#### **ステップ2 - Google Chromeを設定する** <a href="#id-3dy6vkm" id="id-3dy6vkm"></a>

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

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

**注:**&#x9001;信者 ID とサーバー キーの詳細については、 [Firebase ドキュメントを参照してください](https://firebase.google.com/docs/cloud-messaging/concept-options#credentials)。

**「保存して続行」**&#x3092;クリックして構成を検証し、次のステップに進みます。

#### **ステップ3 - エクスペリエンスをカスタマイズする** <a href="#id-1t3h5sf" id="id-1t3h5sf"></a>

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

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

いつでもこのステップに戻ってウィンドウをカスタマイズできます。

完了したら、 **「保存して続行」**&#x3092;クリックします。

#### **ステップ 4 - インストールと確認** <a href="#id-4d34og8" id="id-4d34og8"></a>

[JavaScript タグが](https://docs.developers.optimizely.com/optimizely-data-platform/docs/implement-the-odp-javascript-tag)Web サイトのすべてのページ、できればヘッダー セクションに実装されていることを確認してください。 このタグを見つけるには、 **\[設定]** > **\[統合]** > **\[JavaScript タグ]に移動します**。

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

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

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

#### **ステップ 5 - ライブ配信を開始する** <a href="#id-2s8eyo1" id="id-2s8eyo1"></a>

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

**注記**

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

### カスタム購読エクスペリエンス <a href="#id-17dp8vu" id="id-17dp8vu"></a>

Web プッシュ サブスクリプション エクスペリエンスをさらにカスタマイズするには、 [Web プッシュ API](https://docs.developers.optimizely.com/optimizely-data-platform/docs/websdk-web-push)統合リソースを確認してください。


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://manual.dxable.com/optimizely/platform/optimizely-data-platform/campaign-content/enable-web-push-notifications.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
