ランディングページ機能を使用すると、デザインとコンテンツをすばやく簡単に、AEM ページに直接読み込むことができます。Web 開発者は、ページ全体またはページの一部分として読み込める HTML とその他のアセットを準備できます。この機能は、期間限定でアクティブにするマーケティングランディングページをすばやく作成する必要がある場合に有効です。
このページでは次の内容について説明します。
- AEM でのランディングページの表示例（使用可能なコンポーネントを含む）
- ランディングページの作成方法およびデザインパッケージの読み込み方法
- AEM でのランディングページの使用方法
- モバイルランディングページの設定方法
読み込むデザインパッケージの準備については、デザインインポーターの拡張と設定で説明します。Adobe Analytics との統合については、「ランディングページと Adobe Analytics の統合」で説明します。
注意：
AEM にはデザインインポーターは同梱されません。これは、パッケージシェアを介して AEM へのアドオンとして使用でき、使用するにはインストールする必要があります。
ランディングページとは、電子メール、アドワーズやバナー、ソーシャルメディアといったマーケティング活動の「エンドポイント」となる単一または複数ページのサイトです。ランディングページは様々な用途に対応しますが、すべての用途で共通することは、訪問者がタスクを最後まで実行するとランディングページの成功と判断されることです。
AEM のランディングページ機能によって、マーケティング担当者が代理店の Web デザイナーや社内のクリエイティブチームと共同作業してページデザインを作成できます。このページデザインは AEM に簡単に読み込むことができ、引き続きマーケティング担当者が編集し、AEM によるその他のサイトと同じガバナンスに基づいて公開することができます。
AEM では、次の手順を実行してランディングページを作成します。
- AEM で、ランディングページキャンバスを含むページを作成します。AEM には「インポーターページ」というサンプルが同梱されています。
- HTML とアセットを準備します。
- リソースを ZIP ファイルにパッケージ化します。ここでは、このファイルを「デザインパッケージ」と呼びます。
- デザインパッケージをインポーターページにインポートします。
- ページを編集し、公開します。
ランディングページに、そのページのモバイルバージョンを作成することもできます。ランディングページのモバイルバージョンを個別に作成するには、読み込み時のデザインに index.htm(l) と mobile.index.htm(l) という 2 つの HTML ファイルを含める必要があります。
このランディングページの読み込み手順は、通常のランディングページの読み込み手順と同じです。ランディングページデザインには、モバイルランディングページに対応する追加の HTML ファイルが含まれます。この HTML ファイルも、デスクトップランディングページの HTML と同様にキャンバス div と id=cqcanvas を含める必要があり、デスクトップランディングページ用に記述されたすべての編集可能なコンポーネントがサポートされます。
モバイルランディングページはデスクトップランディングページの子ページとして作成されます。モバイルランディングページを開くには、「Web サイト」でランディングページを表示し、子ページを開きます。
注意：
デスクトップランディングページが削除またはアクティベート解除されると、モバイルランディングページも削除またはアクティベート解除されます。
読み込まれた HTML のパーツを AEM 内で編集可能にするために、ランディングページの HTML 内のコンテンツを直接 AEM コンポーネントにマッピングできます。デザインインポーターは、デフォルトで次のコンポーネントを認識します。
- テキスト（あらゆるテキスト）
- タイトル（H1 ～ H6 タグ内のコンテンツ）
- 画像（交換可能な仕様で作成された画像）
- コールトゥアクション（CTA）：
- クリックスルーリンク
- グラフィックリンク
- CTA リードフォーム（ユーザー情報取得用）
- 段落システム（Parsys）（あらゆるコンポーネントの追加や上記のコンポーネントの変換を可能にする）
さらに、デザインインポーターを拡張してカスタムコンポーネントに対応することもできます。ここでは、これらのコンポーネントについて詳しく説明します。
テキストコンポーネントを使用すると、WYSIWYG エディターを使用してテキストブロックを入力できます。詳しくは、テキストコンポーネントを参照してください。
タイトルコンポーネントを使用して、タイトルを表示しサイズ（h1 ～ h6）を設定することができます。詳しくは、タイトルコンポーネントを参照してください。
画像コンポーネントには画像が表示されます。この画像はコンテンツファインダーからドラッグ＆ドロップするか、クリックしてアップロードできます。詳しくは、画像コンポーネントを参照してください。
ランディングページデザインには複数のリンクを含めることができ、その一部を「コールトゥアクション」とすることができます。
コールトゥアクション（CTA）は、「今すぐ購読」、「このビデオを見る」、「期間限定」など、ランディングページで訪問者に行動を呼びかけるために使用します。
- クリックスルーリンク：訪問者がクリックするとターゲット URL に移動するテキストリンクを追加できます。
- グラフィックリンク：訪問者がクリックするとターゲット URL に移動する画像を追加できます。
両方の CTA コンポーネントには、同様のオプションがあります。クリックスルーリンクには追加のリッチテキストオプションがあります。次の段落で、これらのコンポーネントについて詳しく説明します。
この CTA コンポーネントを使用して、ランディングページにテキストリンクを追加できます。このリンクをクリックすると、コンポーネントのプロパティで指定されたターゲット URL にユーザーを導くことができます。このコンポーネントは「コールトゥアクション」グループに含まれています。
レンダリングオプション
レンダリングオプションを記述します。選択できる項目は以下のとおりです。
- 新しいブラウザーウィンドウにページを読み込み
- 現在のウィンドウにページを読み込み
- 親フレームにページを読み込み
- すべてのフレームをキャンセルしてフルブラウザーウィンドウにページを読み込み
この CTA コンポーネントを使用して、リンク付きのグラフィック画像をランディングページに追加できます。この画像は単純なボタンや、背景としての任意のグラフィック画像として使用できます。画像をクリックすると、ユーザーはコンポーネントのプロパティで指定されたターゲット URL に誘導されます。このコンポーネントは コールトゥアクション グループに含まれています。
レンダリングオプション
レンダリングオプションを記述します。選択できる項目は以下のとおりです。
- 新しいブラウザーウィンドウにページを読み込み
- 現在のウィンドウにページを読み込み
- 親フレームにページを読み込み
- すべてのフレームをキャンセルしてフルブラウザーウィンドウにページを読み込み
リードフォームは、訪問者（リード）のプロファイル情報を収集するために使用するフォームです。この情報を保存して後で使用し、この情報に基づき効果的なマーケティングをおこなうことができます。この情報には通常、タイトル、名前、電子メール、生年月日、住所、興味などがあります。このコンポーネントは CTA リードフォームグループに含まれています。
以下は CTA リードフォームの例です。
CTA リードフォームは様々なコンポーネントで構成されます。
- リードフォーム
リードフォームコンポーネント 、ページの新しいリードフォームの始まりと終わりを定義します。これらの要素の間に、その他のコンポーネント（電子メール ID、名など）を配置できます。 - フォームのフィールドと要素
フォームのフィールドと要素には、テキストボックス、ラジオボタン、画像などを含めることができます。多くの場合、ユーザーは、テキストの入力などのアクションをフォームフィールドで完了します。詳しくは、個々のフォーム要素を参照してください。 - プロファイルコンポーネント
プロファイルコンポーネントは、訪問者に合わせた個人設定が必要な Social Collaboration や他の領域に使用する訪問者のプロファイルに関連しています。
前述のフォームの例は、リードフォームコンポーネント（開始および終了）と、入力に使用される「名」フィールドと「電子メール ID」フィールド、および「送信」フィールドから構成されています。
リードフォームコンポーネントはそれぞれ目的が異なりますが、その多くは類似するオプションおよびパラメーターで構成されています。
どのフォームコンポーネントを設定する場合も、ダイアログ内の次のタブを使用できます。
- タイトルとテキスト
このタブでは、コンポーネントのタイトルや付随するテキストなど、基本情報を指定する必要があります。フィールドで複数選択が有効かどうかや、選択肢に使用できる項目など、その他の主要な情報を定義することもできます。 - 初期値
デフォルト値を指定できます。 - 制約
このタブでは、フィールドが必須かどうかを指定し、そのフィールドに制約を設定することができます（例えば、数値であることが必要など）。 - スタイル設定
フィールドのサイズとスタイル設定を示します。
注意：
表示されるフィールドはコンポーネントによって変わります。
すべてのオプションがすべてのリードフォームコンポーネントで使用できるわけではありません。これらの共通設定について詳しくは、「フォーム」を参照してください。
住所フィールド
ユーザーが住所を入力できます。このコンポーネントを設定する場合、ダイアログの「エレメント名」に入力する必要があります。「エレメント名」はフォーム要素の名前です。リポジトリ内でデータが格納される場所を示します。
リードフォーム
このコンポーネントを追加して、リードフォームをランディングページに追加できます。リードフォームには、「リードフォームの最初」フィールドと「リードフォームの終わり」フィールドが自動的に含まれます。これらのフィールドの間に、ここで説明しているリードフォームコンポーネントを追加できます。
リードフォームコンポーネントは、「フォーム開始」要素と「フォーム終了」要素を使用してフォームの開始と終了の両方を定義します。フォームが確実に正しく定義されるように、これらの要素は常にペアとして使用されます。
リードフォームを追加した後で、フォームの開始またはフォームの終了の設定をおこなうには、対応するバーの「編集」をクリックします。
投稿オプション
次の投稿オプションがあります。
- リードを作成
- 電子メールサービス：購読者を作成してリストに追加 - ExactTarget などの電子メールサービスプロバイダーを使用している場合に使用します。
- 電子メールサービス：自動応答の電子メールを送信 - ExactTarget などの電子メールサービスプロバイダーを使用している場合に使用します。
- 電子メールサービス：リストのユーザーの購読を解除 - ExactTarget などの電子メールサービスプロバイダーを使用している場合に使用します。
- ユーザーの購読を解除
フォーム識別子
フォーム識別子は、リードフォームを一意に識別するものです。1 つのページに複数のフォームがある場合、フォーム識別子を使用します。フォームごとに異なる識別子が使用されていることを確認します。
読み込み元パス
事前に定義された値をリードフォームフィールドに読み込むために使用されるノードプロパティのパスです。
これは、リポジトリ内のノードへのパスを指定するオプションのフィールドです。このノードに、フィールド名と一致するプロパティがある場合、フォーム上の適切なフィールドがそのプロパティの値が設定された状態でプリロードされます。一致が存在しない場合、フィールドにはデフォルト値が使用されます。
クライアントの検証
このフォームでクライアントの検証が必須かどうかを示します（サーバーの検証は常におこなわれます）。この処理を実行するには、フォームキャプチャコンポーネントと組み合わせる必要があります。
検証リソースタイプ
（個々のフィールドではなく）リードフォーム全体を検証する場合、フォームの検証リソースのタイプを定義します。
フォーム全体を検証する場合、さらに次のいずれかを含めます。
- クライアントの検証用のスクリプト：
/apps/<myApp>/form/<myValidation>/formclientvalidation.jsp - サーバー側での検証用のスクリプト：
/apps/<myApp>/form/<myValidation>/formservervalidation.jsp
- 「送信」ボタンを表示
「送信」ボタンを表示するかどうかを示します。 - 名前を送信
1 つのフォームに複数の「送信」ボタンを使用する場合の識別子。 - タイトルを送信
「送信」や「送る」など、ボタンに表示される名前。 - 「リセット」ボタンを表示
「リセット」ボタンを表示するには、このチェックボックスを選択します。 - タイトルをリセット
「リセット」ボタンに表示する名前。 - 説明
ボタンの下に表示する情報。
ランディングページを作成する場合は、次の手順を実行する必要があります。
- インポーターページを作成します。
- 読み込む HTML を準備します。
- デザインパッケージを読み込みます。
ランディングページデザインをインポートする前に、キャンペーンなどにインポーターページを作成する必要があります。インポーターページテンプレートを使用して、HTML ランディングページ全体を読み込むことができます。このページにはドロップボックスが含まれていて、ドラッグ＆ドロップによってこのボックスにランディングページデザインパッケージを読み込むことができます。
注意：
デフォルトでは、「インポーターページ」はキャンペーンにしか作成できませんが、/content/mysite にランディングページを作成するためにこのテンプレートをオーバーレイすることもできます。
デザインパッケージを読み込む前に、HTML を準備する必要があります。詳しくは、デザインインポーターの拡張と設定を参照してください。
インポーターページが作成されたら、そのページにデザインパッケージを読み込むことができます。デザインパッケージの作成とその推奨される構造について詳しくは、デザインインポーターの拡張と設定で説明します。
デザインパッケージの準備ができたら、次の手順を実行して、デザインパッケージをインポーターページに読み込みます。
-
前に作成したインポーターページを開きます。「Zip」というテキストが付いたドロップボックスが表示されます。
注意：
デザインパッケージの読み込みで問題が発生した場合は、トラブルシューティングを参照してください。
ランディングページに使用するデザインおよびアセットは通常、（おそらく代理店の）デザイナーが、使い慣れている Adobe Photoshop や Adobe Dreamweaver などのツールで作成します。デザインが完成すると、デザイナーはすべてのアセットを含めた zip ファイルをマーケティング部門に送信します。マーケティング部門の担当者は zip ファイルを AEM にドロップし、コンテンツを公開します。
さらにデザイナーは、ランディングページの読み込み後に、コンテンツを編集または削除したりコールトゥアクションコンポーネントを設定したりして、そのページを変更する必要がある場合があります。最後に、マーケティング担当者はランディングページをプレビューしてからキャンペーンをアクティベートすることで、ランディングページの公開を確実におこなうことができます。
ここでは、次の操作を実行する方法について説明します。
- ランディングページの削除
- デザインパッケージのダウンロード
- 読み込み情報の表示
- ランディングページのリセット
- CTA コンポーネントの設定と、ページへのコンテンツの追加
- ランディングページのプレビュー
- ランディングページのアクティベートまたは公開
zip ファイルをダウンロードすると、特定のランディングページに対して読み込まれた zip ファイルを記録することができます。ただし、ページ上でおこなった変更は zip ファイルに追加されません。
読み込まれたデザインパッケージをダウンロードするには、ランディングページツールバーで「ZIP ファイルをダウンロード」をクリックします。
読み込まれたデザインパッケージに問題がある場合（例えばパッケージ内に存在しない画像またはスクリプトが参照されている場合など）、デザインインポーターはこれらの問題をリスト形式で表示します。問題のリストを表示するには、クラシックユーザーインターフェイスのランディングページツールバーにある問題のリンクをクリックします。次の画像では、「問題」をクリックすると読み込みの問題ウィンドウが開きます。
変更を行った後でランディングページデザインパッケージを再インポートする場合は、クラシックユーザーインターフェイスのランディングページの上部にある「消去」をクリックして、ランディングページを「消去」したり、タッチ最適化ユーザーインターフェイスの設定メニューで「消去」をクリックしたりすることができます。「消去」をクリックすると、読み込まれたランディングページが削除され、空白のランディングページが作成されます。
ランディングページの消去時にコンテンツの変更内容を削除することができます。「いいえ」をクリックすると、コンテンツの変更内容は保持されます。つまり、jcr:content/importer の構造は保持され、インポーターページコンポーネントと etc/design 内のリソースのみが削除されます。「はい」をクリックすると、jcr:content/importer も削除されます。
注意：
コンテンツの変更内容を削除する場合、「消去」をクリックすると、読み込まれたランディングページ上でおこなわれたすべての変更、およびすべてのページプロパティが失われます。
ランディングページ上のコンポーネントを編集するには、コンポーネントをダブルクリックして開き、他のコンポーネントの場合と同じように編集します。
コンポーネントをランディングページに追加するために、コンポーネントを（クラシックユーザーインターフェイスのサイドキックから、またはタッチ最適化ユーザーインターフェイスのコンポーネントウィンドウから）ランディングページにドラッグ&ドロップし、適切に編集します。
注意：
ランディングページ上のコンポーネントを編集できない場合は、HTML ファイルを変更してから zip ファイルを再読み込みする必要があります。つまり、編集できないパーツは、読み込み時に AEM コンポーネントに変換されなかったものです。
ランディングページの削除は通常の AEM ページの削除に似ています。
唯一の例外は、デスクトップランディングページを削除すると対応するモバイルランディングページ（存在する場合）も削除されるが、その逆はないという点です。
注意：
デスクトップランディングページを公開すると、対応するモバイルバージョン（存在する場合）も公開されます。ただし、モバイルランディングページを公開しても、デスクトップバージョンは公開されません。
Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。