ランディングページ landing-pages

ランディングページ機能によって、デザインとコンテンツをすばやく簡単に、AEM ページに直接読み込むことができます。Web 開発者は、ページ全体またはページの一部分として読み込める HTML とその他のアセットを準備できます。この機能は、期間限定でアクティブにするマーケティングランディングページをすばやく作成する必要がある場合に有効です。

このページでは次の内容について説明します。

  • AEM でのランディングページの表示例(使用可能なコンポーネントを含む)
  • ランディングページの作成方法およびデザインパッケージの読み込み方法
  • AEM でのランディングページの使用方法
  • モバイルランディングページの設定方法

読み込むデザインパッケージの準備については、デザインインポーターの拡張と設定で説明します。Adobe Analytics との統合については、ランディングページと Adobe Analytics の統合で説明します。

CAUTION
ランディングページの読み込みに使用されていたデザインインポーターは、AEM 6.5 で廃止されました。
CAUTION
デザインインポーターは /apps にアクセスする必要があるので、/apps を変更できないコンテナ化されたクラウド環境では動作しません。

ランディングページとは what-are-landing-pages

ランディングページとは、メール、アドワーズやバナー、ソーシャルメディアといったマーケティング活動の「エンドポイント」となる単一または複数ページのサイトです。ランディングページは様々な用途に対応しますが、すべての用途で共通することは、訪問者がタスクを最後まで実行するとランディングページの成功と判断されることです。

AEM のランディングページ機能によって、マーケティング担当者が代理店の web デザイナーや社内のクリエイティブチームと共同作業してページデザインを作成できます。このページデザインは AEM に簡単に読み込むことができ、引き続きマーケティング担当者が編集し、AEM によるその他のサイトと同じガバナンスに基づいて公開することができます。

AEM では、次の手順を実行してランディングページを作成します。

  1. AEM で、ランディングページカンバスを含むページを作成します。AEM には「インポーターページ」というサンプルが同梱されています。

  2. HTML とアセットを準備します。

  3. リソースを ZIP ファイルにパッケージ化します。ここでは、このファイルを「デザインパッケージ」と呼びます。

  4. デザインパッケージをインポーターページに読み込みます。

  5. ページを編集し、公開します。

デスクトップランディングページ desktop-landing-pages

以下は、AEM のランディングページの例です。

chlimage_1-2

モバイルランディングページ mobile-landing-pages

ランディングページに、そのページのモバイルバージョンを作成することもできます。ランディングページのモバイルバージョンを個別に作成するには、読み込み時のデザインに index.htm(l)mobile.index.htm(l) という 2 つの HTML ファイルを含める必要があります。

このランディングページの読み込み手順は、通常のランディングページの読み込み手順と同じです。ランディングページデザインには、モバイルランディングページに対応する追加の HTML ファイルが含まれます。この HTML ファイルも、デスクトップランディングページの HTML と同様にキャンバス divid=cqcanvas を含める必要があり、デスクトップランディングページ用に記述されたすべての編集可能なコンポーネントがサポートされます。

モバイルランディングページはデスクトップランディングページの子ページとして作成されます。モバイルランディングページを開くには、web サイトでランディングページを表示し、子ページを開きます。

chlimage_1-22

NOTE
デスクトップランディングページが削除またはアクティベート解除されると、モバイルランディングページも削除またはアクティベート解除されます。

ランディングページのコンポーネント landing-page-components

読み込まれた HTML のパーツを AEM 内で編集可能にするために、ランディングページの HTML 内のコンテンツを直接 AEM コンポーネントにマッピングできます。デザインインポーターは、デフォルトで次のコンポーネントを認識します。

  • テキスト(あらゆるテキスト)

  • タイトル(H1~H6 タグ内のコンテンツ)

  • 画像(交換可能な仕様で作成された画像)

  • コールトゥアクション(CTA):

    • クリックスルーリンク
    • グラフィックリンク
  • CTA リードフォーム(ユーザー情報取得用)

  • 段落システム(Parsys)(あらゆるコンポーネントの追加や上記のコンポーネントの変換を可能にする)

さらに、デザインインポーターを拡張してカスタムコンポーネントに対応することもできます。このセクションでは、コンポーネントの詳細について説明します。

テキスト text

テキストコンポーネントを使用すると、WYSIWYG エディターを使用してテキストブロックを入力できます。詳しくは、テキストコンポーネントを参照してください。

chlimage_1-23

以下はランディングページのテキストコンポーネントの例です。

chlimage_1-24

タイトル title

