著陸頁面

著陸頁面功能可讓您快速且輕鬆地將設計和內容直接匯入AEM頁面。 網頁開發人員可準備HTML和其他可匯入為完整頁面或僅匯入頁面一部分的資產。 此功能對於建立僅在限定時間內有效且需要快速建立的行銷著陸頁面非常有用。

本頁介紹以下內容：

• AEM中的著陸頁面外觀，包括可用的元件
• 如何建立著陸頁面，以及如何匯入設計套件
• 如何在AEM中處理著陸頁面
• 如何設定行動登陸頁面

Extending and Configuring the Design Importer中介紹了準備要導入的設計軟體包。 「整合著陸頁面與Adobe Analytics」中涵蓋與Adobe Analytics的整合。

什麼是著陸頁面？

著陸頁面是單頁或多頁的網站，是行銷推廣的「端點」-例如電子郵件、廣告字／橫幅、社交媒體。 著陸頁面可以用於各種用途，但都有一點共同之處——訪客應完成工作並定義著陸頁面的成功。

AEM中的「著陸頁面」功能可讓行銷人員與廣告公司或內部創意團隊的網頁設計人員合作，建立頁面設計，這些設計可輕鬆匯入AEM，而且行銷人員仍可編輯，並在與其他AEM支援網站相同的管理之下發佈。

在AEM中，您可以執行下列步驟來建立著陸頁面：

1. 在AEM中建立包含著陸頁面畫布的頁面。 AEM隨附名為​Importer Page​的範例。

2. 準備HTML和資產。

3. 將資源封裝到此處稱為「設計套件」的ZIP檔案中。

4. 匯入匯入工具頁面上的設計套件。

5. 修改並發佈頁面。

案頭著陸頁面

AEM中的範例著陸頁面如下所示：

行動著陸頁面

著陸頁面也可以有頁面的行動版本。 若要擁有著陸頁面的個別行動版本，匯入設計必須有兩個html檔案：index.htm(l)​和​mobile.index.htm(l)。

著陸頁面匯入程式與一般著陸頁面的程式相同，著陸頁面設計有與行動著陸頁面對應的額外html檔案。 此html檔案也必須有畫布div，其中id=cqcanvas與案頭登陸頁面html類似，並支援案頭登陸頁面所描述的所有可編輯元件。

行動裝置登陸頁面會建立為案頭登陸頁面的子頁面。 若要開啟它，請導覽至「網站」中的登陸頁面，然後開啟子頁面。

著陸頁面元件

若要讓AEM中匯入的HTML部分變成可編輯，您可以直接將「著陸頁面HTML」中的內容對應至AEM元件。 設計匯入工具依預設會瞭解下列元件：

• 文字，適用於任何文字

• 標題，適用於H1-6標籤中的內容

• 影像，適用於應可交換的影像

• 呼叫動作：

  • 點進連結
  • 圖形連結

• CTA Lead-Form，用於捕獲用戶資訊

• 段落系統(Paragraph System)，允許添加任何元件或轉換上述元件

此外，還可擴充此功能並支援自訂元件。 本節將詳細說明這些元件。

文字

「文字」元件可讓您使用WYSIWYG編輯器輸入文字區塊。 如需詳細資訊，請參閱文字元件。

以下是登陸頁面上文字元件的範例：

標題

標題元件可讓您顯示標題並設定大小(h1-6)。 如需詳細資訊，請參閱標題元件。

以下是登陸頁面上標題元件的範例：

影像

影像元件會顯示影像，您可從「內容搜尋器」拖放，或按一下以上傳。 如需詳細資訊，請參閱image元件。

以下是登陸頁面上影像元件的範例：

呼籲行動(CTA)

著陸頁面設計可能有數個連結——其中一些連結可能會以「行動呼籲」的形式提供。

動作呼籲(CTA)可讓訪客在登陸頁面上立即採取動作，例如「立即訂閱」、「檢視此影片」、「限時」等。

• 點進連結——可讓您新增文字連結，在點按時會將訪客帶往目標URL。
• 圖形連結——可讓您新增在點按時將訪客帶往目標URL的影像。

