はじめに
魅力的なセールス体験を生み出すことは、顧客のコンバージョンを促進し、収益を伸ばすうえで非常に重要です。MoEngage の Landing Pages 機能を使用すると、ユーザーが商品を動的に閲覧して予約注文できる、パーソナライズされたランディングページを作成できます。ランディングページを使用してセールスページを作成するメリット
- 動的な商品表示: 商品はレコメンデーションを通じて商品カタログから自動的に取得されて表示されるため、手動で更新しなくても、ランディングページには常に最新の商品が表示されます。
- シームレスなユーザー体験: 顧客にとってスムーズな導線を実現し、1 つのランディングページから商品を閲覧して、各商品の特定のチェックアウトページに直接移動できます。
- 手作業の削減: カタログが変更されるたびに (たとえば、新商品の追加や価格・リンクの変更など)、ランディングページの商品一覧を手動で作成・更新する必要がなくなります。
- セールス効率の向上: 複数の商品を動的に紹介するプロセスを効率化し、ユーザーが商品を見つけて購入しやすくなるため、コンバージョンの向上が期待できます。
- 商品管理の一元化: MoEngage Catalogs を活用してすべての商品情報 (タイトル、画像、チェックアウトリンク) を 1 か所で管理し、一貫性を確保して更新を簡素化します。
期待される結果
動的なセールランディングページにアクセスしたユーザーは、レコメンデーションに基づいて商品を動的に閲覧できます。各商品には、商品タイトル、画像、Preorder now ボタンが表示されます。ボタンをクリックすると、カタログで指定されたそれぞれの商品のチェックアウトページに移動し、シームレスな購入体験が実現します。商品はレコメンデーションから動的に取得されるため、新商品の追加や既存商品の変更など、カタログへの更新は手動で編集しなくても即座にランディングページに反映されます。
ステップ 1: 商品カタログを作成する
- MoEngage ダッシュボードの左側のナビゲーションメニューで Content をクリックし、Catalogs をクリックします。
- Catalogs ページで Create Catalog をクリックします。
- Catalog name ボックスに、カタログを識別するための名前を入力し、Submit をクリックします。
- 次の列を含む CSV ファイルを用意します: title (商品名)、image_link (商品画像の URL)、link (商品のチェックアウトページにつながる URL。例: https://www.example.com/productA/checkouts)。フィードの例は次の画像のようになります。
- Catalogs ページで、新しく作成したカタログをクリックします。
- Add Feed をクリックします。Create feed ポップアップウィンドウが表示されます。
- コンピューターから CSV ファイルをアップロードし、Submit をクリックします。URL アップロードの使用方法については、Creating a Catalog を参照してください。
- アップロードが成功すると、アイテムフィードは次のようになります。
ステップ 2: レコメンデーションを作成する
このセクションでは、カタログのすべてのアイテムを表示するレコメンデーションを作成します。- MoEngage ダッシュボードの左側のナビゲーションメニューで Content をクリックし、Recommendations をクリックします。
- Recommendations ページで + Create recommendation をクリックします。
- Select recommendation model セクションでは、Item attributes タイプを使用します。レコメンデーションの詳細については、こちらを参照してください。
- Next をクリックします。
- レコメンデーションの名前と説明を入力します。
- Catalog リストで、ステップ 1 で作成したカタログを選択します。
- 以下のようにフィルターを設定します。
これにより、このレコメンデーションを使用したときにすべての商品が表示されるようになります。フィルターの使用方法の詳細については、こちらを参照してください。 - Create をクリックします。
ステップ 3: ランディングページを作成する
このセクションでは、埋め込み HTML 要素を含むランディングページを作成し、商品をグリッドレイアウトで動的に表示します。各商品には、チェックアウトページにリンクする Preorder now ボタンが付きます。- MoEngage ダッシュボードの左側のナビゲーションメニューで Content をクリックし、Landing pages をクリックします。
- Landing pages ページで Create a landing page をクリックします。
- 識別と管理がしやすいようにランディングページの名前を入力し、分類するための適切なタグを選択します。
- Content セクションで Blank Template をクリックします。
- ページに必要なテキストと画像を追加します。詳細については、Landing Page Editor を参照してください。
- エディターの左ペインから、“Embed” 要素をページにドラッグ＆ドロップします。この要素を使用すると、動的コンテンツ用のカスタム HTML コードを挿入できます。
- Embed 要素内で設定バーの最初のアイコンをクリックし、次の HTML コードを貼り付けます。その際、YOUR_RECOMMENDATION_NAME をレコメンデーション名 (例: LP_test) に置き換えます。
- 色やグリッドレイアウトの変更など、好みのデザインに合わせて Embed 要素内の CSS をカスタマイズします。たとえば、背景色を変更したり、グリッドの列を調整したりできます。
- 必要に応じて、テキストや画像 (ロゴなど) といった追加の要素を商品グリッドの上にドラッグ＆ドロップして、ランディングページの見栄えを向上させることができます。
- ランディングページの URL と設定を構成します。詳細については、Create a Landing Page を参照してください。
- Publish をクリックしてランディングページを公開します。ページは次のように表示されます。
検証
動的なセールランディングページが正しく機能していることを確認するには、次の手順を実行します。- 公開したランディングページにアクセスし、グリッドにカタログの商品が表示され、それぞれにタイトル、画像、正常に機能する Preorder now ボタンがあることを確認します。
- Preorder now をクリックし、カタログで指定したとおり、各商品の正しいチェックアウトページに移動することを確認します。