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