兩個CTA元件都有類似的選項。 「點進連結」有其他豐富式文字選項。 以下各段對各組成部分作了詳細說明。

按一下「Through Link（通過連結<a0/>）」

此CTA元件可用來在登陸頁面上新增文字連結。 可以按一下該連結，將使用者帶往元件屬性中指定的目標URL。 它是「行動呼籲」群組的一部分。

標 簽使用者會看到文字。您可以使用RTF編輯器修改格式。

目標 URL輸入使用者按一下文字時要造訪的URI。

演算選 項說明演算選項。您可以從下列選項中選擇：

• 在新瀏覽器視窗中載入頁面
• 在目前視窗中載入頁面
• 在父影格中載入頁面
• 取消所有影格，並在完整瀏覽器視窗中載入頁面

在「 樣式」標籤中，輸入CSS樣式表的路徑。

在「 樣式」標籤中，輸入元件的ID以唯一識別它。

以下是點進連結的範例：

圖形連結

此CTA元件可用來新增任何在著陸頁面上具有連結的圖形影像。 影像可以是簡單按鈕或任何圖形影像做為背景。 當點按影像時，使用者會移至元件屬性中指定的目標URL。 它是​呼叫Action​群組的一部分。

標 簽使用者在圖中看到的文字。您可以使用RTF編輯器修改格式。

目標 URL輸入使用者按一下影像時要造訪的URI。

演算選 項說明演算選項。您可以從下列選項中選擇：

• 在新瀏覽器視窗中載入頁面
• 在目前視窗中載入頁面
• 在父影格中載入頁面
• 取消所有影格，並在完整瀏覽器視窗中載入頁面

在「 樣式」標籤中，輸入CSS樣式表的路徑。

在「 樣式」標籤中，輸入元件的ID以唯一識別它。

以下是範例圖形連結：

Call to Action(CTA)Lead Form

銷售機會表單是用於收集訪客／銷售機會描述檔資訊的表單。 這些資訊可以儲存，稍後再使用這些資訊進行有效的行銷。 這些資訊通常包括標題、姓名、電子郵件、出生日期、地址、興趣等。 它是​CTA Lead表單​組的一部分。

CTA銷售機會表單範例如下所示：

CTA銷售機會表單由幾個不同的元件組成：

• Lead
  FormLead表單元件定義頁面上新Lead表單的開始和結束。然後，其他元件可以放在這些元素之間，例如電子郵件ID、名字等。

• 表單欄位和
  元素表單欄位和元素可包含文字方塊、選項按鈕、影像等。使用者通常會在表單欄位中完成動作，例如輸入文字。 如需詳細資訊，請參閱個別的表單元素。

• Profile
  ComponentsProfile元件與用於社交協作的訪客配置檔案以及需要訪客個人化的其他區域相關。

前面是示例表；它由​Lead Form​元件（開始和結束）組成，具有​名字​和​用於輸入的電子郵件ID​欄位和​Submit​欄位

從sidekick,CTA Lead Form可使用下列元件：

許多銷售機會表單元件的常用設定

雖然每個引線表單元件有不同的用途，但許多元件由相似的選項和參陣列成。

在配置任何表單元件時，對話框中提供以下頁籤：

• 標題和
  文字您需要在此處指定基本資訊，例如元件標題和任何隨附的文字。在適當的情況下，它還允許您定義其他關鍵資訊，如欄位是否為多選項和可供選擇的項目。

• 初始
  值允許您指定預設值。

• 約
  束條件您可以在此處指定欄位是否為必需欄位，並將約束條件放在該欄位上（例如，必須是數字等）。

• 樣
  式指示欄位的大小和樣式。

銷售線索表單元件

下節說明Call-to-Action Lead表單的可用元件。

關 於讓使用者新增關於資訊。

地址 欄位允許用戶輸入地址資訊。配置此元件時，必須在對話框中輸入元素名稱。 「元素名稱」是表單元素的名稱。 這表示資料儲存在儲存庫中的位置。

出生日 期用戶可以輸入出生日期資訊。

電子郵件 ID允許使用者輸入電子郵件地址（識別碼）。

