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

ランディングページ機能を使用すると、デザインとコンテンツをAEMページにすばやく簡単に読み込むことができます。 Web 開発者は、HTMLと追加のアセットを準備して、完全なページまたはページの一部として読み込むことができます。 この機能は、限られた時間しかアクティブでなく、すばやく作成する必要があるマーケティングランディングページを作成する場合に役立ちます。

このページでは、以下について説明します。

読み込むためのデザインパッケージの準備については、を参照してください。 デザインインポーターの拡張と設定. Adobe Analyticsとの統合については、 ランディングページのAdobe Analyticsとの統合。

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

ランディングページは、電子メール、アドワード/バナー、ソーシャルメディアなど、マーケティングアウトリーチの「エンドポイント」となる単一または複数ページのサイトです。 ランディングページは様々な目的に使用できますが、共通点は 1 つあります。訪問者はタスクを実行し、ランディングページの成功を定義する必要があります。

AEMのランディングページ機能を使用すると、マーケターは、エージェントや社内のクリエイティブチームの Web デザイナーと連携して、AEMに簡単に読み込んで、引き続きマーケターが編集し、AEMを利用した他のサイトと同じガバナンスで公開できるページデザインを作成できます。

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

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

AEMのサンプルのランディングページを次に示します。

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

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

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

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

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

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

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

テキスト text

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

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

タイトル title

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

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

画像 image

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

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

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

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

コールトゥアクション (CTA) は、「今すぐ登録」、「このビデオを表示」、「制限時間のみ」など、ランディングページで訪問者に即時にアクションを実行させるために使用されます。

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

クリックスルーリンク click-through-link

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

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

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

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

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

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

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

グラフィックリンク graphical-link

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

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

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

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

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

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

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

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

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

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

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

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

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

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

リードフォームの各コンポーネントの目的は異なりますが、多くのコンポーネントは同様のオプションとパラメーターで構成されています。

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

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

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

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

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

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

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

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

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

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

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

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

リードフォームを追加した後、「 編集 をクリックします。

リードフォームの最初

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

新しいランディングページを作成するには：

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

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

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

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

デザインパッケージの準備が整ったら、次の手順でデザインパッケージをインポーターページに読み込む方法を説明します。

ランディングページの操作 working-with-landing-pages

ランディングページのデザインとアセットは、通常、デザイナーが ( 場合によってはAdobe PhotoshopやAdobe Dreamweaverなどのツールで ) 代理店に作成します。 デザインが完了すると、デザイナーはすべてのアセットを含む zip ファイルをマーケティングに送信します。 その後、マーケティングの連絡先は、zip ファイルをAEMにドロップしてコンテンツを公開します。

また、ランディングページの読み込み後に、コンテンツの編集や削除、コールトゥアクションコンポーネントの設定を行う際に、ランディングページを変更する必要が生じる場合があります。 最後に、マーケターはランディングページをプレビューし、ランディングページが公開されるようにキャンペーンをアクティブ化します。

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

デザインパッケージを読み込むと、ランディングページの上部で次のツールバーを使用できます。

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

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

読み込んだデザインパッケージをダウンロードするには、 Zip をダウンロード （[ ランディングページ ] ツールバー）

インポート情報の表示 viewing-import-information

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

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

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

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

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

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

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

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

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

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

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

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

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