登陸頁面 landing-pages

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

此頁面說明下列專案:

  • AEM中的登入頁面,包括可用元件
  • 如何建立登入頁面,以及如何匯入設計封裝
  • 如何在AEM中使用登入頁面
  • 如何設定行動登陸頁面

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

CAUTION
AEM 6.5🔗已棄用用來匯入登入頁面的Design Importer 。
CAUTION
由於Design Importer需要/apps的存取權,因此無法在無法變更/apps的容器化雲端環境中運作。

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

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

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

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

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

  2. 準備HTML和資產。

  3. 將資源封裝成ZIP檔案(此處稱為「設計封裝」)。

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

  5. 修改並發佈頁面。

案頭登陸頁面 desktop-landing-pages

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

chlimage_1-2

行動登陸頁面 mobile-landing-pages

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

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

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

chlimage_1-22

NOTE
如果案頭登陸頁面被刪除或停用,行動登陸頁面會與案頭登陸頁面一起刪除/停用。

登陸頁面元件 landing-page-components

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

  • 文字,適用於任何文字

  • 標題,針對H1-6標籤中的內容

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

  • 行動號召:

    • 點進連結
    • 圖形連結
  • CTA銷售機會表單,用於擷取使用者資訊

  • 段落系統(Parsys),可新增任何元件,或轉換上述元件

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

文字 text

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

chlimage_1-23

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

chlimage_1-24

標題 title

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

chlimage_1-25

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

chlimage_1-26

影像 image

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

chlimage_1-27

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

chlimage_1-28

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

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

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

  • 點進連結 — 可讓您新增文字連結,當按一下連結時,會將訪客導向至目標URL。
  • 圖形連結 — 可讓您新增影像,在按一下時讓訪客移至目標URL。

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

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

chlimage_1-29

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

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

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

  • 在新瀏覽器視窗中載入頁面
  • 在目前視窗中載入頁面
  • 在父框架中載入頁面
  • 取消所有框架,並在完整瀏覽器視窗中載入頁面

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

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

以下是點進連結的範例:

chlimage_1-30

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

chlimage_1-31

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

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

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

  • 在新瀏覽器視窗中載入頁面
  • 在目前視窗中載入頁面
  • 在父框架中載入頁面
  • 取消所有框架,並在完整瀏覽器視窗中載入頁面

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

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

以下是範例圖形連結:

chlimage_1-32

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

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

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

chlimage_1-33

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

  • 潛在客戶表單
    潛在客戶表單元件會定義頁面上新潛在客戶表單的開始和結束。 其他元件則可放置在元素之間,例如電子郵件ID、名字等。

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

  • 設定檔元件
    個人資料元件與用於社交合作和其他需要訪客個人化區域的訪客個人資料有關。

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

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

chlimage_1-34

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

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

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

  • 標題與文字
    您需要在此指定基本資訊,例如元件的標題及任何隨附文字。 在適當的情況下,它也可讓您定義其他關鍵資訊,例如欄位是否可多重選取以及可供選取的專案。

  • 初始值
    可讓您指定預設值。

  • 限制
    您可以在此指定是否需要欄位,並將限制放置在該欄位上(例如,必須是數值等)。

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

NOTE
您看到的欄位會依個別元件而異。
並非所有潛在客戶表單元件都可使用所有選項。 請參閱Forms以取得這些一般設定的詳細資訊。

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

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

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

chlimage_1-35

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

chlimage_1-36

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

chlimage_1-37

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

chlimage_1-38

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

chlimage_1-39

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

chlimage_1-40

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

chlimage_1-41

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

chlimage_1-42

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

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

潛在客戶表單的開頭

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

chlimage_1-43

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

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

