> ## 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 サイトをパーソナライズする方法

# はじめに

マーケターとして、ユーザーのアフィニティ (嗜好) に応じて Web サイトをパーソナライズし、ユーザーに関連性の高い商品を表示したいと考えるものです。これにより、コンバージョン率とユーザー満足度という 2 つの重要な指標を改善できます。

この記事では、MoEngage の User Affinity 機能と Web Personalization 機能を使用して、フィットネス愛好家向けに e コマース Web サイトのホームページをパーソナライズします。

# 期待される結果

ユーザーには、そのアフィニティに応じてパーソナライズされた Web ページが表示されます。

<img alt="image-20240120-190548.png" src="https://mintcdn.com/moengage/VqQHPleQ9qk_ZsLR/images/moengage_531b44.png?fit=max&auto=format&n=VqQHPleQ9qk_ZsLR&q=85&s=3433cd21b6cb0c383ce788bc3e8cfd5c" width="2880" height="1638" data-path="images/moengage_531b44.png" />

.

<Tip>
  * ユーザーが商品を検索する、商品をカートまたはウィッシュリストに追加する、購入を完了するといったアクションと、各アクションに関連するプラットフォーム、商品名、カテゴリ、ブランド、価格などの情報を追跡するイベントが必要です。イベントの追跡方法については、[Developer Guide](/docs/ja/developer-guide/introduction) を参照してください。
  * パーソナライズされた Web 体験を作成するために、MoEngage Web SDK を Web サイトに統合しておく必要があります。詳細については、[Web Personalization](/docs/ja/developer-guide/personalize-sdk/sdk-integration/web-personalization-v2) を参照してください。
  * ブラウザーで広告ブロッカーを無効にしておく必要があります。広告ブロッカーが有効になっていると、パーソナライズエディターが読み込まれません。
</Tip>

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

このセクションでは、ユーザーに Web サイトで体験してもらいたいパーソナライズされたエクスペリエンスを作成します。

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

1. 左側のサイドバーに移動して **Personalize** **>** **All Experiences** をクリックし、**+ Experience** をクリックするか、**+ Create new** > **Experience** > **Web** をクリックします。
   <img alt="UC-88.png" src="https://mintcdn.com/moengage/H6NVBgn3z5fYOOBq/images/moengage_7c44e0.png?fit=max&auto=format&n=H6NVBgn3z5fYOOBq&q=85&s=0a4e72151880bf2cf3d4cbbb110f19f8" width="1440" height="1288" data-path="images/moengage_7c44e0.png" />
   パーソナライズされたエクスペリエンスを定義する最初のステップである "Target users" に移動します。
2. 次の詳細を入力します。
   * **Experience name**: 作成するパーソナライズの名前です。例: "Dynamic Category Ordering"。
   * **Experience Tags**: 後で他のパーソナライズされたエクスペリエンスと区別できるように、ここにタグを追加します。
     <img alt="image-20240120-182822.png" src="https://mintcdn.com/moengage/geRh9DNA2GhPhrjA/images/moengage_f4db69.png?fit=max&auto=format&n=geRh9DNA2GhPhrjA&q=85&s=b73d8826db51e92c0b641f6de70775ac" width="2744" height="1512" data-path="images/moengage_f4db69.png" />
3. **Target Audience** で **+ Add Audience** をクリックし、**+ New Audience** をクリックしてターゲットオーディエンスを定義します。
   <img alt="image-20240120-114653.png" src="https://mintcdn.com/moengage/fQ0QnP2abFkVAzJ2/images/moengage_4d254d.png?fit=max&auto=format&n=fQ0QnP2abFkVAzJ2&q=85&s=cf6e497c31de63b8760558f708c7b33c" width="2774" height="828" data-path="images/moengage_4d254d.png" />
4. Add new audience ポップアップが表示されます。**Audience name** フィールドに名前を入力します。例: "Fitness Freaks"。
5. **Filter users by** オプションを選択し、**User Affinity** タブをクリックして、ユーザーのアフィニティに基づいてオーディエンスを定義します。\
   **<img alt="image-20240120-183120.png" src="https://mintcdn.com/moengage/UX7SFw6G5JwoHWFq/images/moengage_63f8ad.png?fit=max&auto=format&n=UX7SFw6G5JwoHWFq&q=85&s=ac6fb5f3fdb070465606f25011ad1a36" width="2744" height="1512" data-path="images/moengage_63f8ad.png" />**
