登陸頁面 landing-pages

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

此頁面說明下列專案：

準備要匯入的設計封裝在延伸與設定設計匯入工具中有所說明。 與Adobe Analytics的整合包含在將登入頁面與Adobe Analytics整合。

什麼是登陸頁面？ what-are-landing-pages

登入頁面是單一或多頁網站，是行銷外聯的「端點」 — 例如，電子郵件、廣告詞/橫幅、社群媒體。 登陸頁面可能有不同的用途，但都有一項共同點：訪客應完成一項任務，且這會定義登陸頁面的成功。

AEM中的登陸頁面功能可讓行銷人員與代理商或內部創意團隊的網頁設計人員合作，建立可輕鬆匯入AEM中，且行銷人員仍可編輯的頁面設計，並依照與其他AEM支援網站的相同治理方式發佈。

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

案頭登陸頁面 desktop-landing-pages

AEM中的範例登入頁面如下所示：

行動登陸頁面 mobile-landing-pages

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

登陸頁面匯入程式與一般登陸頁面的程式相同，登陸頁面設計會有一個與行動登陸頁面對應的額外html檔案。 此HTML檔案也必須有具有id=cqcanvas的畫布div，就像案頭登陸頁面HTML一樣，而且它支援案頭登陸頁面中說明的所有可編輯元件。

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

登陸頁面元件 landing-page-components

若要讓匯入的HTML部分可在AEM內編輯，您可以將登入頁面HTML內的內容直接對應至AEM元件。 設計匯入工具根據預設會瞭解下列元件：

此外，您也可以擴充此功能並支援自訂元件。 本節詳細說明元件。

文字 text

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

以下為登入頁面上的文字元件範例：

標題 title

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

以下為登入頁面上的標題元件範例：

影像 image

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

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

行動號召(CTA) call-to-action-cta

登陸頁面設計可能具有數個連結 — 其中某些連結可能是用作「行動號召」。

行動號召(CTA)是用來讓訪客在登陸頁面上立即採取動作，例如「立即訂閱」、「檢視此影片」、「僅限有限時間」等。

兩個CTA元件都有類似的選項。 點進連結具有其他RTF選項。 以下段落將詳細介紹這些元件。

點進連結 click-through-link

此CTA元件可用來在登入頁面上新增文字連結。 您可以按一下該連結，將使用者引導至元件屬性中指定的目標URL。 它是「行動號召」群組的一部分。

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

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

演算選項 ​說明演算選項。 您可選取下列選項：

CSS ​在[樣式]索引標籤上，輸入CSS樣式表的路徑。

ID ​在[樣式]索引標籤上，輸入元件的ID以唯一識別它。

以下是點進連結的範例：

圖形連結 graphical-link

此CTA元件可用來新增登陸頁面上具有連結的任何圖形影像。 影像可以是簡單的按鈕，也可以是任何圖形影像作為背景。 按一下影像時，使用者將被帶往元件屬性中指定的目標URL。 它是​ 行動號召 ​群組的一部分。

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

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

演算選項 ​說明演算選項。 您可選取下列選項：

CSS ​在[樣式]索引標籤上，輸入CSS樣式表的路徑。

ID ​在[樣式]索引標籤上，輸入元件的ID以唯一識別它。

以下是範例圖形連結：

呼叫動作(CTA)銷售機會表單 call-to-action-cta-lead-form

潛在客戶表單是用於收集訪客/潛在客戶設定檔資訊的表單。 這些資訊可儲存於以後使用，以便根據資訊進行有效的行銷。 此資訊通常包括標題、名稱、電子郵件、出生日期、地址、興趣等。 它是​ CTA銷售機會表單 ​群組的一部分。

CTA銷售機會表單範例看起來像這樣：

CTA銷售機會表單是由數個不同的元件所建置：

前文顯示範例表單；它包含​ 潛在客戶表單 ​元件（開始和結束），有​ 名字 ​和​ 電子郵件ID ​欄位用於輸入，以及​ 提交 ​欄位

在sidekick中，以下元件可用於CTA銷售機會表單：

許多潛在客戶表單元件的通用設定 settings-common-to-many-lead-form-components

雖然每個銷售機會表單元件都有不同的用途，但許多是由類似的選項和引數所組成。

設定任何表單元件時，對話方塊中會提供下列標籤：

潛在客戶表單元件 lead-form-components

下節說明號召性用語銷售機會表單可用的元件。

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

位址列位 ​允許使用者輸入地址資訊。 設定此元件時，您必須在對話方塊中輸入元素名稱。 元素名稱是表單元素的名稱。 這表示資料在存放庫中的儲存位置。