名 稱提供欄位供使用者輸入名字。

GederUsers 可從下拉式清單中選取其性別。

姓氏使 用者可以輸入姓氏資訊。

銷售 機會表單新增此元件，以新增銷售機會表單至著陸頁面。銷售線索表單會自動包含「銷售線索表單的開始」和「銷售線索表單的結束」欄位。 在其中，您添加本節中介紹的Lead Form元件。

Lead Form元件使用​Form Start​和​Form End​元素定義表單的開始和結束。 這些表格會一律配對，以確保表格已正確定義。

添加銷售機會表單後，可以通過按一下相應條中的​編輯​來配置表單的開頭或表單結尾。

銷售機會表單的開頭

配置​Form​和​Advanced​有兩個頁籤：

感謝頁 面要引用的頁面，感謝訪客提供其輸入。如果保留空白，表單會在提交後重新顯示。

啟動 工作流確定提交銷售機會表單後觸發的工作流。

貼文選 項可使用下列貼文選項：

• 建立銷售機會
• 電子郵件服務：建立訂閱者並新增至清單——如果您使用電子郵件服務供應商（例如ExactTarget），請使用。
• 電子郵件服務：傳送自動回應電子郵件——如果您使用電子郵件服務供應商（例如ExactTarget），請使用。
• 電子郵件服務：從清單中取消訂閱使用者——如果您使用電子郵件服務供應商（例如ExactTarget），請使用。
• 取消訂閱用戶

表單 識別碼表單識別碼可唯一識別銷售機會表單。如果單一頁面上有多個表格，請使用表格識別碼；請確定它們有不同的識別碼。

Load Path是用於將預定義值載入到銷售線索表單欄位的節點屬性的路徑。

這是一個可選欄位，它指定到儲存庫中節點的路徑。 當此節點具有與欄位名稱匹配的屬性時，表單上的相應欄位將預先載入這些屬性的值。 如果不存在匹配，則欄位包含預設值。

用戶 端驗證指出此表單是否需要用戶端驗證（伺服器驗證一律會發生）。這可與Forms Captcha元件搭配使用。

驗證資 源類型如果要驗證整個銷售線索表單（而不是單個欄位），請定義表單驗證資源類型。

如果要驗證完整表單，還應包含下列其中一項：

• 用於客戶端驗證的指令碼：
  /apps/<myApp>/form/<myValidation>/formclientvalidation.jsp

• 伺服器端的驗證指令碼：
  /apps/<myApp>/form/<myValidation>/formservervalidation.jsp

動作 設定根據「貼文選項」中的選取，動作設定會變更。例如，當您選擇「建立銷售線索」時，可以配置銷售線索添加到的清單。

• 顯示提
  交按鈕指出是否應顯示提交按鈕。

• Submit
  Name（提交名稱）如果您在表單中使用多個提交按鈕，則此識別碼。

• Submit
  Title（提交標題）按鈕上顯示的名稱，例如「提交」或「傳送」。

• 顯示重設按
  鈕選擇複選框，使「重設」按鈕可見。

• 重設
  標題出現在「重設」按鈕上的名稱。

• 說明
  顯示在按鈕下方的資訊。

建立著陸頁面

建立著陸頁面時，您需要執行三個步驟：

1. 建立匯入工具頁面。
2. 準備要導入的HTML。
3. 匯入設計套件。

使用Design Importer

由於匯入頁面需要準備HTML、驗證和測試頁面，因此匯入著陸頁面會當成管理工作。 身為管理員，執行匯入的使用者需要/apps的讀取、寫入、建立和刪除權限。 如果使用者沒有這些權限，匯入將會失敗。

Adobe建議在測試執行個體上使用設計匯入工具。 在測試執行個體上，匯入可由負責將程式碼部署至生產執行個體的開發人員進行測試和驗證。

建立匯入工具頁面

您必須先建立匯入工具頁面（例如促銷活動下），才能匯入著陸頁面設計。 「匯入器頁面」範本可讓您匯入完整的HTML登陸頁面。 頁面包含一個放置方塊，可透過拖放方式匯入著陸頁面設計套件。

若要建立新的著陸頁面：

