> ## 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.

# Personalize を使用して Web ページ上の要素を並べ替える方法

# はじめに

Web サイト上の要素を並べ替えることは、ユーザーの興味、行動、好みにより適合するようにレイアウトやコンテンツの流れを調整することで、ユーザー体験 (UX) のパーソナライズに大きな役割を果たします。これによってパーソナライズが強化される方法をいくつか紹介します。

* **関連性の向上**: ユーザーの興味に沿ったコンテンツや商品を目立つ位置に配置すると、ユーザーはサイトが自分のニーズに合っていると感じるため、エンゲージメントが促進されます。
* **利便性の向上**: よく使われる機能や情報をアクセスしやすい場所に配置することで、ユーザーの行動パターンに対応し、より直感的で素早い体験を実現できます。
* **行動データの活用**: ユーザーの過去のサイトでのインタラクションに基づいて要素を並べ替えることで、ショッピング体験をよりオーダーメイドなものにできます。
* **発見しやすさの向上**: ユーザーのプロファイルや過去の行動に基づいて、新しいコンテンツや目立たないコンテンツを紹介するように要素を並べ替えることで、Web サイトはユーザーの体験を広げ、探索を促すことができます。
* **適応型コンテンツ**: ユーザーの現在のコンテキスト (位置情報、時間帯、現在のトレンドなど) により関連性の高いコンテンツを表示するようにサイトの要素を動的に並べ替えることで、Web サイトをより活気のある、ユーザーに合わせたものに感じさせることができます。
* **A/B テストと最適化**: A/B テストに基づいて継続的に並べ替えることで、特定のユーザーセグメントに対して最も効果的なレイアウトやコンテンツ構造に基づいてサイトを進化させることができます。

個々のユーザーのニーズに合わせて要素を並べ替えることで、Web サイトはコンテンツを個人にとってより関連性の高いものにし、ユーザーの効率と満足度を高めることができ、最終的にエンゲージメントとコンバージョンの向上につながります。

# 期待される結果

訪問者が In-Session behavior の一部として指定された条件を満たすたびに、Web ページにパーソナライズされたエクスペリエンスが表示されます。

<img src="https://mintcdn.com/moengage/rlD8iAX6JQFx0hql/images/moengage_b9a679.png?fit=max&auto=format&n=rlD8iAX6JQFx0hql&q=85&s=eb5fe4ec849ec1ec364a2f3184823077" alt="Screenshot 2024-07-26 at 10.56.50 PM.png" width="3344" height="1828" data-path="images/moengage_b9a679.png" />

<Tip>
  * アカウントで Personalize 機能が有効になっている必要があります。この機能を有効にするには、アカウントマネージャーにお問い合わせください。
  * Personalize SDK が Web サイトに統合されている必要があります。設定手順については、[Personalize SDK Integration Guide](/docs/ja/developer-guide/personalize-sdk/sdk-integration/web-personalization-v2) を参照してください。
  * MoEngage Web SDK を介して Web サイト上のユーザーアクティビティを追跡するイベントがすでに設定されている必要があります。設定するには、[Developer Guide](/docs/ja/developer-guide/web-sdk/data-tracking/web-sdk-events-tracking) を参照してください。
</Tip>

# パーソナライズエクスペリエンスを作成する

このセクションでは、*MoEngage Experience* 機能を使用して、個々のユーザーのニーズに合わせて要素を配置するパーソナライズエクスペリエンスを作成します。

## ステップ 1: ターゲットユーザー

1. 左側のサイドバーに移動して **Personalize** **>** **All Experiences** をクリックし、**+ Experience** > **Web (WYSIWYG)** をクリックするか、**+ Create new** > **Experience** > **Web** > **Web (WYSIWYG)** をクリックします。
2. パーソナライズされたエクスペリエンスを定義する最初のステップである "Target users" に移動します。
3. 次の詳細を入力します。
   * **Experience name**: 作成するパーソナライズの名前です。
   * **Experience Tags**: 後で他のパーソナライズされたエクスペリエンスと区別できるように、ここにタグを追加します。
4. **Target Audience** で **+ Audience** をクリックし、ドロップダウンメニューから **New Audience** を選択します。新しいオーディエンスの作成の詳細については、[こちら](/docs/ja/user-guide/personalize/client-side-personalization/client-side-personalization/create-client-side-personalization-experience)を参照してください。
   <img src="https://mintcdn.com/moengage/Ci8j4F7VOEUnUuwd/images/moengage_ece476.png?fit=max&auto=format&n=Ci8j4F7VOEUnUuwd&q=85&s=f8f1c48e283150ba40d2b1d5c37f33c5" alt="Screenshot 2024-06-17 at 2.20.40 PM.png" width="3192" height="1574" data-path="images/moengage_ece476.png" />
