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

ランディングページの作成について

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

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

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

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

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

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

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

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

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

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

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

  7. 変更を保存します。

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

メモ

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

手順 1 - テンプレートの選択と読み込み

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

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

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

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

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

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

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

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

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

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

    注意

    閉じる前に、「外部リソースのパブリッシュに成功しました。」というメッセージが表示されるまで待たなければなりません。

  5. 「プロパティ」タブをクリックします。

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

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

注意

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

手順 2 - コンテンツの設定

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

コンテンツの変更

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

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

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

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

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

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

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

フォームフィールドのリンク

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

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

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

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

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

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

次のページへのリンクの作成

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

  1. Collection ページの「Send it!」ボタンを選択します。

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

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

パーソナライゼーションフィールドの挿入

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

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

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

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

  4. 名を選択します。

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

手順 3 - コンテンツの公開

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

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

メモ

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

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

このページ