ランディングページの作成
ドラッグ＆ドロップエディターを使用してランディングページを作成およびカスタマイズし、Brazeで直接オーディエンスを拡大し、ユーザーの設定を収集する方法を学びましょう。
前提条件
ランディングページビルダーにアクセスするには、特定の権限が必要です。アクセスできない場合は、Braze管理者にお問い合わせください。
ランディングページの作成
ランディングページは、共有可能なURLを持つ公開済みのWebページで、顧客がアクセスできます。
ステップ1:新しい下書きを作成する
メッセージング > ランディングページに移動し、ランディングページを作成を選択します。既存のランディングページの名前を選択して、複製したり変更を加えたりすることもできます。
ステップ2:ページの詳細を入力する
ランディングページの整理、ブランディング、共有に役立つ内部向けおよび公開向けの詳細を追加します。
一般的な詳細
ランディングページの名前と説明を入力します。これらの詳細は、内部ワークスペースでページを検索するために使用されます。顧客には表示されません。
サイトの詳細
メタタグを設定して、ブラウザタブでのページの表示をカスタマイズし、検索エンジンの結果を最適化します。これらは顧客に表示されます。
以下のベストプラクティスに従うことをお勧めします。
| フィールド | 説明 | 推奨事項 |
|---|---|---|
| サイトタイトル | ブラウザタブに表示されるタイトルです。 | 60文字以内で使用してください。 |
| メタディスクリプション | 検索結果に表示されるテキストスニペットです。 | 140〜160文字で使用してください。 |
| ファビコン | ブラウザタブでサイトタイトルの横に表示されるアイコンです。 | アスペクト比1:1を使用し、サポートされているファイルタイプはPNG、JPEG、またはICOです。 |
| ページURL | ランディングページへのURLパスです。この値は、メッセージに埋め込むことができるランディングページLiquidタグを使用する際にも参照され、フォーム送信時にユーザーを自動的に識別します。 | この値はワークスペース全体で一意である必要があります。 |
ステップ3:ページをカスタマイズする
まだ保存していない場合は、下書きとして保存を選択します。ページのカスタマイズを開始するには、ランディングページを編集を選択します。ドラッグ＆ドロップエディターにデフォルトテンプレートがプリロードされ、ユースケースに合わせてカスタマイズできます。
エディターでは、ランディングページの構成に2種類のコンポーネントを使用します。基本ブロックとフォームブロックです。すべてのブロックは行内に配置する必要があります。各ブロックとプロパティの詳細なリファレンスについては、エディターブロック（ランディングページ）を参照してください。
これらのブロックを使用して、コンテンツを追加し、ランディングページのレイアウトをカスタマイズできます。
| ブロックタイプ | 説明 |
|---|---|
| タイトル | コンテンツに見出しやタイトルを追加するためのテキストブロックです。セクションの構造化と読みやすさの向上に役立ちます。 |
| 段落 | 長い説明や追加のコンテキストのためのテキストブロックです。リッチテキストフォーマットをサポートしています。 |
| ボタン | リンクを開いたりフォームを送信したりするなど、指定されたアクションにユーザーを誘導するクリック可能な要素です。 |
| ラジオボタン | ユーザーが1つを選択できるオプションのリストを追加します。送信されると、ユーザープロファイルに関連するカスタム属性が記録されます。 |
| 画像 | 画像を表示するためのブロックです。画像をアップロードするか、外部ソースを参照するURLを指定できます。 |
| リンク | ユーザーがクリックして指定されたURLに移動できるハイパーリンクです。テキスト内に埋め込むことも、単独で使用することもできます。 |
| スペーサー | 要素間に垂直方向のスペースを追加して、レイアウトと読みやすさを向上させる非表示のブロックです。 |
| カスタムコード | 高度なカスタマイズのために、カスタムHTML、CSS、またはJavaScriptを挿入して実行できるブロックです。 |
スパンテキスト
カスタムコードなしでテキストブロックに特定のスタイルを適用するには、スタイルを設定したいテキストをハイライトし、スタイル用のスパンでラップを選択します。
スパンプロパティを調整してテキストスタイルを更新します。以下が含まれます。
- フォントファミリー、ウェイト、サイズ
- 行の高さ
- 文字間隔
- テキストの配置と色
- ブロックのパディング
これらのブロックを使用して、ユーザーが送信したデータをBrazeのプロファイルにリンクするフォームを作成できます。フォームブロックを使用する場合は、確認状態用の追加のランディングページも作成する必要があることに注意してください。
| ブロックタイプ | 説明 |
|---|---|
| メールキャプチャ | メールアドレス用のフォームフィールドです。送信されると、メールアドレスがBrazeのそのユーザーのプロファイルに追加されます。 |
| 電話番号キャプチャ | 電話番号用のフォームフィールドです。送信されると、ユーザーはSMSまたはWhatsApp購読グループに登録されます。 |
| 入力フィールド | 標準属性項目（名や姓など）または任意のカスタム属性文字列をサポートするフォームフィールドです。 |
| ドロップダウン | ユーザーが事前定義されたリストからアイテムを選択できます。リストに任意のカスタム属性文字列を追加できます。 |
| チェックボックス | ユーザーがボックスにチェックを入れると、ブロックの属性がtrueに設定されます。チェックを入れない場合、属性はfalseに設定されます。 |
| チェックボックスグループ | ユーザーが複数の選択肢から選択できます。値は定義された配列カスタム属性に設定または追加されます。 |
フォーム付きのランディングページを作成した後、メッセージにランディングページLiquidタグを埋め込んでください。このタグにより、Brazeはフォーム送信時に既存のユーザープロファイルを自動的に識別して更新できます。
ページコンテナスタイル
ページコンテナタブから、ランディングページ内のすべての関連コンポーネントブロックに適用されるスタイルを設定できます。これらのスタイルは、特定のブロックでオーバーライドする場合を除き、ページ全体に適用されます。
ブロックレベルでスタイルをカスタマイズする前に、ページコンテナレベルのスタイルを設定することをお勧めします。ページ全体の背景画像を追加することもできます。
ユーザーデバイスへのレスポンシブ対応
小さな画面でカラムを垂直にスタックすることで、ランディングページをユーザーのデバイスサイズにレスポンシブ対応させることができます。これを有効にするには、レスポンシブにしたい行にカラムを追加し、カラムのカスタマイズセクションで小さな画面で垂直にスタックをオンに切り替えます。
有効にすると、スタックカラムの順序を逆にして、小さな画面でのマルチカラムコンテンツの垂直順序を制御することもできます。これにより、カスタムコードなしでモバイルでのページの見た目と操作感が向上します。
デバイス別に行やブロックを非表示にする
デスクトップとタブレット・モバイルでレイアウトを調整するには、キャンバス上の行またはブロックを選択し、プロパティパネルの Hide on トグルを使用して、Desktop または Tablet and smaller devices で非表示にします。非表示にした行やブロックは、ドラッグ＆ドロップエディターでページをプレビューする場合でも、ライブランディングページではでも、そのデバイスタイプには表示されません。
任意フィールドと必須フィールド
フォームフィールドを必須にするか任意にするかを選択できます。必須フィールドは、フォームを送信する前に入力する必要があります。任意フィールドは、ユーザーが空白のままにしたり未選択のままにしたりできます。
たとえば、フォーム送信前に同意の取得を強制するには、必須フィールド入力をオンにして、適切な免責事項テキストとともにチェックボックスを必須に設定できます。
ステップ4:確認ページを作成する（任意）
ランディングページにフォームが含まれていない場合は、次のステップに進んでください。
ランディングページにフォームが含まれている場合は、確認エクスペリエンスとして機能する2つ目のランディングページを作成します。このページでは、ユーザーに感謝を伝えたり、フォーム送信後の次のステップを提供したりする必要があります。
確認ページをリンクするには：
- フォームの送信ボタンを選択します
- Web URLを開くアクションを使用して確認ページにリンクします
確認ページを含めない場合、ユーザーはフォームが正常に送信されたことを知ることができない可能性があります。ジャーニーを完了するために、常に確認エクスペリエンスを含めてください。
確認ページが新しいタブで開く場合、元のランディングページに戻って更新された情報で再送信したユーザーは、以前の送信を上書きする可能性があり、データの不整合が生じることがあります。
ステップ5:ページをプレビューする
エディターのプレビュータブでランディングページをプレビューできます。ランディングページを下書きとして保存した後、ランディングページに移動し、ランディングページの横にあるURLをコピーを選択してURLにアクセスできます。URLを共同作業者と共有することもできます。
公開する前に、以下を確認してください。
- プランの公開ランディングページ数の上限を超えていないこと
- 各フォームベースのページがWeb URLを開くアクションを使用して確認ページにリンクされていること
- すべての必須ページフィールド（URLパスやタイトルなど）が入力されていること
準備ができたら、ランディングページを公開を選択します。
iOSおよびSafari（Safariの組み込みコントロールやサードパーティの拡張機能を含む）の積極的なポップアップブロッカーや広告ブロッカーは、フォームの送信ボタンが別のURLも開く場合（同じタブまたは新しいタブのいずれか）、ランディングページの動作に悪影響を与える可能性があります。
テンプレートの使用
ランディングページテンプレートは、ランディングページをより速く構築するための再利用可能なデザインの出発点です。テンプレートにはパブリックURLがなく、顧客がアクセスすることはできません。テンプレートからライブランディングページを作成するには、新しいランディングページを作成する際にテンプレートを選択し、必要に応じてカスタマイズしてから公開します。
テンプレートは、ランディングページエディターとランディングページテンプレートページ（コンテンツ > ランディングページ）の両方からアクセスおよび管理できます。ランディングページテンプレートには名前が必要で、説明は任意です。
テンプレートの管理
ランディングページテンプレートのプレビュー、アーカイブ、編集ができます。自分のランディングページテンプレート（Your Templatesにあるもの）は複製できますが、Brazeテンプレートは複製できません。ランディングページの編集時には、ランディングページをテンプレートとして保存したり、テンプレートを変更したり、ランディングページのコンテンツを削除したりできます。
分析の確認
ランディングページの効果を分析するには、メッセージング > ランディングページに移動し、公開済みのランディングページを選択します。ここでは、ランディングページのページビュー数、ページクリック数、ページ送信数、送信率を追跡できます。
フォーム送信エラーの処理
ユーザーが必須項目が未入力またはサポートされていない入力でフォームを送信しようとすると、一般的なエラーメッセージが表示され、送信できません。
一般的な原因：
- 必須フィールドが空白のまま
- テキスト入力に特殊文字が使用されている
- 必須チェックボックスが選択されていない
ユーザーに表示されるエラーメッセージはカスタマイズできません。公開前にランディングページをプレビューして、フィールドの動作を確認してください。