ランディングページの作成

ドラッグアンドドロップエディタを使用してランディングページを作成およびカスタマイズする方法について説明します。これにより、視聴者を拡大し、Braze で直接環境設定を収集できます。

前提条件

ランディングページビルダにアクセスするには、特定の権限 が必要です。アクセスできない場合は、Braze 管理者にサポートを依頼してください。

ランディングページの作成

ステップ1:新規ドラフトの作成

メッセージング> ランディングページに進み、ランディングページを作成を選択します。既存のランディングページの名前を選択して、複製または変更することもできます。

!Braze ダッシュボードのランディングページセクション。

ステップ 2: ページ詳細を入力

ランディングページを整理、ブランディング、共有するのに役立つ、社内および社外向けの詳細情報を追加します。

全般的な説明

ランディングページの名前と説明を入力します。これらの詳細は、内部ワークスペースでページを検索するために使用されます。これらは顧客に対しては表示されません。

サイトの詳細

メタタグを設定して、ブラウザタブに表示されるページの外観をカスタマイズし、検索エンジンの結果を最適化します。これらは顧客に表示されます。

これらのベストプラクティスに従うことをお勧めします:

フィールド	説明	おすすめ
サイトのタイトル	ブラウザタブに表示されるタイトル。	最大 60 文字を使用できます。
メタディスクリプション	検索結果に表示されるテキストスニペット。	140 〜 160文字を使用できます。
ファビコン	ブラウザタブのサイトタイトルの横に表示されるアイコン。	アスペクト比を1:1にし、サポートされているファイルタイプはPNG、JPEG、またはICOにしてください。
ページ URL	これはランディングページへのURL パスです。この値は、ランディングページのリキッドタグ を使用する場合にも参照されます。このタグは、フォームを送信したときに自動的に識別するためにメッセージに埋め込むことができます。	この値は、ワークスペース全体で一意である必要があります。

ステップ 3:ページのカスタマイズ

まだ使用していない場合は、下書きとして保存を選択します。ページのカスタマイズを開始するには、ランディングページの編集を選択します。ドラッグアンドドロップエディタには、ユースケースに合わせてカスタマイズできるデフォルトテンプレートがプリロードされます。＾ー＠＾￥「＾ー＠＾￥「

!ドラッグアンドドロップエディタで作成されるランディングページの例。

エディタでは、ランディングページ構成に基本ブロックs とフォームブロックs の2 種類のコンポーネントを使用します。すべてのブロックは行に配置する必要があります。

«««< HEAD ======= !‘Rows’ と’Form Blocks’ を含む’Build’ セクション。

main

• basic blocks
• form blocks

ページコンテナのスタイル

Page container タブから、ランディングページの関連するすべてのコンポーネントブロックに適用するスタイルを設定できます。これらのスタイルは、特定のブロックで上書きする場合を除き、ページのどこにでも使用されます。

ブロックレベルでスタイルをカスタマイズする前に、ページコンテナレベルのスタイルを設定することをお勧めします。ページ全体にバックグラウンド画像を追加することもできます。

«««< HEAD ======= !‘Page container’セクション。バックグラウンド “画像、カラー、ボーダーの詳細、コンテンツスタイルをカスタマイズできます。

main

ユーザー対応

小さなスクリーンに縦方向に列を重ねることで、ユーザーの装置の大きさに合わせてランディングページをレスポンシブにできます。これを有効にするには、レスポンシブを作成する行に列を追加し、**カラムのカスタマイズセクションの小さいスクリーンに垂直に重ねます。

有効にすると、列を逆スタックして、複数列の内容の縦方向の順序を小さなスクリーンにコントロールすることもできます。これにより、カスタマイズされたコードを使用せずに、モバイルでページの外観と操作性が向上します。

«««< HEAD ======= !” より小さな画面に垂直に重ねる” “ 列をカスタマイズ” セクションで切り替えます。

main

オプションフィールドと必須フィールド

フォームフィールドを必須またはオプションのいずれにするかを選択できます。フォームを送信する前に、必須フィールドに入力する必要があります。オプションのフィールドは、ユーザーが空白のままにしたり、選択しなくてもよいようにできます。

たとえば、フォーム送信前に同意取得を実施するには、必須フィールド入力をオンにして、適切な免責条項テキストで必須のチェックボックスを設定します。

«««< HEAD ======= !チェックボックスフォームフィールドで”必須入力フィールド”選択を切り替えます。

main

ステップ 4: 確認ページの作成(オプション)

ランディングページにフォームが含まれていない場合は、次の手順に進みます。

ランディングページにフォーム が含まれている場合は、確認体験として機能する2 番目のランディングページを作成します。このページでは、フォームの送信後にユーザーに感謝のメッセージを表示するか、次のステップを提示する必要があります。

確認ページをリンクするには、次のようにします。

• フォームのSubmitボタンを選択します
• [Web URL を開く] アクションを使用して確認ページにリンクします

確認ページを含めない場合、フォームが正常に送信されたことをユーザーが把握できない可能性があります。ジャーニーを完了するために、必ず確認エクスペリエンスを組み込んでください。

ステップ 5: ページをプレビューする

エディターのプレビュータブでランディングページをプレビューできる。ランディングページを下書きとして保存した後、ランディングページにアクセスして、ランディングページの横にあるURLをコピーを選択することで、URLにアクセスできます。共同作業者とURLを共有することもできます。

«««< HEAD ======= !メニュー開封を含むランディングページ。”URL”オプションを表示します。

main

公開する前に、次のことを確認してください。

• プランの公開されているランディングページの制限を超えていない
• 各フォームベースのページリンクは、Open web URLアクションを使用して、確認ページにリンクします
• 必要なすべてのページフィールド(URL パスやタイトルなど)が完了している

準備ができたら、[ランディングページを公開] を選択します。

テンプレートの使用

ランディングページテンプレートを使用して、次のキャンペーンのテンプレートを作成します。これらのテンプレートは、ランディングページエディタとダッシュボードのTemplates セクション(Templates > ランディングページテンプレート) の両方でアクセスおよび管理できます。ランディングページテンプレートには名前が必要で、オプションで説明が必要です。

テンプレートを管理する

ランディングページテンプレートは、プレビュー、アーカイブ、編集、複製できます。ランディングページを編集するときに、ランディングページをテンプレートとして保存したり、テンプレートを変更したり、ランディングページの内容を削除したりすることもできます。

!ランディングページを保存、変更、削除するオプションを含むドロップダウン。

分析を表示する

ランディングページの有効性を分析するには、Messaging> Landing Pagesに移動し、公開したランディングページを選択します。ここでは、ページビュー数、ページクリック数、ページ送信数、ランディングページの送信率を追跡できます。

«««< HEAD ======= !ランディングページの分析部分。

main

フォーム送信エラーの処理

ユーザーが入力がないかサポートされていないフォームを送信しようとすると、一般的なエラーメッセージが表示され、送信できなくなります。

一般的な原因:

• 必須フィールドが空白のままである
• テキスト入力では特殊文字が使用されます
• 必須チェックボックスが選択されていない

ユーザーに表示されるエラーメッセージはカスタマイズできません。ランディングページをプレビューして、公開前にフィールドの動作を確認します。