タイトルコンポーネントを使用すると、タイトルを表示し、サイズ(h1~h6)を設定できます。詳しくは、タイトルコンポーネントを参照してください。

chlimage_1-25

以下はランディングページのタイトルコンポーネントの例です。

chlimage_1-26

画像 image

画像コンポーネントには画像が表示されます。この画像はコンテンツファインダーからドラッグ&ドロップするか、クリックしてアップロードできます。詳しくは、画像コンポーネントを参照してください。

chlimage_1-27

以下はランディングページの画像コンポーネントの例です。

chlimage_1-28

コールトゥアクション(CTA) call-to-action-cta

ランディングページデザインには、複数のリンクが含まれている場合があります。リンクの一部は「コールトゥアクション」を意図している場合があります。

コールトゥアクション(CTA)は、「今すぐ購読」、「このビデオを見る」、「期間限定」など、ランディングページで訪問者に行動を呼びかけるために使用します。

  • クリックスルーリンク:訪問者がクリックするとターゲット URL に移動するテキストリンクを追加できます。
  • グラフィックリンク:訪問者がクリックするとターゲット URL に移動する画像を追加できます。

両方の CTA コンポーネントに同様のオプションがあります。クリックスルーリンクには、追加のリッチテキストオプションがあります。次の段落で、これらのコンポーネントについて詳しく説明します。

この CTA コンポーネントを使用して、ランディングページにテキストリンクを追加できます。このリンクをクリックすると、コンポーネントプロパティで指定されたターゲット URL にユーザーを誘導できます。これは「コールトゥアクション」グループの一部です。

chlimage_1-29

ラベル:ユーザーに表示されるテキスト。リッチテキストエディターで書式設定を変更できます。

ターゲット URL:ユーザーがテキストをクリックした場合に訪問させる URI を入力します。

レンダリングオプション:レンダリングオプションを記述します。次の中から選択できます。

  • 新しいブラウザーウィンドウにページを読み込み
  • 現在のウィンドウにページを読み込み
  • 親フレームにページを読み込み
  • すべてのフレームをキャンセルしてフルブラウザーウィンドウにページを読み込み

CSS:「スタイル」タブで、CSS スタイルシートへのパスを入力します。

ID:「スタイル」タブで、コンポーネントを一意に識別する ID を入力します。

以下はクリックスルーリンクの例です。

chlimage_1-30

この CTA コンポーネントを使用して、リンク付きのグラフィック画像をランディングページに追加できます。画像は、単純なボタンでも、背景としての任意のグラフィック画像でもかまいません。画像をクリックすると、コンポーネントプロパティで指定されたターゲット URL にユーザーを誘導します。これは、コールトゥアクション ​グループの一部です。

chlimage_1-31

ラベル:グラフィック内でユーザーに表示されるテキスト。リッチテキストエディターで書式設定を変更できます。

ターゲット URL:ユーザーが画像をクリックした場合に訪問する URI を入力します。

レンダリングオプション:レンダリングオプションを記述します。次の中から選択できます。

  • 新しいブラウザーウィンドウにページを読み込み
  • 現在のウィンドウにページを読み込み
  • 親フレームにページを読み込み
  • すべてのフレームをキャンセルしてフルブラウザーウィンドウにページを読み込み

CSS:「スタイル」タブで、CSS スタイルシートへのパスを入力します。

ID:「スタイル」タブで、コンポーネントを一意に識別する ID を入力します。

以下はグラフィックリンクの例です。

chlimage_1-32

コールトゥアクション (CTA) リードフォーム call-to-action-cta-lead-form

リードフォームとは、訪問者(リード)のプロファイル情報を収集するために使用されるフォームです。この情報を保存し、後でその情報に基づいて効果的なマーケティングを行うことができます。この情報には、通常、タイトル、名前、メール、生年月日、住所、興味などがあります。これは、CTA リードフォーム ​グループの一部です。

CTA リードフォームの例を次に示します。

chlimage_1-33

CTA リードフォームは様々なコンポーネントで構成されます。

  • リードフォーム:リードフォームコンポーネント 、ページの新しいリードフォームの始まりと終わりを定義します。
    これらの要素の間に、その他のコンポーネント(メール ID、名など)を配置できます。

  • フォームのフィールドと要素
    フォームのフィールドと要素には、テキストボックス、ラジオボタン、画像などを含めることができます。多くの場合、ユーザーは、テキストの入力などのアクションをフォームフィールドで完了します。詳しくは、個々のフォーム要素を参照してください。

  • プロファイルコンポーネント
    プロファイルコンポーネントは、訪問者に合わせた個人設定が必要なソーシャルコラボレーションや他の領域に使用する、訪問者のプロファイルに関連しています。

