> ## Documentation Index
> Fetch the complete documentation index at: https://moengage.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Web Push 設定の構成

> MoEngage で、デフォルトアイコン、サブドメイン、通知オプトインプロンプト、マルチプロジェクトサポートなど、Web プッシュ通知の設定を構成します。

この記事では、Web Push 設定を構成する手順について説明します。

1. **Settings > Channels > Push > Web Push** に移動します。
2. **Configure** と **Notification Opt-in** の 2 つのサブセクションで構成されています。

<Tip>
  [Portfolio](/docs/ja/user-guide/settings/account/portfolio/portfolio) が有効なワークスペースでは、Web Push 設定を構成する前に、MoEngage の [Portfolio](/docs/ja/user-guide/settings/account/portfolio/portfolio) に少なくとも 1 つのプロジェクトを追加する必要があります。プロジェクトの追加方法の詳細については、[こちら](/docs/ja/user-guide/settings/account/portfolio/portfolio)を参照してください。
</Tip>

# プロジェクトの選択

ポートフォリオに複数のプロジェクトがある場合、**Web push** 設定タブの上部にドロップダウンが表示されます。ドロップダウンメニューから構成するプロジェクトを選択します。関連する設定(デフォルトの通知アイコンなど)が自動的に読み込まれます。プロジェクトが 1 つだけのポートフォリオでは、すべての設定がそのプロジェクトに追加されます。

# アイコンとサブドメイン

**Configure**

<img src="https://mintcdn.com/moengage/fVqFKGn_bbcOn3ck/images/moengage_256757.png?fit=max&auto=format&n=fVqFKGn_bbcOn3ck&q=85&s=c3706638f103580c5ce74aaede12ac8f" alt="webpushsettingspic.png" width="2094" height="1256" data-path="images/moengage_256757.png" />

以下の表に示すように、Web Push で使用するデフォルトのプッシュアイコン、サブドメイン、バッジを構成できます。プッシュ通知の設定管理の詳細については、[こちら](/docs/ja/user-guide/campaigns-and-channels/mobile-push/getting-started-with-mobile-push/preference-management-for-push-notifications)を参照してください。

| フィールド | 説明 |
| - | - |
| Project | ドロップダウンメニューから使用するプロジェクトを選択します。このフィールドは、ポートフォリオに複数のプロジェクトを構成している場合に表示されます。詳細については、[こちら](/docs/ja/user-guide/settings/account/portfolio/portfolio)を参照してください。 |
| Default Notification Icon | このフィールドには、Web Push 通知で使用されるアイコンが含まれます。デフォルトのアイコンは MoEngage のアイコンです。ブランドのロゴをアップロードして変更できます。 |
| Badge Icon for Android Web Push | Web Push を受信する Android デバイスでは、バッジアイコンはプッシュ通知の左上セクションに表示されるアプリアイコンです。バッジアイコンのアップロードには 2 つのオプションがあります: <ul><li>**Upload image** *Upload Image* ラジオボタンを選択し、*Browse and Upload* ボタンをクリックしてデバイスから画像をアップロードします。</li><li>**Enter Image URL** *Enter Image URL* ラジオオプションを選択し、アプリのバッジアイコンの画像 URL を入力または貼り付けます。</li></ul> MoEngage では、Badge Icon 画像として次のファイル形式のアップロードをサポートしています: .png、.gif、.webp、.ico、.cur、.bmp。 <br /><img src="https://mintcdn.com/moengage/8EX_gHAg3q4zA1kw/images/moengage_24b8ee.png?fit=max&auto=format&n=8EX_gHAg3q4zA1kw&q=85&s=02cafe93986aeac9202b402eae5c2d4f" width="2112" height="1380" data-path="images/moengage_24b8ee.png" /><br /><Info>                                 <ul><li>アルファチャンネル(白黒)の画像のみサポートされています。</li><li>RGB 画像はサポートされていません。</li><li>Badge Icon の推奨解像度は 72x72 ピクセル以上です。</li></ul>                                                   </Info> |
| Sub-domains | このフィールドはウェブサイトのサブドメインを示し、次のオプションがあります: <ol><li>*Treat each subdomain as a separate entity* - 複数のサブドメインがある場合、それらはすべて別々のエンティティとして扱われ、ユーザーはそれぞれのサブドメインで許可を求められます。</li><li>*Track user cross-domain* - 複数のサブドメインがあり、同じダッシュボードでトラッキングしたい場合は、Track user cross-domain を選択します。</li></ol> |

