[v7]{class="badge informative" title="Campaign Classic v7 に適用されます"} [v8]{class="badge positive" title="Campaign v8 にも適用されます"}

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

ランディングページの作成について about-landing-pages-creation

この使用例では、Adobe Campaign コンソールからランディングページを作成するためのデジタルコンテンツエディターの使用方法を示します。

Adobe Campaign でランディングページの設定を開始する前に、HTML ページに表示する 1 つ以上のテンプレート ​があることを確認します。

この使用例の主な目的は、DCE の機能を使用して、ランディングページフォームフィールドを Adobe Campaign の内部フィールドに対応させることです。

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

新しいランディングページタイプの Web アプリケーションを作成するには、次の手順を実行します。

  1. キャンペーン」タブに移動し、「Web アプリケーション」リンクをクリックして、「作成」ボタンをクリックします。

  2. 新しいランディングページ ​テンプレートを選択して、ラベルを入力し、「保存」をクリックします。

  3. 編集」タブをクリックします。

  4. 終了 ​アクティビティを削除します。

  5. ストレージ」アクティビティの後に「ページ」アクティビティを追加します。

  6. ページ 2 アクティビティを編集してから、「プロパティ」タブの「アウトバウンドトランジションを有効にする」オプションのチェックをオフにします。

  7. 変更を保存します。

その後は、次の順番になります。

NOTE
Web アプリケーションの作成について詳しくは、この節を参照してください。

手順 1 - テンプレートの選択と読み込み step-1---selecting-and-loading-templates

ここでは、Web アプリケーションの各ページの HTML コンテンツのインポート ​方法について見ていきます。

テンプレートには、次が含まれている必要があります。

  • HTML ファイル(必須)
  • 1 つ以上の CSS ファイル(オプション)
  • 1 つ以上の​ 画像(オプション)

テンプレートを最初のページに読み込むには、次の手順に従います。

  1. Web アプリケーションの最初の​ ページ ​アクティビティを開きます。

  2. ファイルから」を選択し、コンテンツテンプレートを取得します。

  3. 使用する HTML ファイルを選択します。

  4. 開く」をクリックしてインポートを開始します。

    読み込み中、共有ファイルのリストが表示されます。インポートシステムは、選択した HTML にリンクされたすべてのファイル(CSS、画像など)があることを確認します。

    インポートが終了したら、「閉じる」ボタンをクリックします。

    note caution
    CAUTION
    閉じる前に、「外部リソースのパブリッシュに成功しました。」というメッセージが表示されるまで待たなければなりません。
  5. プロパティ」タブをクリックします。

  6. 各ページの​ ラベル ​を入力します(例:1 ページ目 = 収集、2 ページ目 = ありがとうございます)。

Web アプリケーションに挿入された各ページについて、これらの手順を適用します。

CAUTION
DCE は、読み込んだ HTML ページの JavaScript を実行します。 HTML テンプレートの JavaScript エラーは、Adobe Campaign インターフェイスに表示されることがあります。これらのエラーは、エディターとは関係ありません。インポートしたファイルにエラーがないことを確認するには、ファイルを DCE にインポートする前に web ブラウザーでテストすることをお勧めします。

手順 2 - コンテンツの設定 step-2---configuring-the-content

ここでは、インポートしたコンテンツを調整し、データベースのフィールドを Web ページのフォームにリンクします。前に作成した Web アプリケーションを次に示します。

コンテンツの変更 modifying-content

最初に、ページの色を変更します。手順は次のとおりです。

  1. Collection ページを開きます。

  2. 背景をクリックします。

  3. 右側で「背景色」をクリックします。

  4. 新しい背景色を選択します。

  5. OK」をクリックして、変更を確定します。

  6. 同じ処理を適用して、ボタンの色を変更します。

フォームフィールドのリンク linking-form-fields

提供された情報を保存するために、ページのフィールドをデータベースのフィールドにリンクします。

  1. フォームフィールドを選択します。

  2. エディターの右側で「フィールド」セクションを編集します。

  3. 選択したフィールドにリンクするデータベースフィールドを選択します。

  4. ページの各フィールドについて、この処理を繰り返します。

フィールドを必須にできます。例えば、「メール」フィールドをクリックして、「必須」オプションを有効にします。

この手順は必須です。これは、Web アプリケーションが次の手順の順序を決定できるためです。収集したデータをデータベースに保存し、次のページ(「ありがとうございます」ページ)を表示します。

  1. を選択します。 送れ! ボタン コレクション ページに貼り付けます。

  2. アクション ​ドロップダウンメニューをクリックします。

  3. 次のページ ​アクションを選択します。

パーソナライゼーションフィールドの挿入 inserting-a-personalization-field

このステップでは、Thank you ページをパーソナライズします。手順は次のとおりです。

  1. Thank you ページを開きます。

  2. テキスト領域の受信者の名を挿入する場所にマウスポインターを置きます。

  3. ツールバーの​ 挿入 ​メニューで、「パーソナライゼーションフィールド」を選択します。

  4. 名を選択します。

パーソナライゼーションフィールドは、エディターで黄色い背景で示されます。

手順 3 - コンテンツの公開 step-3---publishing-content

コンテンツは、Web アプリケーションダッシュボードからパブリッシュされます。「パブリッシュ」ボタンをクリックして、実行します。

パブリッシュ中に、ログが表示されます。パブリッシュシステムは、Web アプリケーションで見つかったすべてのコンテンツを分析します。

NOTE
パブリッシュログでは、警告およびエラーがアクティビティごとに並べ替えられます。

これで、フォームが使用できます。フォームの URL は、アプリケーションダッシュボードでアクセスでき、受信者に送信できます。

recommendation-more-help
601d79c3-e613-4db3-889a-ae959cd9e3e1