前述のフォームの例は、リードフォーム ​コンポーネント(開始および終了)と、入力に使用される「」フィールドと「メール ID」フィールド、および「送信」フィールドで構成されています。

サイドキックから、次のコンポーネントを CTA リードフォームに使用できます。

chlimage_1-34

多くのリードフォームコンポーネントに共通の設定 settings-common-to-many-lead-form-components

リードフォームコンポーネントはそれぞれ目的が異なりますが、その多くは類似するオプションおよびパラメーターで構成されています。

いずれのフォームコンポーネントを設定する場合も、ダイアログ内の次のタブを使用できます。

  • タイトルとテキスト
    ここでは、コンポーネントのタイトルや付随するテキストなど、基本情報を指定する必要があります。適切な場合は、フィールドで複数選択が有効かどうかや、選択肢に使用できる項目など、その他の主要な情報を定義することもできます。

  • 初期値
    デフォルト値を指定できます。

  • 制約
    このタブでは、フィールドが必須かどうかを指定し、そのフィールドに制約を設定することができます(例えば、数値であることが必要など)。

  • スタイル設定
    フィールドのサイズとスタイル設定を示します。

NOTE
表示されるフィールドは、個々のコンポーネントによって異なります。
すべてのオプションがすべてのリードフォームコンポーネントで使用できるわけではありません。これらの共通設定について詳しくは、「フォーム」を参照してください。

リードフォームコンポーネント lead-form-components

次の節では、コールトゥアクションリードフォームで使用できるコンポーネントについて説明します。

バージョン情報:ユーザーが情報を追加できます。

chlimage_1-35

住所フィールド:ユーザーが住所情報を入力できます。このコンポーネントを設定する場合、ダイアログの「要素名」に入力する必要があります。「要素名」はフォーム要素の名前です。リポジトリー内でデータが格納される場所を示します。

chlimage_1-36

生年月日 ユーザーが生年月日情報を入力できます。

chlimage_1-37

メール ID ユーザーがメールアドレス(ID)を入力できます。

chlimage_1-38

ユーザーが名前(名)を入力できるフィールドを提供します。

chlimage_1-39

性別 ユーザーがドロップダウンリストから性別を選択できます。

chlimage_1-40

ユーザーが名前(姓)情報を入力できます。

chlimage_1-41

リードフォーム このコンポーネントを追加して、リードフォームをランディングページに追加できます。リードフォームには、「リードフォームの始まり」フィールドと「リードフォームの終わり」フィールドが自動的に含まれます。これらのフィールドの間に、ここで説明しているリードフォームコンポーネントを追加できます。

chlimage_1-42

リードフォームコンポーネントは、「フォーム開始」要素と「フォーム終了」要素を使用してフォームの開始と終了の両方を定義します。フォームが確実に正しく定義されるように、これらの要素は常にペアとして使用されます。

リードフォームを追加した後で、フォームの開始またはフォームの終了の設定を行うには、対応するバーの「編集」をクリックします。

リードフォームの最初

フォーム」と「詳細」の 2 つのタブを使用して設定できます。

chlimage_1-43

ありがとうページ 訪問者の入力を歓迎するために参照されるページ。空にすると、送信後にフォームが再表示されます。

ワークフローを開始 リードフォームが送信されるとトリガーされるワークフローを決定します。

chlimage_1-44

投稿オプション 次の投稿オプションがあります。

  • リードを作成
  • メールサービス:購読者を作成してリストに追加 - ExactTarget などのメールサービスプロバイダーを使用している場合に使用します。
  • メールサービス:自動応答メールを送信 - ExactTarget などのメールサービスプロバイダーを使用している場合に使用します。
  • メールサービス:リストからユーザーを登録解除 - ExactTarget などのメールサービスプロバイダーを使用している場合に使用します。
  • ユーザーの登録解除

フォーム識別子 フォーム識別子は、リードフォームを一意に識別するものです。1 つのページに複数のフォームがある場合、フォーム識別子を使用します。フォームごとに異なる識別子が使用されていることを確認します。

読み込み元パス 事前に定義された値をリードフォームフィールドに読み込むために使用されるノードプロパティのパスです。

リポジトリ内のノードへのパスを指定するオプションのフィールド。このノードにフィールド名と一致するプロパティがある場合、フォーム上の該当フィールドには、これらのプロパティの値が事前に読み込まれます。一致が存在しない場合、フィールドにはデフォルト値が使用されます。

