ランディングページの作成と公開

マーケターは、アカウントおよび個人のジャーニーに組み込むページを定義して公開できます。 新しいランディングページを追加する場合、プライマリページとサブページを設定し、コンテンツをデザインしてテストし、公開します。

​ ランディングページワークフロー図

ランディングページの前提条件 landing-page-prerequisites

マーケターがジャーニーやキャンペーンをサポートするランディングページを作成する前に、次の設定とアセットを実施する必要があります。

  • ​ ランディングページサブドメイン ​ - ランディングページのホスティング専用のサブドメインを設定します。
  • ​ ランディングページプリセット ​ - プリセットは、ランディングページに適用されるサブドメインおよびその他の設定を定義します。
  • Form (データキャプチャのユースケースの場合) – ランディングページにフォームを埋め込み、Experience Platformにデータを送信する場合に必要です。

ランディングページの作成 create-landing-page

  1. 左側のナビゲーションに移動し、コンテンツ管理/ランディングページ​を選択します。

  2. 右上の「ランディングページを作成」をクリックします。

  3. ページに、便利な​タイトル (必須)と​説明 (オプション)を入力します。

    タイトルと説明基準:

    • タイトル – 最大100文字、一意にする必要があり、大文字と小文字を区別しない

    • 説明 – 最大300文字

    • Alpha、数値、特殊文字は使用できます

    • 予約済みの文字は​許可されていません: \ / : * ? " < > |

    ​ ランディングページの作成 {width="600"}

  4. プリセット​を選択します。

    製品管理者は、ランディングページに使用するサブドメインおよびその他の設定を定義するようにプリセット ​を設定します。 プリセットを選択し、プリセットを表示​をクリックしてプリセットの詳細を開き、設定を確認して、ランディングページの要件に一致していることを確認します。

  5. 作成」をクリックします。

    プライマリページとそのプロパティが表示されます。

    新しいランディングページ – プライマリページのプロパティ ​ {width="700" modal="regular"}

プライマリページの設定 configure-primary-page

  1. ニーズに応じて​ ページ名 ​を変更します。デフォルトでは​ プライマリページ ​です。

  2. ページ URLの終了部分を定義します。

    選択したプリセットによって、URLの最初の部分が決まります。

    note caution
    CAUTION
    ランディングページの URL は一意にする必要があります。
    公開済みの場合でも、この URL を web ブラウザーにコピー&ペーストするだけでランディングページにアクセスすることはできません。 プレビュー機能を使用してテストします。
  3. 匿名のランディングページが必要な場合は、特定のユーザーを要求 オプションを無効にします。

  4. カレンダー ​ カレンダーアイコン ​ )アイコンをクリックして、ページの有効期限​を設定します。

    有効期限を選択したら、ページの有効期限に応じてアクションを選択します。

    • リダイレクト URL - リダイレクトとして使用するページのURLを入力します。

      ​ ランディングページの有効期限 – リダイレクト URL {width="400"}

    • ブラウザーエラー - ページの代わりに表示するエラーテキストを入力します。

      ​ ランディングページの有効期限 – ブラウザーエラー {width="400"}

コンテンツデザインの種類を選択 choose-design-type

ページの​ Content ​を追加するには、Designerを開く​をクリックします。 プライマリランディングページを作成​するホームページが読み込まれ、デザインプロセスは、デザインの開始方法を選択することから始まります。

​ ランディングページデザインの開始方法を選択 {width="800" modal="regular"}

ランディングページのデザインを開始するための好みの方法を選択したら、ビジュアルデザインツールを使用して​ ページコンテンツを完成させます

ゼロからデザイン design-from-scratch

ビジュアルコンテンツエディターを使用して、ランディングページコンテンツの構造を定義します。 シンプルなドラッグ&ドロップ操作で構造コンポーネントを追加、移動することで、数秒でページコンテンツの形状をデザインできます。

  1. メインのランディングページを作成 ホームページから、ゼロからデザイン オプションを選択します。

  2. ページコンテンツのスタイルを管理する方法を選択します。

    • テーマを使用 – このオプションを選択すると、テーマモード​でページコンテンツを作成できます。 このモードでは、定義された​ ブランドテーマ ​を使用して、コンテンツのオーサリングプロセスを合理化し、デザインが定義された標準に準拠していることを確認できます。

    • 手動スタイル設定 – このオプションを選択すると、手動モード​でページコンテンツが作成されます。 このモードでは、空白のカンバスに追加するすべての構造およびコンテンツコンポーネントのスタイル設定を手動で設定します。

  3. 確認」をクリックします。

  4. 構造とコンテンツ ​をページに追加します。

