> ## 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 パーソナライゼーション - V2
> MoEngage Personalize SDK を統合して、ウェブサイトの訪問者にパーソナライズされたエクスペリエンスを提供します。
IDE を [MoEngage docs MCP server](/docs/ja/developer-guide/connect-your-ide-to-moengage-docs) に接続すると、開発環境内で正確かつコンテキストに応じた SDK のガイダンスを得られます。アシスタントがこのドキュメントを直接検索するため、安心して統合作業を進めることができます。
MoEngage の Web パーソナライゼーションを使用すると、技術チームの関与をほとんど、またはまったく必要とせずに、すべての訪問者に合わせてウェブサイトのエクスペリエンスをパーソナライズできます。SDK 統合の[ドキュメント](/docs/ja/developer-guide/web-sdk/web-sdk-integration/basic-integration/web-sdk-integration)に従っており、SDK が正常に動作していることを確認してください。
# MoE ドメインのプリフェッチ
moengage.com ドメインをプリフェッチするには、`` の先頭に次のコードスニペットを追加します。
```javascript JavaScript wrap theme={null}
```
API エンドポイント URL の 'X' は、MoEngage のデータセンター（DC）を指します。MoEngage は顧客ごとに異なる DC でホストしています。[こちら](https://www.moengage.com/docs/user-guide/data/key-concepts/data-centers-in-moengage)の DC と API エンドポイントのマッピングを参照して、DC 番号（X の値）を確認し、URL の 'X' の値を置き換えてください。
# 方法 1: Web P モジュールの開始
次の表には、ダッシュボードホストにマッピングされたさまざまなデータセンターの詳細が記載されており、統合に必要です。
| データセンター | ダッシュボードホスト |
| :- | :- |
| dc\_1 | dashboard-01.moengage.com |
| dc\_2 | dashboard-02.moengage.com |
| dc\_3 | dashboard-03.moengage.com |
| dc\_4 | dashboard-04.moengage.com |
| dc\_6 | dashboard-06.moengage.com |
## 本番環境または LIVE 環境
Web パーソナライゼーションモジュールを開始するには、次のスクリプトを追加します。
```javascript JavaScript wrap theme={null}
```
次のフィールドを変更します。
* 上記の URL の 'workspace\_id' を、MoEngage ダッシュボードの設定にある Workspace ID に置き換えます。Dashboard -> Settings -> App -> General に移動し、Workspace ID をコピーします。
* 上記の URL の 'DC' を、インスタンスがホストされているデータセンターに置き換えます。MoEngage は顧客ごとに異なるデータセンターでホストしています。トラッキングされたデータは MoEngage のデフォルトのデータセンターに保存されます。データセンターのマッピングを確認するには、データセンターのマッピングを参照してください。指定可能な値は dc\_X で、'X' はデータセンター番号です。
* 上記の URL の 'sdkVersion' を、使用している Web SDK のバージョンに置き換えます。NPM を使用している場合は、package.json ファイルにある @moengage/web-sdk 依存関係のバージョン番号を使用します。
たとえば、ダッシュボードの URL が [https://dashboard-01.moengage.com](https://dashboard-01.moengage.com) で始まり、現在の Web SDK のバージョンが 2、workspace\_id が YOUR\_WORKSPACE\_ID の場合、プリフェッチと開始のコードは次のようになります。
```javascript JavaScript wrap theme={null}
```
**警告**
Web SDK のバージョンを変更した場合は、必ず Web パーソナライゼーションの CDN リンクのバージョンも更新してください。Web パーソナライゼーションが正常に機能するためには、このリンクと Web SDK のバージョンが常に完全に一致している必要があります。
## テスト環境
テスト環境でデータをトラッキングするには、上記のスクリプトの src に次のように `debug_logs` を含めます。
```javascript JavaScript wrap theme={null}
```
たとえば、ダッシュボードの URL が [https://dashboard-01.moengage.com](https://dashboard-01.moengage.com) で始まり、現在の Web SDK のバージョンが 2、workspace\_id が YOUR\_WORKSPACE\_ID の場合、コード全体は次のようになります。
```javascript JavaScript wrap theme={null}
```
# 方法 2: NPM の初期化設定で useLatest: true フラグを渡している場合
この場合は、Web パーソナライゼーションモジュールを開始するために次のスクリプトを追加します。
```javascript JavaScript wrap theme={null}
```
次のフィールドを変更します。
* 上記の URL の 'workspace\_id' を、MoEngage ダッシュボードの設定にある Workspace ID に置き換えます。Dashboard -> Settings -> App -> General に移動し、Workspace ID をコピーします。
* 上記の URL の 'DC' を、インスタンスがホストされているデータセンターに置き換えます。MoEngage は顧客ごとに異なるデータセンターでホストしています。トラッキングされたデータは MoEngage のデフォルトのデータセンターに保存されます。データセンターのマッピングを確認するには、データセンターのマッピングを参照してください。指定可能な値は dc\_X で、'X' はデータセンター番号です。
たとえば、ダッシュボードの URL が [https://dashboard-01.moengage.com](https://dashboard-01.moengage.com) で始まり、workspace\_id が YOUR\_WORKSPACE\_ID の場合、プリフェッチと開始のコードは次のようになります。
```javascript JavaScript wrap theme={null}
```
# キャッシュデータの更新
Web パーソナライゼーションのデータは取得され、ブラウザーのキャッシュに保存されます。データは、以下のいずれかの条件を満たす場合にのみ、次のページ読み込み時に再同期されます。
* 前回のデータ取得から 15 分が経過している
* ログインまたはログアウトが実行された
# Web パーソナライゼーションのアンチフリッカーコード
アンチフリッカースニペットは、Web パーソナライゼーションのエクスペリエンスを実行する際に、ウェブサイトのユーザーエクスペリエンスを維持するのに役立つ小さなコードです。[フリッカーの詳細はこちら](https://www.moengage.com/docs/user-guide/personalize/things-to-know/how-to-manage-flicker-on-websites)
ページのフリッカー（ちらつき）は、ページの初回読み込み時に表示される領域でウェブページの実験を行う場合にのみ発生する問題です。表示領域より下で行われる実験や、「最近閲覧した商品」や「カートに追加した商品」のグリッドのトリガーなど、訪問者が特定のアクションを実行した後に行われる実験など、ページのフリッカーが問題にならない場合もあります。このような場合、通常はウェブサイトにアンチフリッカーコードを追加する必要はありません。
## アンチフリッカーコードのインストール手順
ページのフリッカーを防ぐには、2 つのオプションがあります。
1. パーソナライゼーションが完了するまでページ全体のコンテンツをマスクする **または**
2. WYSIWYG エディターを使用してパーソナライズされた個々の要素をマスクする
**注**
* ウェブサイトには、[オプション 1](/docs/ja/developer-guide/personalize-sdk/sdk-integration/web-personalization-v2#option-1-masking-content-of-the-entire-webpage) または [オプション 2](/docs/ja/developer-guide/personalize-sdk/sdk-integration/web-personalization-v2#option-2-masking-individual-elements-on-the-webpage) のいずれか一方のアプローチのみを実装する必要があります。
### オプション 1: ウェブページ全体のコンテンツをマスクする
1. ウェブサイトのコードの `` 内で、ページのできるだけ上部に以下のコードを追加します。
2. 以下のスクリプトの **MAX\_RENDER\_TIME** は、パーソナライズされたエクスペリエンスの読み込みに失敗した場合に、訪問者に元のウェブサイトが表示されるまでの待機時間（ミリ秒単位）を指します。この値は、ウェブサイトのパフォーマンス要件に応じて更新できます。
```javascript JavaScript wrap theme={null}
```
### オプション 2: ウェブページ上の個々の要素をマスクする
この方法では、ウェブページ上でパーソナライズされた特定の要素のみをマスクします。以下のスクリプトで、
1. ウェブページ上でパーソナライズされた各要素の HTML セレクターを配列 **personalizedSelectors** に追加します。[パーソナライズされた要素の HTML セレクターを確認する方法](/docs/ja/developer-guide/personalize-sdk/sdk-integration/web-personalization-v2#option-1-use-the-element’s-html-id)
2. **maxRenderTime** は、パーソナライズされたエクスペリエンスの読み込みに失敗した場合に、訪問者に元のウェブサイトが表示されるまでの待機時間（ミリ秒単位）を指します。この値は、ウェブサイトのパフォーマンス要件に応じて更新できます。
3. ウェブサイトのコードの `` セクション内で、ページのできるだけ上部に以下のコードを追加します。
```javascript JavaScript wrap theme={null}
```
参考として、ウェブページ上で複数の要素をパーソナライズする例を以下に示します。
```javascript JavaScript wrap theme={null}
const personalizedSelectors = ['#homepage-title', '#homepage-subtitle', '#homepage-cta', '#homepage-cta-link', '#homepage-banner'];
```
パーソナライズされた HTML セレクターを確認する方法は 2 つあります。
#### オプション 1: 要素の HTML ID を使用する
1. 要素を右クリックします。
2. コンテキストメニューで **Inspect**（検証）または **Inspect Element**（要素を検証）を選択します。
3. ハイライトされた HTML で、その要素の HTML ID を確認します。画像でハイライトされている要素の場合、入力は次のようになります。
\
以下は、対象の HTML 要素についてアンチフリッカースニペットに指定する入力です。
```javascript JavaScript wrap theme={null}
const personalizedSelectors = ['#homepage-title'];
```
#### オプション 2: 要素の HTML セレクターパスを使用する
1. 要素を右クリックします。
2. コンテキストメニューで **Inspect Element**（要素を検証）を選択します。
3. ハイライトされた HTML を右クリックし、コンテキストメニューで **Copy Selector**（セレクターをコピー）を選択します。
\
以下は、対象の HTML 要素についてアンチフリッカースニペットに指定する入力です。
```javascript JavaScript wrap theme={null}
const personalizedSelectors = ['#side-container > a > img'];
```
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.