クライアントの検証 このフォームでクライアントの検証が必須かどうかを示します(サーバーの検証は常に行われます)。この処理を実行するには、フォームキャプチャコンポーネントと組み合わせる必要があります。

検証リソースタイプ (個々のフィールドではなく)リードフォーム全体を検証する場合、フォームの検証リソースのタイプを定義します。

フォーム全体を検証する場合、次のいずれかも含めます。

  • クライアントの検証用スクリプト:
    /apps/<myApp>/form/<myValidation>/formclientvalidation.jsp

  • サーバー側の検証用スクリプト:
    /apps/<myApp>/form/<myValidation>/formservervalidation.jsp

アクションの設定「投稿オプション」での選択によって、「アクションの設定」の内容が変わります。例えば、「リードを作成」を選択した場合、リードの追加先とするリストを設定できます。

chlimage_1-45

  • 「送信」ボタンを表示
    「送信」ボタンを表示するかどうかを示します。

  • 名前を送信
    1 つのフォームに複数の「送信」ボタンを使用する場合の識別子。

  • タイトルを送信
    「送信」や「送る」など、ボタンに表示される名前。

  • 「リセット」ボタンを表示
    「リセット」ボタンを表示するには、このチェックボックスを選択します。

  • タイトルをリセット
    「リセット」ボタンに表示する名前。

  • 説明
    ボタンの下に表示する情報。

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

ランディングページを作成する場合、次の 3 つの手順を実行する必要があります。

  1. インポーターページを作成します。
  2. 読み込む HTML を準備します。
  3. デザインパッケージを読み込みます。

デザインインポーターの使用 use-of-the-design-importer

ページの読み込みには、HTML の準備、検証、ページのテストが必要になるので、ランディングページの読み込みは管理タスクとして実行することを想定しています。読み込みを実行する管理者ユーザーには、/apps に対する読み取り、書き込み、作成および削除の権限が必要です。ユーザーにこれらの権限がない場合、読み込みは失敗します。

NOTE
デザインインポーターは、/apps に対する読み取り、書き込み、作成および削除の権限が必要な管理ツールとして使用することを意図しているので、実稼動環境で使用することはお勧めしません。

アドビでは、ステージングインスタンスでデザインインポーターを使用することをお勧めします。ステージングインスタンスでは、実稼働インスタンスへのコードのデプロイを担当する開発者が、読み込みのテストおよび検証を行うことができます。

インポーターページの作成 creating-an-importer-page

ランディングページデザインを読み込む前に、キャンペーンなどにインポーターページを作成する必要があります。インポーターページテンプレートを使用して、HTML ランディングページ全体を読み込むことができます。このページにはドロップボックスが含まれていて、ドラッグ&ドロップによってこのボックスにランディングページデザインパッケージを読み込むことができます。

NOTE
デフォルトでは、インポーターページはキャンペーンの配下にしか作成できませんが、/content/mysite の配下にランディングページを作成するために、このテンプレートをオーバーレイすることもできます。

ランディングページを作成するには:

  1. Web サイト ​コンソールに移動します。

  2. 左側のウィンドウでキャンペーンを選択します。

  3. 新規」をクリックして、ページを作成 ​ウィンドウを開きます。

  4. インポーターページ」テンプレートを選択して、タイトルと名前(オプション)を追加し、「作成」をクリックします。

    chlimage_1-1-1

    新しいインポーターページが表示されます。

読み込み用の HTML の準備 preparing-the-html-for-import

デザインパッケージを読み込む前に、HTML を準備する必要があります。詳しくは、デザインインポーターの拡張と設定を参照してください。

デザインパッケージの読み込み importing-the-design-package

インポーターページが作成されたら、そのページにデザインパッケージを読み込むことができます。デザインパッケージの作成とその推奨される構造について詳しくは、デザインインポーターの拡張と設定で説明します。

次の手順では、デザインパッケージの準備ができているものとして、デザインパッケージをインポーターページに読み込む方法を説明します。

  1. 前に作成したインポーターページを開きます。

    chlimage_1-46

  2. デザインパッケージをドロップボックスにドラッグ&ドロップします。パッケージがこのボックスにドラッグされたとき、矢印の方向が変わります。

  3. ドラッグ&ドロップを行うと、インポーターページの代わりにランディングページが表示されます。HTML ランディングページが正常に読み込まれました。

    chlimage_1-2-1

NOTE
読み込み時に、セキュリティ上の理由から、および無効なマークアップが読み込まれて公開されないようにする目的で、マークアップの不要部分が削除されます。この場合、HTML のみのマークアップと、その他のあらゆる形式の要素(インライン SVG や web コンポーネントなど)が除外されます。
NOTE
デザインパッケージの読み込みで問題が発生した場合は、トラブルシューティングを参照してください。