6. この例では、アフィニティセグメントを次のように定義します。
   * 主に Fitness カテゴリで検索したユーザー
   * 主に Formals で検索したユーザー
   * 主に Shorts で検索したユーザー
7. イベント "Product Searched" を検索し、**Predominantly** を選択して Category を Fitness に設定し、**Add** をクリックします。ユーザーアフィニティセグメントとフィルターの詳細については、[こちら](/docs/ja/user-guide/segment/create-segments/affinity-segments)を参照してください。  **<img alt="image-20240120-183254.png" src="https://mintcdn.com/moengage/rmgWdhG7TCISpEIz/images/moengage_d67c9d.png?fit=max&auto=format&n=rmgWdhG7TCISpEIz&q=85&s=f04393a59e885225ee86b8c6e0b688fa" width="2880" height="1626" data-path="images/moengage_d67c9d.png" />**
8. 手順 3 から 7 を繰り返して、他の 2 つのカテゴリ "Formals" と "Shorts" を定義します。  **<img alt="image-20240120-184107.png" src="https://mintcdn.com/moengage/fUSb9kG75-iJ0JuL/images/moengage_e31044.png?fit=max&auto=format&n=fUSb9kG75-iJ0JuL&q=85&s=8ee0cf8fb9ce0a684c5a3b66674cd921" width="2760" height="1526" data-path="images/moengage_e31044.png" />**
9. **Next** をクリックして 2 番目のステップ "Content" に移動し、キャンペーンに含めるコンテンツを定義します。

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

1. 最初のステップ "Target users" で **Next** をクリックすると、URL(s) to personalize ポップアップが表示されます。これを使用して、定義したパーソナライズを Web サイトのどこに表示するかを定義できます。\
   **<img alt="image-20240120-115200.png" src="https://mintcdn.com/moengage/T-dEj4C-7pywzBS3/images/moengage_a168c7.png?fit=max&auto=format&n=T-dEj4C-7pywzBS3&q=85&s=e575d0c3240f297f3d304b6328caa305" width="2880" height="1622" data-path="images/moengage_a168c7.png" />**
2. Category メニューはほとんどの場合ホームページにのみ存在するため、**Single page** オプションを選択します。
3. **URL** フィールドに設定を行う URL を入力し、**Verify SDK setup** をクリックします。これにより、ページに SDK がインストールされているかどうかがチェックされます。
   <img alt="2.png" src="https://mintcdn.com/moengage/t9d2bz7zij1iE1iP/images/moengage_9e7fe4.png?fit=max&auto=format&n=t9d2bz7zij1iE1iP&q=85&s=8d050c464368fc39fc779ecd76428ccb" width="1276" height="428" data-path="images/moengage_9e7fe4.png" />
4. **Personalize URL** をクリックして、エディターで Web サイトを開きます。
   <img alt="3.png" src="https://mintcdn.com/moengage/wjYnJKL0xml-g3HM/images/moengage_479320.png?fit=max&auto=format&n=wjYnJKL0xml-g3HM&q=85&s=4d7504638c95216f098b1a327f15c2a3" width="1272" height="488" data-path="images/moengage_479320.png" />
5. ユーザーの分割、つまりこのエクスペリエンスのパーソナライズされたビューを何人のユーザーに表示するかを定義するよう求められます。
6. 必要に応じて **+ Variation** をクリックして複数のバリエーションを追加し、それぞれを定義します。 **<img alt="image-20240120-185728.png" src="https://mintcdn.com/moengage/N1a7P_mcSpm-5bMa/images/moengage_5acf31.png?fit=max&auto=format&n=N1a7P_mcSpm-5bMa&q=85&s=2fe83066af85c0241f1e0cfcabafac11" width="2762" height="1538" data-path="images/moengage_5acf31.png" />**
7. 目的のバリエーションの **Personalize** をクリックすると、新しいタブのエディターで Web サイトが開きます。\
   **注:** **Default** バリエーションを除くすべてのバリエーションでコンテンツをパーソナライズできます。\
   **<img alt="image-20240120-184443.png" src="https://mintcdn.com/moengage/rlD8iAX6JQFx0hql/images/moengage_b9ff26.png?fit=max&auto=format&n=rlD8iAX6JQFx0hql&q=85&s=183815f39b26de432642c0b576d8c567" width="2880" height="1624" data-path="images/moengage_b9ff26.png" />**