<Note>
  クロスサブドメイントラッキングは Cookie を使用します。[RFC 6265: HTTP State Management Mechanism](https://datatracker.ietf.org/doc/html/rfc6265) に基づき、ブラウザは [Public Suffix List](https://publicsuffix.org/list/public_suffix_list.dat) に記載されている標準ドメインのホスト名でのみ Cookie をサポートします。この機能を有効にする前に、ドメインが標準ドメイン名であることを確認してください。
</Note>

# 通知オプトインの構成

このセクションでは、Web Push のオプトイン情報を構成できます。オプトインとは、ウェブページ上でユーザーからプッシュ許可を求める方法を指します。

* **Project** ドロップダウンから使用するプロジェクトを選択します。このフィールドは、ポートフォリオに複数のプロジェクトを構成している場合に表示されます。詳細については、[こちら](/docs/ja/user-guide/settings/account/portfolio/portfolio)を参照してください。
* この機能を有効にするには、**Notification opt-in** タブで Web Push オプトインを有効にする必要があります。

<img src="https://mintcdn.com/moengage/ncl4TtlD4tqnPefh/images/moengage_7552a0.png?fit=max&auto=format&n=ncl4TtlD4tqnPefh&q=85&s=6299fa6bae66e96664aaba93b981fd8b" alt="" width="1298" height="444" data-path="images/moengage_7552a0.png" />

* MoEngage では、3 種類のプッシュオプトインを提供しています:
  * Two-Step Opt-In(推奨)
  * 1-Click Opt-In
  * Self Handled Opt-in

<Tabs>
  <Tab title="Two-Step Opt-in(推奨)">
    Two Step オプトインはソフトアスクであるため、推奨されるオプションです。ソフトアスクとは、ユーザーが許可しなかった場合でもオプションが複数回表示されることを意味し、これによりリーチ可能なユーザーを最大化できます。

    ウェブページ上で、ユーザーにはまずユーザーの意向を確認する「ソフトアスク」が表示され、許可されるとブラウザのメインの許可プロンプトが表示されます。

    Two Step Opt-in セクションには、次のオプションがあります:

    | フィールド | 説明 |
    | - | - |
    | Show Push Permission opt-in after | プッシュ許可のオプトインをユーザーに表示するまでの時間を構成できます。 |
    | Show Desktop Banner / Mobile Nudge after | デスクトップバナー/モバイルナッジをユーザーに表示するまでの時間を構成できます。 |
    | Opt-In re-appear time | ユーザーがオプトインまたはバナー/ナッジを閉じた場合に、オプトインを再度ユーザーに表示するまでの時間を構成できます。 |
    | Hide Moengage Branding | ソフトアスクとハードアスクに表示される MoEngage のロゴを非表示にできます。 |
    | Desktop Banner/Mobile Nudge | <ul><li>Banner/ Nudge Icon</li><li>Accessibility text</li><li>Banner/ Nudge Background Color</li><li>Banner/ Nudge Text</li><li>Banner Text Color</li><li>Allow Button</li><li>Dismiss Button</li></ul> **注**: アクセシビリティの詳細については、[こちら](/docs/ja/user-guide/campaigns-and-channels/getting-started/campaign-content/accessible-campaigns-in-moengage)を参照してください。 |

    <img src="https://mintcdn.com/moengage/wjYnJKL0xml-g3HM/images/moengage_45038c.png?fit=max&auto=format&n=wjYnJKL0xml-g3HM&q=85&s=96d162b5b7a1e3ef44d7f6d6b83989dd" alt="" width="2238" height="3102" data-path="images/moengage_45038c.png" />
  </Tab>

  <Tab title="1-Click Opt-in">
    1-Click Opt-in セクションには、次のオプションがあります:

    | フィールド | 説明 |
    | - | - |
    | Opt-In re-appear time | ユーザーがオプトインまたはバナー/ナッジを閉じた場合に、オプトインを再度ユーザーに表示するまでの時間を構成できます。 |
    | Hide Moengage Branding | ソフトアスクとハードアスクに表示される MoEngage のロゴを非表示にできます。 |
    | Show Push Permission Opt-in after | ユーザーにプッシュ許可のオプトインが表示されるまでの時間を構成できます。 |
    | Use Assistive Overlay to increase opt-ins | プッシュ通知へのオプトインをユーザーに自動的に促します。アシスティブオーバーレイのテキストを編集することもできます。 |
    | Push Opt-in Preview (Click on text to edit) | プッシュオプトインナッジのテキストを表示および編集できます。 |

    <img src="https://mintcdn.com/moengage/tNrQQROY8O0h4yWe/images/moengage_15f19e.png?fit=max&auto=format&n=tNrQQROY8O0h4yWe&q=85&s=2d31c284db154c482098db0b6cb34f01" alt="" width="2240" height="2488" data-path="images/moengage_15f19e.png" />

    <Info>
      Safari の場合

      * *Show Push Permission Opt-in after* の値は無視されます。
      * オプトインはページの読み込み時ではなく、*click* イベントでトリガーされます。
    </Info>

    <Warning>
      One-Click Opt-In は

      * 新しいバージョンの Microsoft Edge では動作しません。
      * Safari でユーザーがウェブページ上のリンクをクリックすると、ハードアスクが完全に表示されません。これは、オプトインがページの読み込み時ではなく、*click* イベントでトリガーされるためです。
    </Warning>
  </Tab>

  <Tab title="Self-Handled Opt-In">
    Self Handled Opt-in は、Web SDK の統合でのみ有効にできます。Self-Handled Opt-In の構成については、[Self-Handled Opt-In の構成](/docs/ja/developer-guide/web-sdk/web-push/configure-self-handled-opt-in)を参照してください。

    <img src="https://mintcdn.com/moengage/2FjM3dGfEH1CYo8k/images/moengage_62943e.png?fit=max&auto=format&n=2FjM3dGfEH1CYo8k&q=85&s=61e9c3083a99fc7359e59cf657d7c83a" alt="" width="2204" height="684" data-path="images/moengage_62943e.png" />

    <Warning>
      Microsoft Edge では、Self-Handled Opt-In を使用するとページ読み込み時のハードアスクが表示されません。そのため、最初にソフトアスクを呼び出すことを推奨します。
    </Warning>
  </Tab>
</Tabs>

<Info>
  **キャッシュ**: 上記のすべての設定がウェブサイトに反映されるまで、最低 24 時間かかります。
</Info>

# ブラウザ互換性マトリックス

| オペレーティングシステム | ブラウザ | Web Push のサポート | Onsite Messaging のサポート |
| - | - | - | - |
| Windows | Internet Explorer | ❌ | ❌ |
| Windows | Google Chrome | ✅ | ✅ |
| Windows | Mozilla Firefox | ✅ | ✅ |
| Windows | Opera/ Opera Neon | ✅ | ✅ |
| Windows | Chromium Edge | ✅ | ✅ |
| Mac OS | Google Chrome | ✅ | ✅ |
| Mac OS | Mozilla Firefox | ✅ | ✅ |
| Mac OS | Opera/ Opera Neon | ✅ | ✅ |
| Mac OS | Chromium Edge | ✅ | ✅ |
| Mac OS | Safari | ✅ (macOS 13 以降) | ✅ |
| Android | Google Chrome | ✅ | ✅ |
| Android | Mozilla Firefox | ✅ | ✅ |
| Android | Samsung Internet | ✅ | ✅ |
| Android | UC browser | ✅ | ✅ |
| iOS | Google Chrome | ❌ | ✅ |
| iOS | Safari | ✅ (iOS と Safari の両方が 16.4+) | ✅ |

<Info>
  iOS デバイスの Safari で Web Push を機能させるには、次の要件を満たす必要があります:

  * ウェブサイトが Progressive Website App (PWA) であること。
  * Web アプリのマニフェストファイルが作成され、リンクされていること。
  * MoEngage のサービスワーカーファイルがインポートされ、ルートフォルダに配置されていること。
  * PWA がホーム画面に追加されていること。
  * Web プッシュ通知の受信許可をユーザーに求めること。2 ステップのオプトインプロセスを推奨します。

  詳細については、[iOS および iPadOS の Safari 向け Web Push 統合手順](/docs/ja/developer-guide/web-sdk/web-push/safari-web-push-for-i-os-and-i-pad-os)を参照してください。
</Info>

# さまざまな OS/ブラウザの組み合わせでのプレビュー

<Tabs>
  <Tab title="Android">
    <Accordion title="Chrome">
      <img src="https://mintcdn.com/moengage/Ci8j4F7VOEUnUuwd/images/moengage_ed2176.png?fit=max&auto=format&n=Ci8j4F7VOEUnUuwd&q=85&s=cbecb319392da2e8618aadc169b5351a" alt="mceclip2.png" style={{ width:"39%" }} width="684" height="770" data-path="images/moengage_ed2176.png" />
    </Accordion>

    <Accordion title="Firefox">
      <img src="https://mintcdn.com/moengage/7H2dU4CG2W0DQCPI/images/moengage_6e9d01.png?fit=max&auto=format&n=7H2dU4CG2W0DQCPI&q=85&s=9f3b1ba0fbb1d394f96e39fcc5390e28" alt="mceclip3.png" style={{ width:"42%" }} width="514" height="145" data-path="images/moengage_6e9d01.png" />
    </Accordion>

    <Accordion title="Opera">
      <img src="https://mintcdn.com/moengage/jnaevUpPOwD04mEl/images/moengage_83fb7b.png?fit=max&auto=format&n=jnaevUpPOwD04mEl&q=85&s=75fa5e01290ffa9af0803aa75ad38713" alt="mceclip4.png" style={{ width:"37%" }} width="684" height="770" data-path="images/moengage_83fb7b.png" />
    </Accordion>

    <Accordion title="Edge">
      <img src="https://mintcdn.com/moengage/cFTwc93vQdTanvKi/images/moengage_bd8cb0.png?fit=max&auto=format&n=cFTwc93vQdTanvKi&q=85&s=b907edab38def30eb39c801e04ba2c34" alt="android_edge__1_.png" style={{ width:"39%" }} width="1368" height="1540" data-path="images/moengage_bd8cb0.png" />
    </Accordion>
  </Tab>

  <Tab title="Linux">
    <Accordion title="Chrome">
      <img src="https://mintcdn.com/moengage/4hNKOAjPrnhpJB2_/images/moengage_7febb4.png?fit=max&auto=format&n=4hNKOAjPrnhpJB2_&q=85&s=d87fa8899ef4fdf911c6796533e08b93" alt="mceclip5.png" style={{ width:"55%" }} width="500" height="151" data-path="images/moengage_7febb4.png" />
    </Accordion>

    <Accordion title="Firefox">
      <img src="https://mintcdn.com/moengage/fVqFKGn_bbcOn3ck/images/moengage_228465.png?fit=max&auto=format&n=fVqFKGn_bbcOn3ck&q=85&s=282e6370d1c096cc4aaf44acaf59da14" alt="mceclip6.png" style={{ width:"64%" }} width="500" height="76" data-path="images/moengage_228465.png" />
    </Accordion>

    <Accordion title="Opera">
      <img src="https://mintcdn.com/moengage/2CGhjk8ZDWEC5ocb/images/moengage_f61e4f.png?fit=max&auto=format&n=2CGhjk8ZDWEC5ocb&q=85&s=8110ce182b3cb4863ce68c618bcbeea5" alt="linux_opera.png" style={{ width:"65%" }} width="2000" height="600" data-path="images/moengage_f61e4f.png" />
    </Accordion>

    <Accordion title="Edge">
      <img src="https://mintcdn.com/moengage/2CGhjk8ZDWEC5ocb/images/moengage_f61e4f.png?fit=max&auto=format&n=2CGhjk8ZDWEC5ocb&q=85&s=8110ce182b3cb4863ce68c618bcbeea5" alt="linux_edge.png" style={{ width:"66%" }} width="2000" height="600" data-path="images/moengage_f61e4f.png" />
    </Accordion>
  </Tab>

  <Tab title="Mac">
    <Accordion title="Chrome">
      <img src="https://mintcdn.com/moengage/cFTwc93vQdTanvKi/images/moengage_be42c2.png?fit=max&auto=format&n=cFTwc93vQdTanvKi&q=85&s=9bb2bada813a56752b18f09adbf0d5da" alt="mceclip8.png" style={{ width:"37%" }} width="344" height="370" data-path="images/moengage_be42c2.png" />
    </Accordion>

    <Accordion title="Firefox">
      <img src="https://mintcdn.com/moengage/E3HJVtaUzhrzFckK/images/moengage_93efa1.png?fit=max&auto=format&n=E3HJVtaUzhrzFckK&q=85&s=eb8c09089752758f9bc272b11f1eed6f" alt="mceclip9.png" style={{ width:"36%" }} width="344" height="399" data-path="images/moengage_93efa1.png" />
    </Accordion>

    <Accordion title="Opera">
      <img src="https://mintcdn.com/moengage/0iWkm50wROjmHH3Z/images/moengage_d14d0c.png?fit=max&auto=format&n=0iWkm50wROjmHH3Z&q=85&s=7e3e3287ff07b8d01b7c23905ebcfa33" alt="mceclip10.png" style={{ width:"36%" }} width="344" height="370" data-path="images/moengage_d14d0c.png" />
    </Accordion>

    <Accordion title="Safari">
      <img src="https://mintcdn.com/moengage/rlD8iAX6JQFx0hql/images/moengage_bc6b93.png?fit=max&auto=format&n=rlD8iAX6JQFx0hql&q=85&s=6e7f81cc7a26a0d8d55def569e0e0c49" alt="mceclip11.png" style={{ width:"54%" }} width="344" height="69" data-path="images/moengage_bc6b93.png" />
    </Accordion>

    <Accordion title="Edge">
      <img src="https://mintcdn.com/moengage/CaPmX0z_ys8cr0ms/images/moengage_099e2a.png?fit=max&auto=format&n=CaPmX0z_ys8cr0ms&q=85&s=173c014eececae090cfc18f279b3e940" alt="mac_edge.png" style={{ width:"45%" }} width="1376" height="1480" data-path="images/moengage_099e2a.png" />
    </Accordion>
  </Tab>

  <Tab title="Windows">
    <Accordion title="Chrome">
      <img src="https://mintcdn.com/moengage/Ci8j4F7VOEUnUuwd/images/moengage_eabd6f.png?fit=max&auto=format&n=Ci8j4F7VOEUnUuwd&q=85&s=a8ec10538e25743f402fa5e279b9ec60" alt="mceclip12.png" style={{ width:"37%" }} width="453" height="494" data-path="images/moengage_eabd6f.png" />
    </Accordion>

    <Accordion title="Firefox">
      <img src="https://mintcdn.com/moengage/7H2dU4CG2W0DQCPI/images/moengage_6ef162.png?fit=max&auto=format&n=7H2dU4CG2W0DQCPI&q=85&s=f764219e4f55264752bc133fcdda80c9" alt="mceclip13.png" style={{ width:"47%" }} width="954" height="292" data-path="images/moengage_6ef162.png" />
    </Accordion>

    <Accordion title="Opera">
      <img src="https://mintcdn.com/moengage/2CGhjk8ZDWEC5ocb/images/moengage_f73b99.png?fit=max&auto=format&n=2CGhjk8ZDWEC5ocb&q=85&s=02fd33fef25e6f5c123002905416f956" alt="mceclip14.png" style={{ width:"37%" }} width="453" height="494" data-path="images/moengage_f73b99.png" />
    </Accordion>

    <Accordion title="Edge">
      <img src="https://mintcdn.com/moengage/P9B7WlDoMUnquME5/images/moengage_0aaf5c.png?fit=max&auto=format&n=P9B7WlDoMUnquME5&q=85&s=ad1ed1d5480c3d0bebc85e63e0ff728d" alt="windows_edge.png" style={{ width:"36%" }} width="1812" height="1976" data-path="images/moengage_0aaf5c.png" />
    </Accordion>
  </Tab>

  <Tab title="iOS">
    <Accordion title="Safari">
      <img src="https://mintcdn.com/moengage/ME-DtlELD2N8TrcF/images/moengage_c07bdd.png?fit=max&auto=format&n=ME-DtlELD2N8TrcF&q=85&s=17ac48dfea29d2b833ad3b3afee0b92e" alt="image.png" style={{ width:"53%" }} width="585" height="100" data-path="images/moengage_c07bdd.png" />
    </Accordion>
  </Tab>
</Tabs>

# デバイス分析

**Device analytics** タブでは、レポートを絞り込むためのトラッキング設定を構成できます。これには次のものが含まれます:

* **App Version Buckets:** バージョンをバケット(例: Beta と Stable)にグループ化して、導入傾向を分析します。
* **OEM & Browser Tracking:** ユーザーに最も関連性の高い上位 5 つのデバイスメーカーまたはブラウザを選択し、残りを "Others" にグループ化します。

これらの設定を構成する詳細な手順については、[デバイス分析の構成](/docs/ja/user-guide/campaigns-and-channels/mobile-push/getting-started-with-mobile-push/device-analytics-configuration)を参照してください。

# IP のホワイトリスト登録

Push キャンペーンで Content API または PII トークン化を使用するためにシステムで IP のホワイトリスト登録が必要な場合は、[こちら](/docs/ja/user-guide/settings/account/security/ip-whitelisting-in-moengage)を参照してください。

# よくある質問

<Accordion title="Web プッシュ通知が画面上に表示される位置を選択できますか?">
  画面上の Web プッシュ通知の位置は、ブラウザとオペレーティングシステムによって異なります。通知センターに表示される場合やポップアップとして表示される場合があり、カスタマイズすることはできません。
</Accordion>