ランディングページの使用 working-with-landing-pages

ランディングページに使用するデザインおよびアセットは通常、(おそらく代理店の)デザイナーが、使い慣れている Adobe Photoshop や Adobe Dreamweaver などのツールで作成します。デザインが完成すると、デザイナーはすべてのアセットを含めた zip ファイルをマーケティング部門に送信します。そして、マーケティング部門の担当者は zip ファイルを AEM にドロップし、コンテンツを公開します。

さらにデザイナーは、ランディングページの読み込み後に、コンテンツを編集または削除したりコールトゥアクションコンポーネントを設定したりして、ランディングページを変更する必要があります。最後に、マーケティング担当者はランディングページをプレビューしてからキャンペーンをアクティベートすることで、ランディングページの公開を確実に行うことができます。

ここでは、次の操作を行う方法について説明します。

デザインパッケージを読み込むと、デザインをクリア ​および​ 読み込まれた zip ファイルをダウンロード ​が、ページの設定メニューで使用できます。

chlimage_1-3-1

読み込まれたデザインパッケージのダウンロード downloading-the-imported-design-package

zip ファイルをダウンロードすると、特定のランディングページでどの zip ファイルが読み込まれたかを記録できます。ただし、ページ上で行った変更は zip ファイルに追加されません。

読み込まれたデザインパッケージをダウンロードするには、ランディングページツールバーで「Zip ファイルをダウンロード」をクリックします。

読み込み情報の表示 viewing-import-information

クラシックユーザーインターフェイスのランディングページの上部にある青い感嘆符をクリックすると、最後に行われた読み込みに関する情報をいつでも表示できます。

chlimage_1-47

読み込まれたデザインパッケージに問題がある場合(例えばパッケージ内に存在しない画像またはスクリプトが参照されている場合など)、デザインインポーターはこれらの問題をリスト形式で表示します。問題のリストを表示するには、クラシックユーザーインターフェイスで、ランディングページツールバーの問題リンクをクリックします。次の画像では、「問題」リンクをクリックすると、読み込みの問題ウィンドウが開きます。

chlimage_1-3

ランディングページのリセット resetting-a-landing-page

ランディングページデザインパッケージに変更を加えた後で再度読み込む場合は、クラシックユーザーインターフェイスのランディングページの上部にある「消去」をクリックするか、タッチ最適化ユーザーインターフェイスの設定メニューで「消去」をクリックして、ランディングページを「消去」することができます。「消去」をクリックすると、読み込まれたランディングページが削除され、空白のインポーターページが作成されます。

ランディングページの消去時にコンテンツの変更内容を削除することができます。「いいえ」をクリックすると、コンテンツの変更内容は保持されます。つまり、jcr:content/importer の構造は保持され、インポーターページコンポーネントと etc/design 内のリソースのみが削除されます。「はい」をクリックすると、jcr:content/importer も削除されます。

NOTE
コンテンツの変更内容を削除する場合、「消去」をクリックすると、読み込まれたランディングページ上で行われたすべての変更、およびすべてのページプロパティが失われます。

ランディングページ上のコンポーネントの変更と追加 modifying-and-adding-components-on-a-landing-page

ランディングページのコンポーネントを変更するには、コンポーネントをダブルクリックして開き、他のコンポーネントと同様に編集します。

ランディングページにコンポーネントを追加するには、クラシックユーザーインターフェイスのサイドキックまたはタッチ操作向けユーザーインターフェイスのコンポーネントウィンドウから、ランディングページにコンポーネントをドラッグ&ドロップし、必要に応じて編集します。

NOTE
ランディングページ上のコンポーネントを編集できない場合は、HTML ファイルを変更後、zip ファイルを再度読み込む必要があります。つまり、編集不可能なパーツは、読み込み時に AEM コンポーネントに変換されなかったものです。

ランディングページの削除 deleting-a-landing-page

ランディングページの削除は、通常の AEM ページの削除と似ています。

唯一の例外は、デスクトップのランディングページを削除すると、対応するモバイルのランディングページ(存在する場合)も削除されますが、その逆はないという点です。

ランディングページの公開 publishing-a-landing-page

通常のページの公開と同様に、ランディングページとその依存関係をすべて公開できます。

NOTE
デスクトップランディングページを公開すると、対応するモバイルバージョン(存在する場合)も公開されます。ただし、モバイルランディングページを公開しても、デスクトップバージョンは公開されません。
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2