8. 読み込まれたページ内の任意の要素を選択して編集します。これにより、名前の編集から新しい要素の追加まで、さまざまな変更を行えます。
9. 要素を選択すると、次のボタンが表示されます。
   <img alt="Screenshot 2024-01-20 at 6.03.48 PM.png" src="https://mintcdn.com/moengage/rcvpxihxIp--_HSE/images/moengage_935515.png?fit=max&auto=format&n=rcvpxihxIp--_HSE&q=85&s=3b5dbfb637a898c17a202a73745ac611" width="398" height="58" data-path="images/moengage_935515.png" />
   **注:** このオプションはデフォルトのバリエーションを除くすべてのバリエーションで使用でき、バリエーションごとにコンテンツをパーソナライズできます。
10. この例では、2 番目のオプションを選択して、選択した要素を編集します。これにより HTML を編集し、HTML コードを使用してカテゴリ一覧の順序を変更できます。\
    **<img alt="image-20240120-184610.png" src="https://mintcdn.com/moengage/ME-DtlELD2N8TrcF/images/moengage_c2cad3.png?fit=max&auto=format&n=ME-DtlELD2N8TrcF&q=85&s=195f5394bc54f7124bfc8be24ae28cfb" width="2880" height="1624" data-path="images/moengage_c2cad3.png" />**\
    HTML コードの編集が完了すると、一覧は次のようになります。\
    **<img alt="image-20240120-190025.png" src="https://mintcdn.com/moengage/_eUNBDpGCEXI_sgZ/images/moengage_a5fdf1.png?fit=max&auto=format&n=_eUNBDpGCEXI_sgZ&q=85&s=b255b98eedd8b4dc7f46a82e6d5fcc59" width="2880" height="1628" data-path="images/moengage_a5fdf1.png" />**
11. 右上の **Save & exit** をクリックします。\
    **<img alt="image-20240120-185833.png" src="https://mintcdn.com/moengage/7H2dU4CG2W0DQCPI/images/moengage_6f1c3a.png?fit=max&auto=format&n=7H2dU4CG2W0DQCPI&q=85&s=1f3b7566a383c74a15c8817ecaa6d161" width="2880" height="1628" data-path="images/moengage_6f1c3a.png" />**\
    このタブが閉じ、MoEngage ダッシュボードのエクスペリエンス定義ページに戻ります。\
    **<img alt="image-20240120-190124.png" src="https://mintcdn.com/moengage/t9d2bz7zij1iE1iP/images/moengage_9e2bf2.png?fit=max&auto=format&n=t9d2bz7zij1iE1iP&q=85&s=cd1ca4ef2086b57b5e00938a7f90480a" width="2758" height="1532" data-path="images/moengage_9e2bf2.png" />**
12. 他のオーディエンスについても同じ操作をさらに 2 回行います。
13. **Next** をクリックして 3 番目のステップ "Schedule and goals" に移動し、エクスペリエンスのスケジュールとゴールを定義します。

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

1. **Send experience** セクションで **Active continuously** を選択し、このエクスペリエンスを開始および終了するタイミングを定義します。
   <img alt="image-20240120-130725.png" src="https://mintcdn.com/moengage/Deli0Qwc2s7oDHRm/images/moengage_94c523.png?fit=max&auto=format&n=Deli0Qwc2s7oDHRm&q=85&s=d9ba3a91058f61f22f9bab2aef1a24b6" width="2878" height="1624" data-path="images/moengage_94c523.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** をクリックします。

# まとめ

このユースケースでは、MoEngage の User Affinity 機能と Web Personalization 機能を使用して、フィットネス愛好家向けに e コマース Web サイトのホームページをパーソナライズしました。

パーソナライズされたエクスペリエンスを公開したら、[分析セクション](/docs/ja/user-guide/personalize/client-side-personalization/client-side-personalization/experience-analytics)に移動して、エクスペリエンスのパフォーマンスを確認してください。


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.