1. 前往​Websites​主控台。

2. 在左窗格中選取您的促銷活動。

3. 按一下​新建​以開啟​建立頁面​窗口。

4. 選擇​匯入工具頁面​範本並新增標題和名稱，然後按一下「建立​a3/>」。

   

   隨即顯示您的新匯入工具頁面。

準備HTML以匯入

在匯入設計套件之前，必須先準備HTML。 如需詳細資訊，請參閱擴充和設定設計匯入。

導入設計包

建立匯入工具頁面後，您可將設計套件匯入至該頁面。 有關建立設計軟體包及其建議結構的詳細資訊，請參閱擴展和配置設計導入。

假設您已準備好設計套件，下列步驟將說明如何將設計套件匯入匯入工具頁面。

1. 開啟您先前建立的匯入工具頁面。

   

2. 將設計套件拖放至dropbox。 請注意，當將套件拖曳到其上時，箭頭會改變方向。

3. 拖放後，您會看到著陸頁面取代匯入工具頁面。 您的HTML著陸頁面已成功匯入。

   

使用著陸頁面

著陸頁面的設計和資產通常由設計人員在機構中使用Adobe Photoshop或Adobe Dreamweaver等常用工具來建立。 當設計完成時，設計人員會傳送包含所有資產的zip檔案給行銷人員。 然後，行銷部門的聯絡人負責將zip檔案拖曳至AEM並發佈內容。

此外，設計人員在匯入登陸頁面後，可能需要透過編輯或刪除內容及設定動作要求元件，對其進行修改。 最後，行銷人員會想要預覽著陸頁面，然後啟動促銷活動，以確保著陸頁面已發佈。

本節說明如何執行下列動作：

• 刪除著陸頁面
• 下載設計套件
• 檢視匯入資訊
• 重設著陸頁面
• 設定CTA元件並新增內容至頁面
• 預覽著陸頁面
• 啟動／發佈登陸頁面

當您匯入設計套件時，頁面的設定選單中會提供​Clear Design​和​Download Imported Zip:

下載導入的設計包

下載zip檔案可讓您記錄哪個zip已匯入特定著陸頁面。 請注意，頁面上所做的變更不會新增至zip。

若要下載匯入的設計套件，請按一下「著陸頁面」工具列中的「下載Zip 」。

查看導入資訊

您隨時都可以按一下傳統使用者介面中登陸頁面頂端的藍色驚嘆號，來檢視上次匯入的相關資訊。

如果匯入的設計套件有某些問題，例如，如果它參考的是套件中不存在的影像／指令碼等，則設計匯入工具會以清單的形式顯示此類問題。 若要檢視問題清單，請在傳統的使用者介面中，按一下「著陸頁面」工具列中的問題連結。 在以下影像中，按一下​問題​連結將開啟「導入問題」窗口。

重設著陸頁面

如果您想在對著陸頁面設計套件進行某些變更後重新匯入，可以按一下傳統使用者介面著陸頁面頂端的​Clear，或按一下觸控最佳化使用者介面設定選單中的「清除」，以「清除」著陸頁面。 這樣做會刪除匯入的登陸頁面，並建立空白匯入程式頁面。

清除著陸頁面時，您可以移除內容變更。 如果按一下​否，則保留內容更改，即保留jcr:content/importer下的結構，並僅刪除導入程式頁元件和etc/design中的資源。 但是，如果按一下「是」(Yes)，則jcr:content/importer也會被刪除。

修改和添加著陸頁面上的元件

若要修改著陸頁面上的元件，請連按兩下這些元件以開啟它們，然後像編輯其他元件一樣進行編輯。

若要在著陸頁面上新增元件，請將元件拖放至著陸頁面——從傳統使用者介面的sidekick或從觸控最佳化使用者介面的「元件」窗格——並視需要編輯。

刪除著陸頁面

刪除著陸頁面就像刪除一般AEM頁面。

唯一的例外是，當您刪除案頭著陸頁面時，也會刪除對應的行動著陸頁面（如果有），但不會相反。

發佈著陸頁面

您可以發佈著陸頁面及其所有相依性，就像發佈一般頁面一樣。