5. この記事では、*utm\_campaign = sunglass* で識別されるソーシャルメディアキャンペーンからユーザーが Web サイトにアクセスするたびに、ホームページのレイアウトをパーソナライズします。 <img src="https://mintcdn.com/moengage/fVqFKGn_bbcOn3ck/images/moengage_2512a0.png?fit=max&auto=format&n=fVqFKGn_bbcOn3ck&q=85&s=8e6199ae0fcf0ddc4ecf8430eb6a925e" alt="Screenshot 2024-07-26 at 10.38.31 PM.png" width="2692" height="1424" data-path="images/moengage_2512a0.png" />
6. **Next** をクリックして 2 番目のステップ "Content" に移動し、キャンペーンに含めるコンテンツを定義します。ユーザー属性に基づいてオーディエンスを作成してお気に入りのカテゴリを前面に表示したり、In-session behavior を使用して最近閲覧したカテゴリを目立たせたりできます。

## ステップ 2: コンテンツ

1. 最初のステップ "Target users" で **Next** をクリックすると、URL(s) to personalize ポップアップが表示されます。これを使用して、Web サイトのどこにパーソナライズを表示するかを定義できます。単一の Web ページと複数の Web ページのどちらでもパーソナライズできます。
   * 複数の Web ページの場合、パーソナライズする要素がすべてのページに存在し、Web ページのフィルター条件に一致している必要があることに注意してください。要素が存在しない場合、パーソナライズはユーザーに表示されません。
     <img src="https://mintcdn.com/moengage/2kQqTYC5RUPSd8kI/images/moengage_3f5a30.png?fit=max&auto=format&n=2kQqTYC5RUPSd8kI&q=85&s=a95d6df0125b01b3b1ddb4cb9b9ba3d9" alt="Screenshot 2024-06-17 at 2.36.57 PM.png" width="1618" height="630" data-path="images/moengage_3f5a30.png" />
2. **Personalize URL** をクリックすると、MoEngage の WYSIWYG (What-You-See-Is-What-You-Get) ビジュアルエディターを使用して Web ページをパーソナライズする次のステップに進みます。
3. バリエーションの横にある **Personalize** をクリックしてエディターを開きます。
   <img src="https://mintcdn.com/moengage/iCae3l_a7eOJMTbz/images/moengage_1e76e2.png?fit=max&auto=format&n=iCae3l_a7eOJMTbz&q=85&s=1575af0c16f27a28b79f5106fd46d3c0" alt="Screenshot 2024-07-26 at 10.42.43 PM.png" width="3196" height="906" data-path="images/moengage_1e76e2.png" />
4. ホームページのレイアウトを並べ替えることもできます。\\
   <iframe src="https://www.youtube.com/embed/2SDpRklIfy8" title="YouTube 動画プレーヤー" frameborder="0" className="w-full aspect-video rounded-xl" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />
5. **Next** をクリックして 3 番目のステップ "Schedule and goals" に移動し、エクスペリエンスのスケジュールとゴールを定義します。

## ステップ 3: スケジュールとゴール

1. **Send experience** セクションで **Active continuously** を選択し、このエクスペリエンスを開始および終了するタイミングを定義します。
   <img src="https://mintcdn.com/moengage/-uVFLyK4XoHTd5WE/images/moengage_117884.png?fit=max&auto=format&n=-uVFLyK4XoHTd5WE&q=85&s=cf4e53bb18f39f9c8e7226d60f5f6f1a" alt="image-20240120-130725.png" width="2878" height="1624" data-path="images/moengage_117884.png" />
2. **Conversion goals** セクションで、要件に応じてコンバージョンゴールを定義します。
3. **Delivery controls** で、**Experience Priority** ドロップダウンメニューから優先度を選択します。詳細については、[Create Experience](/docs/ja/user-guide/personalize/client-side-personalization/client-side-personalization/create-client-side-personalization-experience) を参照してください。
4. **Publish** をクリックします。

# まとめ

訪問者のホームページのレイアウトをパーソナライズしたら、[Personalize Analytics](/docs/ja/user-guide/personalize/client-side-personalization/client-side-personalization/experience-analytics) に移動して、エクスペリエンスのパフォーマンスを確認してください。