コンテンツにスキップ

ランディングページのパーソナライズ

ランディングページでLiquidパーソナライゼーションを使用すると、ユーザープロファイルデータに基づいてコンテンツを動的にカスタマイズできます。たとえば、複数の静的ランディングページを管理することなく、さまざまなユーザー属性に基づいて見出しをパーソナライズできます。

Liquidの挿入

ドラッグ＆ドロップエディターでは、エディター内およびページやブロックの設定（右側のパネル）の両方でLiquidパーソナライゼーションを挿入できます。Liquidの実装手順については、専用のLiquidドキュメントをご覧ください。

Liquidパーソナライゼーションが追加されたランディングページエディター

プレビューとテスト

エディターでランディングページをプレビューする際、ランダムユーザー、既存ユーザー、またはカスタムユーザーとしてページを表示できます。

ただし、データテーブルまたはランディングページの詳細ページからランディングページをプレビューする場合は、ランダムユーザーとしてのみ表示できます。

パーソナライゼーションに関する考慮事項

パーソナライズされたランディングページで最適なパフォーマンスを維持するために、以下のサイズ制限に注意してください。

  • ランディングページの保存: サイズが500 KBを超えると、ページがサイズ制限を超えたことを示す警告メッセージが表示され、公開できない場合があります。
  • Liquidパーソナライゼーションでのレンダリング: 合計サイズは1 MBを超えてはなりません。超えた場合、Brazeによってページが自動的に非公開になることがあります。

ランディングページの非公開を回避する

ページがこれらのサイズ制限を超えた場合、制限を超え続けると非公開になる可能性があることを通知するメールが届きます。しきい値に達すると、ページは自動的に非公開になり、通知が届きます。

ページがサイズ制限を超えたり、読み込み時間が遅くなったりすることを防ぐために、以下の点に注意してLiquidパーソナライゼーションを使用してください。

  • 大規模なデータセットを継続的にループしたり参照したりしない。
  • Liquidブロック内で広範な数学的処理や条件分岐ロジックに依存しない。

さらに、大きなスクリプト、スタイルシート、base64エンコードされたアセットをランディングページのコードに直接埋め込むことは避けてください。これらのインラインアセットはページサイズの制限にカウントされ、レンダリングが遅くなる可能性があります。代わりに、フォント、画像、スタイルシート、スクリプトをメディアライブラリにアップロードしてください。メディアライブラリから配信されるアセットはBrazeのCDNでホストされるため、Liquidレンダリングの処理対象にならず、ページサイズの制限にカウントされません。

識別済みユーザーと匿名ユーザーにLiquidを使用する

Liquidを使用すると、識別済みの訪問者と匿名の訪問者の両方に対してランディングページの体験をカスタマイズできます。

  • 識別済みユーザー: Brazeメッセージからランディングページにリンクし、ランディングページのLiquidタグを含めます。これにより、ユーザーがBrazeプロファイルに関連付けられ、ページ体験がパーソナライズされます。
  • 匿名の訪問者: ランダムな数値や時間帯に応じた挨拶など、プロファイルに基づかない文脈に応じたコンテンツにLiquidを使用します。

フォームフィールドの事前入力

ランディングページのフォームフィールドがユーザープロファイル属性にマッピングされている場合、再訪問ユーザーに対してそのフィールドを事前入力できます。これにより、フォーム入力の手間が軽減され、既知の訪問者の完了率が向上します。

フォームフィールドの事前入力を使用するには:

  1. ドラッグ＆ドロップエディターでフォームフィールドを選択します。
  2. 右側の設定パネルで、フィールドを適切なプロファイル属性にマッピングします。
  3. ユーザープロファイルから事前入力を選択します。

ユーザープロファイルデータからの事前入力オプションが表示されたランディングページのフォームフィールド設定。

事前入力は識別済みユーザーに対してのみ機能します。匿名の訪問者の場合、フォームフィールドはデフォルトの状態を維持します。

  • 入力フィールド: プレースホルダーテキストが表示されます。
  • チェックボックス、ラジオボタン、および同様のコントロール: ユーザーが操作するまで未選択のままになります。

カスタムコードによる外部データの取得

カスタムコードブロックを使用して、外部エンドポイントからデータを取得し、ランディングページに表示できます。このアプローチではクライアント側（ユーザーのブラウザ）でリクエストを行うため、サーバーサイドレンダリングの遅延なくページがすばやく読み込まれます。

ユースケース

このパターンは、Brazeに保存されていないユーザー固有のデータを表示する必要がある場合に役立ちます。例としては、リアルタイムの在庫情報、パーソナライズされたレコメンデーション、組織が別のシステムで管理しているその他のデータなどがあります。

実装例

この例では、外部APIからユーザーデータを取得する方法を示しています。APIエンドポイントをご自身のセキュアなエンドポイントに置き換え、セキュアな識別子を使用してください。




<script>
window.onload = () => {
  // Use Liquid to template the user's external ID
  const userId = "{{${user_id}}}";

  const loadUserData = async () => {
    try {
      // Replace with your own secure API endpoint
      const response = await fetch(`https://your-api.example.com/user/${userId}`);

      if (!response.ok) {
        throw new Error('Failed to load data');
      }

      const data = await response.json();

      // Update the page with the fetched data
      document.querySelector("#user-data").textContent = JSON.stringify(data, null, 2);
      document.querySelector("#user-name").textContent = data.name || "User";
    } catch (error) {
      // Handle errors gracefully
      document.querySelector("#user-data").textContent = "Unable to load data at this time.";
    }
  };

  loadUserData();
};
</script>

<!-- Display area for fetched data -->
<p>Welcome, <span id="user-name">Loading...</span></p>
<pre id="user-data">Loading your information...</pre>

考慮事項

ランディングページで外部データを取得する際の注意点：

  • 読み込み状態：エンドポイントが応答するまで、ユーザーにはプレースホルダーテキストが表示されます。読み込みインジケーターやスケルトンスクリーンの追加を検討してください。
  • エラーハンドリング：エンドポイントが失敗したり応答が遅い場合、ページが壊れて見える可能性があります。適切なエラーメッセージとフォールバックを実装してください。
  • パフォーマンス：ページはすぐに読み込まれますが、データは外部リクエストが完了した後に表示されます。最適なユーザー体験のために、APIレスポンスを高速に保ってください。
  • セキュリティ：APIエンドポイントが識別子を検証し、ユーザーが閲覧を許可されたデータのみを返すようにしてください。不正利用を防ぐためにレート制限を実装してください。セキュアな識別子の選択に関するガイダンスについては、ユーザーID命名のベストプラクティスを参照してください。

フォールバックページ

ユーザーが非公開になったページにアクセスしようとすると、現在ページを読み込めないことを示すメッセージが表示されます。ページが非公開になる理由には以下が含まれます。

  • 複雑または不正なLiquidにより、レンダリング時間が長くなる場合
  • ユーザーのネットワークの問題
  • ランディングページの最大サイズ制限の超過

Brazeカスタマーエンゲージメントプラットフォームのドキュメント。

リソース
法的情報
会社情報
© 2026 Braze, Inc. All rights reserved.
Braze ステータスの確認
New Stuff!