出生日期 ​使用者可以輸入出生日期資訊。

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

名字 ​提供欄位讓使用者輸入其名字。

性別 ​使用者可以從下拉式清單中選取其性別。

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

潛在客戶表單 ​新增此元件以將潛在客戶表單新增至您的登陸頁面。 潛在客戶表單會自動包含「潛在客戶表單的開頭」與「潛在客戶表單的結尾」欄位。 在兩者之間，您新增本節中說明的Lead Form元件。

潛在客戶表單元件使用​ 表單開頭 ​和​ 表單結尾 ​元素來定義表單的開頭和結尾。 兩者一律成對，以確保已正確定義表單。

新增潛在客戶表單後，您可以按一下對應列中的​ 編輯 ​來設定表單的開頭或結尾。

潛在客戶表單的開頭

有兩個索引標籤可用於組態​ 表單 ​和​ 進階：

感謝頁面 ​要參考感謝訪客提供意見的頁面。 如果保留為空白，表單會在提交後重新顯示。

開始工作流程 ​決定提交潛在客戶表單後觸發的工作流程。

Post選項 ​下列張貼選項可供使用：

表單識別碼 ​表單識別碼可唯一識別潛在客戶表單。 如果您在單一頁面上有數個表單，請使用表單識別碼；請確定它們有不同的識別碼。

載入路徑 ​是節點屬性的路徑，用來將預先定義的值載入潛在客戶表單欄位。

此選擇性欄位指定存放庫中節點的路徑。 當此節點具有符合欄位名稱的屬性時，則表單上的適當欄位將使用這些屬性的值預先載入。 如果不存在相符專案，則欄位會包含預設值。

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

驗證資源型別 ​如果您想要驗證整個潛在客戶表單（而不是個別欄位），請定義表單驗證資源型別。

如果您要驗證完整的表單，請一併包含下列其中一項：

動作組態 ​動作組態會隨著Post選項中的選項而變更。 例如，當您選取「建立銷售機會」時，您可以設定要新增銷售機會的清單。

建立登入頁面 creating-a-landing-page

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

使用設計匯入工具 use-of-the-design-importer

由於匯入頁面涉及準備HTML、驗證和測試頁面，因此匯入登入頁面旨在作為管理員工作。 作為管理員，執行匯入的使用者需要對/apps的讀取、寫入、建立及刪除許可權。 如果使用者沒有這些許可權，匯入將會失敗。

Adobe建議在中繼執行個體上使用設計匯入工具。 在測試執行個體上，匯入可以由開發人員測試和驗證，然後開發人員負責將計畫碼部署到生產執行個體。

建立匯入工具頁面 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檔案拖放到AEM中並發佈內容。

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

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

當您匯入設計封裝時，頁面設定功能表中有​ 清除設計 ​和​ 下載匯入的Zip：

下載匯入的設計封裝 downloading-the-imported-design-package

下載zip檔案可讓您記錄哪個zip檔案已使用特定登陸頁面匯入。 在頁面上進行的變更不會新增至zip。

若要下載匯入的設計封裝，請按一下[登入頁面]工具列中的[下載Zip ]。

檢視匯入資訊 viewing-import-information

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

如果匯入的設計封裝發生問題（例如，若其參考的影像/指令碼在封裝內不存在）等，則設計匯入工具會以清單的形式顯示此類問題。 若要檢視問題清單，在傳統使用者介面中，按一下登入頁面工具列中的問題連結。 在下圖中，按一下​ 問題 ​連結會開啟「匯入問題」視窗。

重設登入頁面 resetting-a-landing-page

如果您想要在對登入頁面設計套件進行某些變更後重新匯入此套件，您可以在傳統使用者介面的登入頁面頂端按一下​ 清除，或是在觸控最佳化使用者介面的設定功能表中按一下「清除」，以「清除」登入頁面。 這麼做會刪除匯入的登陸頁面，並建立空白的匯入工具頁面。

清除登入頁面時，您可以移除內容變更。 如果您按一下​ 否，則會保留內容變更，也就是說，jcr:content/importer下的結構會保留，而且只會移除importer頁面元件和etc/design中的資源。 然而，若您按一下​ 是，則會一併移除jcr:content/importer。

在登入頁面上修改和新增元件 modifying-and-adding-components-on-a-landing-page

若要修改登入頁面上的元件，請連按兩下以開啟元件，並像編輯任何其他元件一樣進行編輯。

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

刪除登入頁面 deleting-a-landing-page

刪除登入頁面就像刪除一般AEM頁面。

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

發佈登入頁面 publishing-a-landing-page

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