ランディングページ
ランディングページ機能を使用すると、デザインとコンテンツをAEMページにすばやく簡単に読み込むことができます。 Web 開発者は、HTMLと追加のアセットを準備して、完全なページまたはページの一部として読み込むことができます。 この機能は、限られた時間しかアクティブでなく、すばやく作成する必要があるマーケティングランディングページを作成する場合に役立ちます。
このページでは、以下について説明します。
- 使用可能なコンポーネントを含むAEMのランディングページの外観
- ランディングページの作成方法とデザインパッケージの読み込み方法
- AEMでのランディングページの使用方法
- モバイルランディングページの設定方法
読み込むためのデザインパッケージの準備については、を参照してください。 デザインインポーターの拡張と設定. Adobe Analyticsとの統合については、 ランディングページのAdobe Analyticsとの統合。
ランディングページの読み込みに使用するデザインインポーター はAEM 6.5 で非推奨（廃止予定）になりました。.
デザインインポーターは /apps にアクセスする必要があるので、/apps を変更できないコンテナ化されたクラウド環境では動作しません。
ランディングページとは
ランディングページは、電子メール、アドワード/バナー、ソーシャルメディアなど、マーケティングアウトリーチの「エンドポイント」となる単一または複数ページのサイトです。 ランディングページは様々な目的に使用できますが、共通点は 1 つあります。訪問者はタスクを実行し、ランディングページの成功を定義する必要があります。
AEMのランディングページ機能を使用すると、マーケターは、エージェントや社内のクリエイティブチームの Web デザイナーと連携して、AEMに簡単に読み込んで、引き続きマーケターが編集し、AEMを利用した他のサイトと同じガバナンスで公開できるページデザインを作成できます。
AEMで、次の手順を実行してランディングページを作成します。
-
ランディングページキャンバスを含むAEMでページを作成します。 AEM には「インポーターページ」というサンプルが同梱されています。
-
リソースを ZIP ファイルにパッケージ化します。ここでは、このファイルを「デザインパッケージ」と呼びます。
-
デザインパッケージをインポーターページに読み込みます。
-
ページを変更して公開します。
デスクトップランディングページ
AEMのサンプルのランディングページを次に示します。
モバイルランディングページ
ランディングページには、モバイルバージョンのページも含めることができます。 ランディングページのモバイルバージョンを個別に作成するには、読み込み時のデザインに index.htm(l) と mobile.index.htm(l) という 2 つの HTML ファイルを含める必要があります。
このランディングページの読み込み手順は、通常のランディングページの読み込み手順と同じです。ランディングページデザインには、モバイルランディングページに対応する追加の HTML ファイルが含まれます。この HTML ファイルも、デスクトップランディングページの HTML と同様にキャンバス div と id=cqcanvas を含める必要があり、デスクトップランディングページ用に記述されたすべての編集可能なコンポーネントがサポートされます。
モバイルランディングページは、デスクトップランディングページの子ページとして作成されます。 開くには、Web サイトのランディングページに移動し、子ページを開きます。
デスクトップランディングページが削除または非アクティブ化された場合、モバイルランディングページはデスクトップランディングページと共に削除/非アクティブ化されます。
ランディングページコンポーネント
読み込まれたHTMLの一部をAEM内で編集可能にするには、ランディングページHTML内のコンテンツをAEMコンポーネントに直接マッピングします。 デザインインポーターは、デフォルトで次のコンポーネントを認識します。
-
テキスト（任意のテキスト）
-
H1 ～ 6 タグのコンテンツ用のタイトル
-
画像（交換可能にする必要がある画像）
-
コールトゥアクション：
- クリックスルーリンク
- グラフィックリンク
-
CTA リードフォーム（ユーザー情報を取得するため）
-
段落システム (Parsys)：任意のコンポーネントを追加できるようにするか、上記のコンポーネントを変換します。
さらに、これを拡張し、カスタムコンポーネントをサポートすることもできます。 このセクションでは、コンポーネントの詳細について説明します。
テキスト
テキストコンポーネントを使用すると、WYSIWYG エディターを使用してテキストブロックを入力できます。 詳しくは、 テキストコンポーネント を参照してください。
以下はランディングページのテキストコンポーネントの例です。
タイトル
タイトルコンポーネントを使用すると、タイトルを表示し、サイズ (h1 ～ h6) を設定できます。 詳しくは、 タイトルコンポーネント を参照してください。
以下はランディングページのタイトルコンポーネントの例です。
画像
画像コンポーネントには、コンテンツファインダーからドラッグ&ドロップするか、クリックしてアップロードできる画像が表示されます。 詳しくは、 画像コンポーネント を参照してください。
以下はランディングページの画像コンポーネントの例です。
コールトゥアクション（CTA）
ランディングページデザインには、複数のリンクが含まれている場合があります。リンクの一部は、「コールトゥアクション」を意図している場合があります。
コールトゥアクション (CTA) は、「今すぐ登録」、「このビデオを表示」、「制限時間のみ」など、ランディングページで訪問者に即時にアクションを実行させるために使用されます。
- クリックスルーリンク — クリックすると訪問者がターゲット URL に移動するテキストリンクを追加できます。
- グラフィカルリンク — クリックすると訪問者がターゲット URL に移動する画像を追加できます。
両方の CTA コンポーネントに同様のオプションがあります。 クリックスルーリンクには、追加のリッチテキストオプションがあります。 コンポーネントについて、次の段落で詳しく説明します。
クリックスルーリンク
この CTA コンポーネントを使用して、ランディングページにテキストリンクを追加できます。 このリンクをクリックすると、コンポーネントプロパティで指定されたターゲット URL にユーザーを移動できます。 これは「コールトゥアクション」グループの一部です。
ラベル：ユーザーに表示されるテキスト。リッチテキストエディターで書式設定を変更できます。
ターゲット URL：ユーザーがテキストをクリックした場合に訪問させる URI を入力します。
レンダリングオプション：レンダリングオプションを記述します。次の中から選択できます。
- 新しいブラウザーウィンドウにページを読み込み
- 現在のウィンドウにページを読み込み
- 親フレームにページを読み込み
- すべてのフレームをキャンセルし、ブラウザウィンドウ全体にページを読み込む
CSS：「スタイル」タブで、CSS スタイルシートへのパスを入力します。
ID：「スタイル」タブで、コンポーネントを一意に識別する ID を入力します。
以下はクリックスルーリンクの例です。
グラフィックリンク
この CTA コンポーネントを使用して、ランディングページにリンクを含む任意のグラフィカル画像を追加できます。 画像は、単純なボタンでも、背景としての任意のグラフィカル画像でもかまいません。 画像をクリックすると、コンポーネントプロパティで指定されたターゲット URL に移動します。 これは、 コールトゥアクション グループ化します。
ラベル：グラフィック内でユーザーに表示されるテキスト。リッチテキストエディターで書式設定を変更できます。
ターゲット URL：ユーザーが画像をクリックした場合に訪問する URI を入力します。
レンダリングオプション：レンダリングオプションを記述します。次の中から選択できます。
- 新しいブラウザーウィンドウにページを読み込み
- 現在のウィンドウにページを読み込み
- 親フレームにページを読み込み
- すべてのフレームをキャンセルし、ブラウザウィンドウ全体にページを読み込む
CSS：「スタイル」タブで、CSS スタイルシートへのパスを入力します。
ID：「スタイル」タブで、コンポーネントを一意に識別する ID を入力します。
以下はグラフィックリンクの例です。
コールトゥアクション (CTA) リードフォーム
リードフォームとは、訪問者/リードのプロファイル情報を収集するために使用されるフォームです。 この情報を保存し、後でその情報に基づいて効果的なマーケティングを行うのに使用できます。 この情報には、通常、タイトル、名前、E メール、生年月日、住所、興味などが含まれます。 これは、 CTA リードフォーム グループ化します。
CTA リードフォームの例を次に示します。
CTA リードフォームは様々なコンポーネントで構成されます。
-
リードフォーム：リードフォームコンポーネント 、ページの新しいリードフォームの始まりと終わりを定義します。
これらの要素の間に、その他のコンポーネント（メール ID、名など）を配置できます。 -
フォームのフィールドと要素
フォームのフィールドと要素には、テキストボックス、ラジオボタン、画像などを含めることができます。多くの場合、ユーザーは、テキストの入力などのアクションをフォームフィールドで完了します。詳しくは、個々のフォーム要素を参照してください。 -
プロファイルコンポーネント
プロファイルコンポーネントは、訪問者に合わせた個人設定が必要なソーシャルコラボレーションや他の領域に使用する、訪問者のプロファイルに関連しています。
前述のフォームの例は、リードフォームコンポーネント（開始および終了）と、入力に使用される「名」フィールドと「メール ID」フィールド、および「送信」フィールドで構成されています。
サイドキックから、次のコンポーネントを CTA リードフォームに使用できます。
多くのリードフォームコンポーネントに共通の設定
リードフォームの各コンポーネントの目的は異なりますが、多くのコンポーネントは同様のオプションとパラメーターで構成されています。
いずれかのフォームコンポーネントを設定する際に、ダイアログで次のタブを使用できます。
-
タイトルとテキスト
ここでは、コンポーネントのタイトルや付属のテキストなど、基本情報を指定する必要があります。 また、必要に応じて、フィールドが複数選択可能かどうかや、選択可能な項目など、他の重要な情報を定義できます。 -
初期値
デフォルト値を指定できます。 -
制約
このタブでは、フィールドが必須かどうかを指定し、そのフィールドに制約を設定することができます（例えば、数値であることが必要など）。 -
スタイル設定
フィールドのサイズとスタイル設定を示します。
表示されるフィールドは、個々のコンポーネントによって異なります。
すべてのオプションがすべてのリードフォームコンポーネントで使用できるわけではありません。 詳しくは、 Formsを参照してください 共通設定.
リードフォームコンポーネント
次の節では、コールトゥアクションリードフォームで使用できるコンポーネントについて説明します。
バージョン情報：ユーザーが情報を追加できます。
住所フィールド：ユーザーが住所情報を入力できます。このコンポーネントを設定する場合、ダイアログの「要素名」に入力する必要があります。「要素名」はフォーム要素の名前です。リポジトリー内でデータが格納される場所を示します。
生年月日 ユーザーが生年月日情報を入力できます。
メール ID ユーザーがメールアドレス（ID）を入力できます。
名 ユーザーが名前（名）を入力できるフィールドを提供します。
性別 ユーザーがドロップダウンリストから性別を選択できます。
姓 ユーザーが名前（姓）情報を入力できます。
リードフォーム このコンポーネントを追加して、リードフォームをランディングページに追加できます。リードフォームには、「リードフォームの始まり」フィールドと「リードフォームの終わり」フィールドが自動的に含まれます。これらのフィールドの間に、ここで説明しているリードフォームコンポーネントを追加できます。
リードフォームコンポーネントは、「フォーム開始」要素と「フォーム終了」要素を使用してフォームの開始と終了の両方を定義します。フォームが正しく定義されるように、これらは常にペアになります。
リードフォームを追加した後、「 編集 をクリックします。
リードフォームの最初
「フォーム」と「詳細」の 2 つのタブを使用して設定できます。
ありがとうページ 訪問者の入力を歓迎するために参照されるページ。空にすると、送信後にフォームが再表示されます。
ワークフローを開始 リードフォームが送信されるとトリガーされるワークフローを決定します。
投稿オプション 次の投稿オプションがあります。
- リードを作成
- 電子メールサービス：購読者を作成してリストに追加 — ExactTarget などの電子メールサービスプロバイダーを使用する場合に使用します。
- 電子メールサービス：自動応答の電子メールを送信 — ExactTarget などの電子メールサービスプロバイダーを使用している場合に使用します。
- 電子メールサービス：リストのユーザーの購読を解除 — ExactTarget などの電子メールサービスプロバイダーを使用している場合に使用します。
- ユーザーの登録解除
フォーム識別子 フォーム識別子は、リードフォームを一意に識別するものです。1 つのページに複数のフォームがある場合、フォーム識別子を使用します。フォームごとに異なる識別子が使用されていることを確認します。
読み込み元パス 事前に定義された値をリードフォームフィールドに読み込むために使用されるノードプロパティのパスです。
これは、リポジトリ内のノードへのパスを指定するオプションのフィールドです。 このノードにフィールド名と一致するプロパティがある場合、フォーム上の該当フィールドには、これらのプロパティの値が事前に読み込まれます。一致が存在しない場合、フィールドにはデフォルト値が使用されます。
クライアントの検証 このフォームでクライアントの検証が必須かどうかを示します（サーバーの検証は常に行われます）。この処理を実行するには、フォームキャプチャコンポーネントと組み合わせる必要があります。
検証リソースタイプ （個々のフィールドではなく）リードフォーム全体を検証する場合、フォームの検証リソースのタイプを定義します。
フォーム全体を検証する場合、次のいずれかも含めます。
-
クライアントの検証用スクリプト：
/apps/<myApp>/form/<myValidation>/formclientvalidation.jsp -
サーバー側の検証用スクリプト：
/apps/<myApp>/form/<myValidation>/formservervalidation.jsp
アクションの設定「投稿オプション」での選択によって、「アクションの設定」の内容が変わります。例えば、「リードを作成」を選択した場合、リードの追加先とするリストを設定できます。
-
「送信」ボタンを表示
「送信」ボタンを表示するかどうかを示します。 -
名前を送信
1 つのフォームに複数の「送信」ボタンを使用する場合の識別子。 -
タイトルを送信
「送信」や「送る」など、ボタンに表示される名前。 -
「リセット」ボタンを表示
「リセット」ボタンを表示するには、このチェックボックスを選択します。 -
タイトルをリセット
「リセット」ボタンに表示する名前。 -
説明
ボタンの下に表示する情報。
ランディングページの作成
ランディングページを作成する場合は、次の 3 つの手順を実行する必要があります。
- インポーターページを作成します。
- 読み込む HTML を準備します。
- デザインパッケージを読み込みます。
デザインインポーターの使用
ページの読み込みには、ページのHTML、検証、テストの準備が含まれるので、ランディングページの読み込みは管理者タスクとして行われます。 読み込みを実行する管理者ユーザーには、/apps に対する読み取り、書き込み、作成および削除の権限が必要です。ユーザーにこれらの権限がない場合、読み込みは失敗します。
デザインインポーターは、/apps に対する読み取り、書き込み、作成および削除の権限が必要な管理ツールとして使用することを意図しているので、実稼動環境で使用することはお勧めしません。
Adobeでは、ステージングインスタンスでデザインインポーターを使用することをお勧めします。 ステージングインスタンスでは、インポートをテストおよび検証できるのは開発者で、その開発者が実稼動インスタンスにコードをデプロイする担当者です。
インポーターページの作成
ランディングページデザインをインポートする前に、例えばキャンペーンの下にインポーターページを作成する必要があります。 インポーターページテンプレートを使用すると、ランディングページ全体をHTMLで読み込むことができます。 ページにはドロップボックスが含まれ、ドラッグ&ドロップを使用してランディングページデザインパッケージを読み込むことができます。
デフォルトでは、インポーターページはキャンペーンの配下にしか作成できませんが、/content/mysite の配下にランディングページを作成するために、このテンプレートをオーバーレイすることもできます。
新しいランディングページを作成するには：
-
次に移動： Web サイト コンソール。
-
左側のパネルでキャンペーンを選択します。
-
「新規」をクリックして、ページを作成ウィンドウを開きます。
-
「インポーターページ」テンプレートを選択して、タイトルと名前（オプション）を追加し、「作成」をクリックします。
新しいインポーターページが表示されます。
読み込み用HTMLの準備
デザインパッケージを読み込む前に、HTMLの準備が必要です。 詳しくは、 デザインインポートの拡張と設定 を参照してください。
デザインパッケージの読み込み
インポーターページを作成したら、そのページにデザインパッケージを読み込むことができます。 デザインパッケージの作成と推奨される構造について詳しくは、 デザインインポートの拡張と設定.
デザインパッケージの準備が整ったら、次の手順でデザインパッケージをインポーターページに読み込む方法を説明します。
-
自分でインポーターページを開きます。 以前に作成済み.
-
デザインパッケージをドロップボックスにドラッグ&ドロップします。 パッケージをドラッグすると、矢印の方向が変わることに注意してください。
-
ドラッグ&ドロップの結果、ランディングページがインポーターページの代わりに表示されます。 HTML ランディングページが正常に読み込まれました。
読み込み時に、無効なマークアップの読み込みと公開を避けるために、セキュリティ上の理由から、マークアップが不要になります。 この場合、HTMLのみのマークアップと、インラインSVGや Web コンポーネントなどの他の形式の要素がすべて除外されると想定します。
デザインパッケージの読み込みで問題が発生した場合は、 トラブルシューティング.
ランディングページの操作
ランディングページのデザインとアセットは、通常、デザイナーが ( 場合によってはAdobe PhotoshopやAdobe Dreamweaverなどのツールで ) 代理店に作成します。 デザインが完了すると、デザイナーはすべてのアセットを含む zip ファイルをマーケティングに送信します。 その後、マーケティングの連絡先は、zip ファイルをAEMにドロップしてコンテンツを公開します。
また、ランディングページの読み込み後に、コンテンツの編集や削除、コールトゥアクションコンポーネントの設定を行う際に、ランディングページを変更する必要が生じる場合があります。 最後に、マーケターはランディングページをプレビューし、ランディングページが公開されるようにキャンペーンをアクティブ化します。
この節では、次の操作方法について説明します。
- ランディングページの削除
- デザインパッケージをダウンロード
- インポート情報を表示
- ランディングページのリセット
- CTA コンポーネントの設定と、ページへのコンテンツの追加
- ランディングページのプレビュー
- ランディングページのアクティベート/公開
デザインパッケージを読み込むと、 デザインをクリア および 読み込まれた Zip をダウンロード は、ページの設定メニューで使用できます。
読み込まれたデザインパッケージのダウンロード
zip ファイルをダウンロードすると、特定のランディングページで読み込まれた zip を記録できます。 ページ上でおこなった変更は zip には追加されません。
読み込んだデザインパッケージをダウンロードするには、 Zip をダウンロード （[ ランディングページ ] ツールバー）
インポート情報の表示
クラシックユーザーインターフェイスのランディングページの上部にある青い感嘆符をクリックすると、いつでも最後のインポートに関する情報を表示できます。
読み込まれたデザインパッケージに何らかの問題がある場合（例えば、パッケージ内に存在しない画像やスクリプトを参照する場合など）、デザインインポーターはその問題をリストの形式で表示します。 問題のリストを表示するには、クラシックユーザーインターフェイスで、ランディングページツールバーの問題リンクをクリックします。 次の画像では、「問題」リンクをクリックすると、読み込みの問題ウィンドウが開きます。
ランディングページのリセット
ランディングページデザインパッケージに変更を加えた後で再度読み込む場合は、クラシックユーザーインターフェイスのランディングページの上部にある「消去」をクリックするか、タッチ最適化ユーザーインターフェイスの設定メニューで「消去」をクリックして、ランディングページを「消去」することができます。「消去」をクリックすると、読み込まれたランディングページが削除され、空白のインポーターページが作成されます。
ランディングページの消去時にコンテンツの変更内容を削除することができます。「いいえ」をクリックすると、コンテンツの変更内容は保持されます。つまり、jcr:content/importer の構造は保持され、インポーターページコンポーネントと etc/design 内のリソースのみが削除されます。「はい」をクリックすると、jcr:content/importer も削除されます。
コンテンツの変更内容を削除する場合、「消去」をクリックすると、読み込まれたランディングページ上で行われたすべての変更、およびすべてのページプロパティが失われます。
ランディングページ上のコンポーネントの変更と追加
ランディングページのコンポーネントを変更するには、コンポーネントをダブルクリックして開き、他のコンポーネントと同様に編集します。
ランディングページにコンポーネントを追加するには、クラシック UI のサイドキックまたはタッチ操作向け UI のコンポーネントパネルから、必要に応じてランディングページにコンポーネントをドラッグ&ドロップし、編集します。
ランディングページ上のコンポーネントを編集できない場合は、 HTML・ファイルの変更 つまり、インポート中に、編集不可能なパーツはAEMのコンポーネントに変換されませんでした。
ランディングページの削除
ランディングページの削除は、通常のAEMページの削除と似ています。
唯一の例外は、デスクトップのランディングページを削除すると、対応するモバイルのランディングページも削除されます（存在する場合）が、その逆は削除されない点です。
ランディングページの公開
通常のページの公開と同様に、ランディングページとその依存関係をすべて公開できます。
デスクトップランディングページを公開すると、対応するモバイルバージョンも公開されます（存在する場合）。 ただし、モバイルランディングページを公開しても、デスクトップバージョンは公開されません。
リソース
アドビアカウント