独自のコーディング code-your-own

独自のコードを作成​すると、生のHTMLを書き込んだり貼り付けたりして、デザインスペースで直接ページコンテンツを作成できます。 このモードは、マークアップを完全に制御する必要がある場合に使用します。 このモードを使用するには、HTMLのスキルが必要です。

このモードを選択した後は、コードエディターに留まります。ビジュアルエディターに切り替えることはできません。

  1. プライマリランディングページの作成 ホームページから、独自のコード オプションを選択します。

  2. Raw HTML コードを入力または貼り付けます。

ページコンテンツを消去して新しいデザインから開始する場合は、オプションメニューから「デザインを変更」を選択します。

HTML の読み込み import-html

Adobe Journey Optimizer B2B editionでは、既存のHTML コンテンツを読み込んで、ランディングページをデザインできます。

読み込むコンテンツは次のとおりです。

  • スタイルシートが組み込まれたHTML ファイル

  • HTML ファイル、スタイルシート(.css)および画像を含む.zip ファイル

    note
    NOTE
    .zip ファイル構造に制限はありません。 ただし、.zip フォルダーのツリー構造に合わせて、相対参照を指定する必要があります。 画像は常に、接続されているMarketo Engage Assets リポジトリにアップロードされます。 Experience Manager Assetsで画像ファイルを管理する場合は、そのアプリインターフェイスで個別にアップロードし、電子メールデザインスペースの画像リンクを変更します。

HTML コンテンツを含むファイルを読み込むには​:

  1. テンプレートのデザイン ホームページから、HTMLの読み込み オプションを選択します。

  2. HTML コンテンツを含んだ HTML または .zip ファイルをドラッグ&ドロップし、「読み込み」をクリックします。

zip ファイルにhtml コンテンツを読み込む {width="500"}

NOTE
<table> タグを HTML ファイルの最初のレイヤーとして使用すると、上部レイヤータグの背景や幅の設定などのスタイルが失われる可能性があります。

ビジュアルデザイン機能を利用して、インポートしたコンテンツを必要に応じてパーソナライズできます。

テンプレートを選択 select-template

[Beta]{class="badge informative" title="Betaの機能"}

ランディングページテンプレートを使用する場合は、次の中から選択できます。

  • サンプルテンプレート. Journey Optimizer B2B editionのインターフェイスには、ランディングページデザインのベースとして使用できる、すぐに使用できるランディングページテンプレートのコレクションが用意されています。

  • 保存済みテンプレート. テンプレート メニューを使用して、組織のメンバーが作成した保存済みのカスタムテンプレートを使用します

デザインテンプレートを選択」セクションを使用して、テンプレートからコンテンツの作成を開始します。 サンプルテンプレートまたはJourney Optimizer B2B edition インスタンスから保存したカスタムランディングページテンプレートを使用できます。

保存されたテンプレート

プライマリランディングページの作成 ホームページには、デフォルトで「サンプルテンプレート」タブが表示されます。 カスタムテンプレートを使用するには、「保存したテンプレート」タブを選択します。

保存されたすべてのランディングページテンプレートのリストが表示されます。 名前最終変更日最終作成日​で並べ替えることができます。

保存したテンプレートを選択 {width="700" modal="regular"}

テンプレートのサムネールを選択してプレビューを表示します。 プレビューモードでは、右向き矢印と左向き矢印を使用して、1つのカテゴリのすべてのテンプレート(選択内容に応じてサンプルまたは保存済み)間を移動できます。

保存したテンプレートをプレビュー {width="800" modal="regular"}

表示が使用する内容と一致したら、プレビューウィンドウの右上にある「このテンプレートを使用」をクリックします。

このアクションにより、コンテンツがビジュアルデザイン空間にコピーされ、必要に応じてコンテンツを編集できます。

サンプルテンプレート

