Skip to content

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

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

前提条件

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

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

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

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

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

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

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

全般的な説明

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

サイトの詳細

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

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

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

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

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

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

「行」と「フォームブロック」を含む「ビルド」エディターセクション。

基本ブロック

これらのブロックを使用して、コンテンツを追加したり、ランディングページのレイアウトをカスタマイズしたりできます。

スパンテキスト

To apply specific styling to text blocks without custom code, highlight the text you want to style and then select Wrap with span for style.

Text box with different stylized text sections, such as different font sizes and colors, and a highlighted section that displays a toolbar with the option to "Wrap with span for style".

Adjust the span properties to update your text styling, which includes:

  • Font family, weight, size
  • Line height
  • Letter spacing
  • Text alignment and color
  • Block padding

Span properties panel with different options to update.

フォームブロック

これらのブロックを使用して、ユーザーが送信したデータを Braze のプロファイルにリンクするフォームを作成できます。フォームブロックを使用する場合は、確認状態の追加のランディングページも作成する必要があります。

新規顧客を登録し、割引コードをメールに送信するフォームブロック。

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

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

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

背景画像、色、境界線の詳細、コンテンツスタイルをカスタマイズするオプションを持つ'Page container' セクション。

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

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

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

[必須の入力フィールド] トグルが選択されているチェックボックスフォームフィールド。

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

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

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

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

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

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

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

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

メニューが開き、[URL をコピー] オプションが表示されているランディングページ。

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

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

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

テンプレートの使用

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

テンプレートを管理する

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

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

分析を表示する

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

ランディングページの分析セクション。

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

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

一般的な原因:

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

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

Github   GitHub でこのページを編集
「このページはどの程度役に立ちましたか?」
New Stuff!