chlimage_1-44

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

  • 建立銷售機會
  • 電子郵件服務:建立訂閱者並新增至清單 — 如果您使用ExactTarget之類的電子郵件服務提供者,請使用此功能。
  • 電子郵件服務:傳送自動回應的電子郵件 — 如果您使用ExactTarget等電子郵件服務提供者,請使用。
  • 電子郵件服務:從清單中取消訂閱使用者 — 如果您使用ExactTarget等電子郵件服務提供者,請使用。
  • 取消訂閱使用者

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

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

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

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

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

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

  • 使用者端驗證的指令碼:
    /apps/<myApp>/form/<myValidation>/formclientvalidation.jsp

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

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

chlimage_1-45

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

  • 提交名稱
    識別碼(如果您在表單中使用多個提交按鈕)。

  • 提交標題
    按鈕上顯示的名稱,例如「提交」或「傳送」。

  • 顯示重設按鈕
    選取核取方塊以顯示「重設」按鈕。

  • 重設標題
    顯示在[重設]按鈕上的名稱。

  • 描述
    顯示在按鈕下方的資訊。

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

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

  1. 建立匯入工具頁面。
  2. 準備HTML以匯入。
  3. 匯入設計封裝。

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

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

NOTE
由於設計匯入工具旨在作為需要對/apps的讀取、寫入、建立和刪除許可權的管理工具,因此Adobe不建議在生產環境中使用設計匯入工具。

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

建立匯入工具頁面 creating-an-importer-page

在匯入登入頁面設計之前,您需要先建立匯入工具頁面,例如在行銷活動底下。 「匯入者頁面」範本可讓您匯入完整的HTML登陸頁面。 此頁面包含一個放置方塊,您可在其中使用拖放功能匯入登入頁面設計套件。

NOTE
依預設,Importer頁面只能在行銷活動底下建立,但您也可以覆蓋此範本,在/content/mysite底下建立登入頁面。

若要建立登入頁面:

  1. 移至​ 網站 ​主控台。

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

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

  4. 選取​ Importer Page ​範本,並新增標題,或選擇加入名稱,然後按一下​ 建立

    chlimage_1-1-1

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

準備匯入的HTML preparing-the-html-for-import

在匯入設計套件之前,必須先準備HTML。 如需詳細資訊,請參閱延伸與設定設計匯入

匯入設計封裝 importing-the-design-package

建立匯入工具頁面後,您就可以將設計封裝匯入到該頁面上。 有關建立設計封裝及其建議結構的詳細資訊,請參閱延伸與設定設計匯入

假設您已準備好設計封裝,下列步驟會說明如何將設計封裝匯入至匯入工具頁面。

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

    chlimage_1-46

  2. 將設計套件拖放至投寄箱上。 請注意,當拖曳套件時,箭頭會變更方向。

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

    chlimage_1-2-1

NOTE
匯入時,標籤會因為安全原因而遭到清除,以避免匯入和發佈無效的標籤。 這假設僅限HTML的標籤以及所有其他形式的元素(例如內嵌SVG或Web元件)將被篩選掉。
NOTE
如果您無法匯入設計封裝,請參閱疑難排解

使用登入頁面 working-with-landing-pages

登入頁面的設計和資產通常由設計人員建立,可能會是在代理商所使用的工具(例如Adobe Photoshop或Adobe Dreamweaver)中。 設計完成時,設計人員會傳送包含所有資產的壓縮檔案給行銷。 然後,行銷中的聯絡人負責將zip檔案拖放到AEM中並發佈內容。

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

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

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

chlimage_1-3-1

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

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

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

檢視匯入資訊 viewing-import-information

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

chlimage_1-47

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

chlimage_1-3

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

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

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

NOTE
如果您決定移除內容變更,則您在匯入的登陸頁面上所做的所有變更以及所有頁面屬性都會在您按一下「清除」時遺失。

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

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

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

NOTE
如果登入頁面上的元件無法編輯,則在修改HTML檔案之後,您需要重新匯入zip檔案。這表示在匯入期間,不可編輯的零件未轉換成AEM元件。

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

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

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

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

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

NOTE
發佈案頭登入頁面也會發佈其對應的行動版本(如果有的話)。 但發佈行動登陸頁面不會發佈案頭版本。
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2