Adobe Journey Optimizer B2B editionには、すぐに使える​個のランディングページテンプレートが用意されており、独自のランディングページやランディングページテンプレートの作成に使用できます。

アラートの確認 check-alerts

ランディングページのコンテンツをデザインする際に、重要な設定が欠落している場合に右上にアラートが表示されます。

​ ページコンテンツの問題に関するアラート ​ {width="250"}

このボタンが表示されない場合、検出された問題はありません。

アラートには、次の2種類があります。

  • 推奨事項とベストプラクティスに関する​ 警告 ​は、次のとおりです。

    • Placeholder links are present in the landing page body: プレースホルダーを有効なリンクに置き換えることを忘れないでください。

    • Text version of HTML is empty: HTML コンテンツを表示できない場合に使用する、ページ本文のテキスト版を定義することを忘れないでください。

    • Empty link is present in page body: ページ内のすべてのリンクが正しいことを確認してください。

  • 解決されない限り、ジャーニー/キャンペーンのテストまたはアクティブ化を妨げる​ エラー ​が発生します。例えば、次のようになります。

    • The landing page content is empty: ページコンテンツは必須です。

ランディングページのテスト test-landing-page

ランディングページの設定とコンテンツが定義されている場合は、テストプロファイルを使用してページをプレビューできます。 ​ パーソナライズされたコンテンツ ​を挿入した場合、テストプロファイルデータを使用して、このコンテンツがランディングページにどのように表示されるかを確認できます。

PREREQUISITES
ランディングページをプレビューしてテストするには、メッセージを公開​権限と、​ テストプロファイル ​を含む定義済みデータセットが必要です。
  1. プレビューとテスト」をクリックして、テストプロファイルの選択を開きます。

    note
    NOTE
    ビジュアルデザイン空間にいる場合は、コンテンツをシミュレート​することもできます。
  2. Simulate​画面から、テストプロファイルを選択します。

    選択したプロファイルのランディングページコンテンツをシミュレート ​ {width="700" modal="regular"}

    必要なプロファイルがリストにない場合は、テストプロファイルの管理​をクリックして、既知の​ テストプロファイル ​のメールアドレスを使用し、リストに追加します。

    accordion
    テストプロファイルの追加

    ID名前空間​の場合、選択 ​ アイコンを選択 )アイコンをクリックし、プロファイルのテストに使用するEmail名前空間を選択します。

    ​ テストプロファイルを管理してメール ID名前空間を設定 {width="700" modal="regular"}

    ID値」フィールドに、テストプロファイルを識別する電子メールアドレスを入力し、プロファイルを追加​をクリックします。 これを繰り返して複数のプロファイルを追加できます。

    ​ テストプロファイルの管理プロファイルの追加 {width="700" modal="regular"}

    左上の後向き矢印をクリックして、シミュレーション ページに戻ります。

  3. プレビューを開く」を選択してランディングページをテストします。

    ランディングページのプレビューが新しいタブで開きます。 選択したテストプロファイルデータは、パーソナライズされた要素に置き換わります。

    ​ プロファイルデータを使用したランディングページのプレビュー {width="600"}

  4. ランディングページの各バリエーションに対してレンダリングをプレビューするには、別のテストプロファイルを選択します。

ページを公開 publish-landing-page

PREREQUISITES
ランディングページを公開するには、メッセージを公開​権限が必要です。 公開前に、すべてのアラートを確認して解決

ドラフトページが条件を満たしており、ジャーニーメッセージからページをリンクできるようにするには、右上の「公開」をクリックします。 確認ダイアログで、公開​をクリックします。

​ パブリッシュの確認ダイアログ ​ {width="250"}

ランディングページが公開されると、ランディングページリストに​公開済み ステータスで表示されます。 つまり、Adobe Marketo Engageがライブで動作し、ジャーニーを通じて送信される電子メール、SMS、WhatsApp メッセージで使用する準備ができていることを意味します。

公開されたランディングページにアクセスするには、URLをweb ブラウザーにコピー&ペーストする必要があります。 ​ プレビュー関数を使用して、いつでもテストできます。

特定のレポートを通じて、ランディングページの影響を監視できます。

recommendation-more-help
journey-optimizer-b2b-help-user