> ## 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 Personalization でのレコメンデーションの使用 > MoEngage の Web Personalization エクスペリエンスと Product grid ウィジェットを使用して、Web サイトにパーソナライズされた商品レコメンデーションを表示します。 Web Personalization エクスペリエンスにレコメンデーションを追加すると、全員に同じ商品を表示するのではなく、各訪問者に最も関連性の高い商品を表示できます。メッセージングチャネルとは異なり、Web Personalization チャネルでは Jinja を使用しません。ビジュアルエディターでページに **Product grid** ウィジェットを配置し、そこにレコメンデーションをマッピングします。 MoEngage では、Web Personalization エクスペリエンスの作成は 3 つのステップで行います。 1. Target users 2. Content 3. Schedule and Goals 2 番目のステップ「Content」で、レコメンデーションを使用してエクスペリエンスをパーソナライズできます。それでは、レコメンデーションを使用してパーソナライズした Web エクスペリエンスを作成してみましょう。 > [!WARNING] > > 目的のレコメンデーションが作成済みであることを確認してください。キャンペーンのパーソナライズには、アクティブなレコメンデーションのみを使用できます。[レコメンデーションの作成と管理](https://moengage.com/docs/ja/user-guide/content/recommendations)の方法を確認してください。 # 前提条件 Email や Push とは異なり、Web Personalization は自社の Web サイト上で表示されるため、パーソナライズするページで MoEngage Web SDK が稼働している必要があります。次の点を確認してください。 * レコメンデーション (プロダクトセット) が設定され、ユーザーアクションにマッピングされていること。[ユーザーアクション設定のマッピング](https://moengage.com/docs/ja/user-guide/content/recommendations/getting-started/map-user-actions-settings.md)を参照してください。 * パーソナライズする予定のすべてのページに MoEngage Web SDK がインストールされていること。これは、設定時に **Verify SDK setup** で確認します。 * パーソナライズする要素が、URL の条件に一致するすべてのページに存在すること。ページに要素がない場合、MoEngage はそのページでユーザーにパーソナライズを表示しません。 # レコメンデーションを使用した Web Personalization エクスペリエンスの作成 レコメンデーションを使用した Web Personalization エクスペリエンスを作成するには、次の手順を実行します。 1. MoEngage のサイドバーメニューで、**Personalize** > **All Experiences** をクリックし、**+ Experience** > **Web (WYSIWYG)** をクリックします。ステップ 1「Target users」に移動します。 ![All Experiences から Web WYSIWYG エクスペリエンスを作成している様子](https://mintcdn.com/moengage/7H2dU4CG2W0DQCPI/images/moengage_6e976d.png?fit=max\&auto=format\&n=7H2dU4CG2W0DQCPI\&q=85\&s=61c15762897cb39365902e0f95a0b8aa) 2. **Experience name** を入力し、後でこのエクスペリエンスを識別できるように **Experience Tags** を追加します。 ![エクスペリエンス名とタグを入力している様子](https://mintcdn.com/moengage/N1a7P_mcSpm-5bMa/images/moengage_59c3e0.png?fit=max\&auto=format\&n=N1a7P_mcSpm-5bMa\&q=85\&s=5304109991dab968eff0b7474c8b27b0) 3. **Target Audience** で **+ Add Audience** をクリックし、**+ New Audience** をクリックして、レコメンデーションを表示する対象を定義します。詳細については、[クライアントサイドのパーソナライズエクスペリエンスの作成](https://moengage.com/docs/ja/user-guide/personalize/client-side-personalization/client-side-personalization/create-client-side-personalization-experience.md)を参照してください。 ![エクスペリエンスのターゲットオーディエンスを定義している様子](https://mintcdn.com/moengage/60BzFdXTJDO5dnCb/images/moengage_3355c0.png?fit=max\&auto=format\&n=60BzFdXTJDO5dnCb\&q=85\&s=63dc09d2a26ef579f463ac3d39a86b76) 4. **Next** をクリックして、ステップ 2「Content」に進みます。**URL(s) to personalize** ダイアログボックスが表示されます。 ![URLs to personalize ダイアログボックス](https://mintcdn.com/moengage/fUSb9kG75-iJ0JuL/images/moengage_e55131.png?fit=max\&auto=format\&n=fUSb9kG75-iJ0JuL\&q=85\&s=5fc861e76f464dd315e408769803edda) 5. **URL** フィールドにパーソナライズする URL を入力し、**Verify SDK setup** をクリックします。 ![対象 URL で SDK の設定を確認している様子](https://mintcdn.com/moengage/o0kXRAcOq2mxzDnY/images/moengage_efdb41.png?fit=max\&auto=format\&n=o0kXRAcOq2mxzDnY\&q=85\&s=8244ab336204822bf5fee229deecf3a4) 6. **Personalize URL** をクリックして、エディターで Web サイトを開きます。 7. 作成するバリエーションの **Personalize** をクリックします。ビジュアルエディターが新しいタブでページを開きます。 ![パーソナライズするバリエーションを選択している様子](https://mintcdn.com/moengage/ME-DtlELD2N8TrcF/images/moengage_c00ac7.png?fit=max\&auto=format\&n=ME-DtlELD2N8TrcF\&q=85\&s=417b57541a079b8cbd2096738fa59d4e) 8. ページ上でレコメンデーションを表示する位置を選択し、**+ Add widget** をクリックします。右側に **Select widget** パネルが表示されます。 9. **Product grid** をクリックします。 ![ビジュアルエディターで Product grid ウィジェットを追加している様子](https://mintcdn.com/moengage/VqQHPleQ9qk_ZsLR/images/moengage_548e3f.png?fit=max\&auto=format\&n=VqQHPleQ9qk_ZsLR\&q=85\&s=fb479ab6bc74a7193d7f94f36a79b8c3) 10. **Choose your recommendation** リストから作成したレコメンデーションをクリックし、タイトル、価格、画像、リンクなど、グリッドに表示するアイテムの属性をマッピングします。グリッドの設定の詳細については、[Product Grid を使用してパーソナライズされた商品をレコメンドする](https://moengage.com/docs/ja/use-cases/personalize/recommend-personalized-products-using-product-grids.md)を参照してください。 11. **Next** をクリックして、ステップ 3「Schedule and Goals」に進みます。 12. **Send experience** セクションで **Active continuously** をクリックし、エクスペリエンスの開始日時と終了日時を定義します。 ![エクスペリエンスをスケジュールしている様子](https://mintcdn.com/moengage/P9B7WlDoMUnquME5/images/moengage_0a9446.png?fit=max\&auto=format\&n=P9B7WlDoMUnquME5\&q=85\&s=86b2f46c093f9e4b4d529416e7b272d5) 13. **Conversion goals** セクションで、エクスペリエンスのコンバージョン目標を定義します。 14. **Delivery controls** の **Experience Priority** リストで、優先度をクリックします。 15. **Publish** をクリックします。 **Default** 以外のすべてのバリエーションをパーソナライズできます。 # 関連記事 * [レコメンデーションを使用したコンテンツのパーソナライズ](https://moengage.com/docs/ja/user-guide/campaigns-and-channels/getting-started/message-personalization/personalize-content-using-recommendations.md) * [Product Grid を使用してパーソナライズされた商品をレコメンドする](https://moengage.com/docs/ja/use-cases/personalize/recommend-personalized-products-using-product-grids.md) * [Web サイトで最近閲覧した商品を表示する方法](https://moengage.com/docs/ja/use-cases/personalize/how-to-show-recently-viewed-products-on-website.md) * [Email でのレコメンデーションの使用](https://moengage.com/docs/ja/user-guide/content/recommendations/personalize-campaign-with-recommendations/using-recommendations-in-email.md) * [Push でのレコメンデーションの使用](https://moengage.com/docs/ja/user-guide/content/recommendations/personalize-campaign-with-recommendations/using-recommendations-in-push.md) This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.