您查看的帮助内容对应的版本是:

登陆页面功能可轻松快捷地将设计和内容准确地导入 AEM 页面。Web 开发人员可准备能够以完整页面或部分网页导入的 HTML 和额外资产。该功能可有效地用于创建只在限定时段处于激活状态且需要快速创建的营销活动登陆页面。

该页面讨论以下问题:

  • 登陆页面(包括可用组件)在 AEM 中的外观
  • 如何创建登陆页面,以及如何导入设计包
  • 如何在 AEM 中处理登陆页面
  • 如何设置移动登陆页面

有关如何准备要导入的设计包,请参阅扩展和配置设计导入程序中的相关介绍。有关如何与 Adobe Analytics 集成,请参阅将登陆页面与 Adobe Analytics 集成中的相关介绍。

什么是登陆页面?

登陆页面是作为营销推广活动“端点”的单页或多页站点 - 例如电子邮件、广告标语/横幅、社交媒体等。登陆页面具有多种用途,但所有这些用途都有一个共同点,那就是只有让访客完成某一项任务,才算是登陆页面的成功。

AEM 中的登陆页面功能允许营销人员与各代理商的 Web 开发人员或内部创意团队共同合作,来创建可被轻松导入 AEM 的页面设计,并且它们仍然可由营销人员编辑,并根据与其余 AEM 支持站点相同的管理规定进行发布。

在 AEM 中,可通过执行以下步骤来创建登陆页面。

  1. 在 AEM 中创建包含登陆页面画布的页面。AEM 附带一个名为导入程序页面的示例。
  2. 准备 HTML 和资产。
  3. 将相关资源打包为一个 ZIP 文件,这里我们将其称之为“设计包”。
  4. 将设计包导入到导入程序页面中。
  5. 修改并发布页面。

桌面登陆页面

AEM 中的示例登陆页面如下所示:

chlimage_1

移动登陆页面

登陆页面也可具有移动版本。要使登陆页面具有单独的移动版本,导入设计必须包含两个 html 文件,即:index.htm(l)mobile.index.htm(l)

登陆页面导入过程与普通登陆页面相同,登陆页面设计另有一个对应移动登陆页面的 html 文件。与桌面登陆页面 html 文件一样,该 html 文件也必须具有画布 divid=cqcanvas,并且支持桌面登陆页面对应的所有可编辑组件。  

移动登陆页面可创建为桌面登陆页面的子页面。若要打开它,请在网站中导航至登陆页面,然后打开子页面。

chlimage_1

注意:

如果桌面登陆页面被删除或取消激活,则移动登陆页面也会随之一起被删除或取消激活。

登陆页面组件

要使导入的 HTML 部分可在 AEM 内编辑,您可以将登陆页面 HTML 里的内容直接映射至 AEM 组件。设计导入程序可根据默认设置理解以下组件:

  • 文本,即任何文本
  • 标题,即 H1-6 标记中的内容
  • 图像,即应当可以调换的图像
  • 行动动员:
    • 点进率链接
    • 图形链接
  • CTA 潜在客户表单,用于捕捉用户信息
  • 段落系统 (Parsys),用于添加任意组件,或以上经过转换的组件

此外,还能扩展此组件,并支持自定义组件。本节详细介绍相关组件。

文本

通过文本组件可以使用 WYSIWYG 编辑器输入文本块。有关更多信息,请参阅文本组件

以下是关于登陆页面上的文本组件示例。

chlimage_1

标题

该标题组件允许您显示一个标题,并配置其大小 (h1-6)。有关更多信息,请参阅标题组件

以下是关于登陆页面上的标题组件示例:

chlimage_1

图像

该图像组件显示可在内容查找器中进行拖放或通过单击上传的图像。有关更多信息,请参阅图像组件

以下是关于登陆页面上的图像组件示例:

chlimage_1

行动动员 (CTA)

一个登陆页面设计可以包含多个链接 - 其中部分链接可能用作“行动动员”。

行动动员 (CTA) 用于促使访客立即在登陆页面上采取操作,例如“立即订阅”、“观看此视频”、“时间有限”等等。 

  • 点进率链接 - 允许您添加一个文本链接,当访客单击这个链接时即被引向目标 URL。
  • 图像链接 - 允许您添加一个图像链接,当访客单击这个链接时即被引向目标 URL。

两个 CTA 组件都具有相似的选项。点进率链接另有富文本选项。这些组件将在以下段落中加以详细介绍。 

点进率链接

该 CTA 组件可用于在登陆页面上添加文本链接。当用户单击该链接时即被引向组件属性中指定的目标 URL。它是“行动动员”组的一部分。

chlimage_1

标签

用户看到的文本。您可以使用富文本编辑器来修改格式设置。

目标 URL

输入您希望用户在单击文本时要访问的 URI。

呈现选项

介绍渲染选项。选项如下:

  • 在新浏览器窗口中加载页面
  • 在当前窗口中加载页面
  • 在父框架中加载页面
  • 取消所有框架,并在完整的浏览器窗口中加载页面

CSS

样式选项卡中,输入 CSS 样式表的路径。

ID

样式选项卡中,输入组件的 ID,以便唯一识别它。

以下是一个点进率链接示例:

chlimage_1

图形链接

该 CTA 组件可用于在登陆页面上添加任何带链接的图像。该图像可以是一个简单的按钮,也可以是任何用作背景的图像。当用户单击此图像时,即被引向组件属性中指定的目标 URL。它是行动动员组的一部分。

chlimage_1

图像

拖动或添加用户单击后可转到目标 URL 的图像。

标题

高级选项卡上,输入图像的标题。

替换文本

高级选项卡上,输入在图形关闭的情况下使用的替换文本。

描述

高级选项卡上,输入图像的描述。

大小

高级选项卡上,输入图像的宽度和高度。

目标 URL

输入您希望用户在单击图像时要访问的 URI。

呈现选项

介绍渲染选项。选项如下:

  • 在新浏览器窗口中加载页面
  • 在当前窗口中加载页面
  • 在父框架中加载页面
  • 取消所有框架,并在完整的浏览器窗口中加载页面

CSS

样式选项卡中,输入 CSS 样式表的路径。

ID

样式选项卡中,输入组件的 ID,以便唯一识别它。

以下是一个图形链接示例:

chlimage_1

行动动员 (CTA) 潜在客户表单

潜在客户表单是一种用于搜集访客/潜在客户个人资料信息的表单。这类信息可被存储起来,以供以后进行有针对性的营销活动。这类信息通常包含头衔、姓名、电子邮件、出生日期、地址、兴趣等内容。它是 CTA 潜在客户表单的一部分。

以下是一个 CTA 潜在客户表单示例:

chlimage_1

CTA 潜在客户表单是由多个不同组件构成的:

  • 潜在客户表单
    潜在客户表单组件定义页面上新的潜在客户表单的开头和结尾。其他组件稍后可放置在这些元素之间,例如电子邮件 ID、名字等。
  • 表单字段和元素
    表单字段和元素可以包括文本框、单选按钮、图像等。用户通常在表单字段中完成操作,例如键入文本。有关更多信息,请参阅单个表单元素。
  • 个人资料组件
    与访客个人资料相关的个人资料组件用于社交协作以及需要访客个人信息的其他区域。

前面显示的是一个示例表单,它的组成部分包括潜在客户表单组件(开头和结尾组件),可输入具体内容的名字字段和电子邮件 ID 字段,以及提交字段

在 Sidekick 中,有以下可供 CTA 潜在客户表单使用的组件:

chlimage_1

许多潜在客户表单组件的常规设置

尽管每个潜在客户表单组件都具有不同的用途,但许多表单组件都由相似的选项和参数构成。

配置任意表单组件时,对话框中都提供有下列选项卡:

  • 标题与文本
    您需要在此指定基本信息,例如组件的标题以及任何附带的文本。在适当情况下,该选项卡还允许您定义其他重要信息,例如字段是否可多选以及可供选择的项目。
  • 初始值
    允许您指定默认值。
  • 约束
    您可以在此处指定字段是否为必填字段以及是否对该字段进行约束(例如,必须为数字等)。
  • 样式
    指示字段的大小和样式。

注意:

您看到的字段差别很大,具体差别取决于单个不同的组件。

并非所有选项对所有潜在客户表单组件均可用。有关这些常用设置的更多信息,请参阅“表单”。

潜在客户表单组件

下节介绍行动动员潜在客户表单的可用组件。

关于

允许用户添加“关于”信息。

chlimage_1

地址字段

允许用户输入地址信息。在配置该组件时,您必须在对话框中输入元素名称元素名称即是表单元素的名称。该选项卡指示数据在存储库中的存储位置。

chlimage_1

出生日期

用户可输入出生日期信息。

chlimage_1

电子邮件 Id

允许用户输入电子邮件地址 (ID)。

chlimage_1

名字

为用户提供输入其名字的字段。

chlimage_1

性别

用户可在下拉列表中选择其性别。

chlimage_1

姓氏

用户可输入姓氏信息。

chlimage_1

潜在客户表单

添加此组件,可将潜在客户表单添加到您的登陆页面。潜在客户表单会自动包含一个潜在客户表单的开头潜在客户表单的结尾字段。其间,您还可以添加本节中介绍的潜在客户表单组件。

chlimage_1

潜在客户表单组件使用表单开始表单结尾元素定义表单的开始和结尾。它们始终是成对的,以确保正确定义表单。

在添加了潜在客户表单之后,即可以配置表单的开头或结尾,方法是单击相应工具栏中的编辑

潜在客户表单的开头

可供配置的两个选项卡为:表单高级

chlimage_1

感谢页面

为感谢访客提供其意见而引用的页面。如果留空,表单将在提交后重新显示。

启动工作流

决定在提交潜在客户表单后将触发哪个工作流。

chlimage_1

发布选项

有以下发布选项可供选择:

  • 创建潜在客户
  • 电子邮件服务: 创建订阅者并添加到列表 - 如果您当前使用的是 ExactTarget 之类的电子邮件服务提供商,则可以使用此选项。
  • 电子邮件服务: 发送自动回复的电子邮件 - 如果您当前使用的是 ExactTarget 之类的电子邮件服务提供商,则可以使用此选项。
  • 电子邮件服务: 使用户从列表中取消订阅 - 如果您当前使用的是 ExactTarget 之类的电子邮件服务提供商,则可以使用此选项。
  • 使用户取消订阅

表单标识符

表单标识符可唯一标识潜在客户表单。单个页面上具有多个表单时,应使用表单标识符;请确保它们具有不同的标识符。

加载路径

是用于将预定义的值加载到潜在客户表单字段的节点属性的路径。

这是指定库中节点的路径的可选字段。如果此节点具有与字段名称相匹配的属性,则表单上的相应字段将随这些属性的值预加载。如果不存在任何匹配,则字段将包含默认值。

客户端验证

指示此表单是否需要客户端验证(始终进行服务器验证)。结合表单 Captcha 组件可以实现这一点。

验证资源类型

如果您要验证整个潜在客户表单(而非单个字段),则需定义表单验证资源类型。

如果您要验证完整表单,还应包含以下任一内容:

  • 客户端验证的脚本:
        /apps/<myApp>/form/<myValidation>/formclientvalidation.jsp
  • 服务器端验证的脚本:
        /apps/<myApp>/form/<myValidation>/formservervalidation.jsp

操作配置

根据发布选项中的不同选择,操作配置也会相应地发生变化。例如,如果您选择创建潜在客户,则可以配置要将潜在客户添加到哪个列表。

chlimage_1
  • 显示提交按钮
    指示是否应显示提交按钮。
  • 提交名
    在表单中使用多个提交按钮时的标识符。
  • 提交标题
    按钮上显示的名称,例如“提交”或“发送”。
  • 显示重设按钮
    选中该复选框可使重置按钮可见。
  • 重置标题
    重置按钮上显示的名称。
  • 说明
    按钮下方显示的信息。

创建登陆页面

在创建登陆页面时,需要执行以下三个步骤:

  1. 创建导入程序页面。
  2. 准备要导入的 HTML。
  3. 导入设计包。

创建导入程序页面

您需要先创建一个导入程序页面(例如在营销活动下),然后才能导入登陆页面设计。使用导入程序页面模板,可以导入完整的 HTML 登陆页面。该页面包含一个拖放框,可以在此框内使用拖放操作导入登陆页面设计包。

注意:

默认情况下,导入程序页面只能在营销活动下创建,但您也可以覆盖此模板,以便在 /content/mysite 下创建登陆页面。

要创建新的登陆页面,请执行以下操作:

  1. 导航到站点 > 营销活动,然后选择您的营销活动。

  2. 单击创建 > 页面

  3. 选择导入程序页面模板,然后单击下一步。添加标题以及(可选)名称和标记,然后单击创建

    chlimage_1

    随即会显示您的新导入程序页面。

准备要导入的 HTML

在导入设计包之前,需要准备 HTML。有关更多信息,请参阅扩展和配置设计导入

导入设计包

创建导入程序页面后,即可将设计包导入其中。有关创建设计包及其推荐结构的详细信息,请参阅扩展和配置设计导入中的说明。

如果您的设计包已准备就绪,请参阅以下步骤说明,将设计包导入到导入程序页面。

要导入设计包,请执行以下操作:

  1. 打开您之前创建的导入程序页面。

    chlimage_1
  2. 将设计包拖放到拖放框中。您会看到登陆页面替代了导入程序页面。此时已成功导入您的页面。

    chlimage_1

注意:

如果您在导入设计包时遇到问题,请参阅疑难排解

处理登陆页面

登陆页面的设计和资产通常是由代理商的设计人员使用其惯用的工具创建的,如 Adobe Photoshop 或 Adobe Dreamweaver。在设计完成后,设计人员会向营销部门发送一个包含所有资产的 zip 文件。随后即由营销部门的联系人负责将 zip 文件放入 AEM,并发布相关内容。

此外,导入登陆页面后,设计人员可能还需要对其进行修改:编辑或删除内容,以及配置行动动员组件。最后,该营销人员还需要预览登陆页面并激活营销活动,以确保登陆页面已发布。

本节介绍如何执行以下操作:

在界面的设置菜单中,可以使用清除设计下载导入的 Zip 文件

chlimage_1

下载导入的设计包

下载 zip 文件,可让您记录随特定登陆页面导入了哪个 zip。请注意,页面上所做的更改并未添加到 zip 文件。

要下载导入的设计包,请从设置菜单中选择下载导入的 Zip 文件

查看导入信息

在经典用户界面中,您可以随时单击登陆页面顶部的蓝色感叹号来查看有关上次导入的信息。

chlimage_1

如果导入的设计包存在某些问题,例如是关于某些包中并不存在的图像/脚本,或诸如此类的问题,则设计导入程序会以列表形式显示这些问题。在经典用户界面中,要查看问题列表,请单击登陆页面工具栏中的问题链接。如下图所示,单击问题链接可打开“导入问题”窗口。

chlimage_1

重置登陆页面

如果您想要在对登陆页面设计包进行更改后重新将其导入,则可以单击设置菜单中的清除。执行该操作可删除导入的登陆页面,并创建一个空白的导入程序页面。

在清除登陆页面时,您可以删除内容更改。如果单击,则内容更改会得以保留,即保留 jcr:content/importer 下的结构,而只删除 etc/design 中的导入程序页面组件和资源。反之,如果单击,则会同时删除 jcr:content/importer

注意:

如果您决定删除内容更改,那么只需单击清除,您在导入的登陆页面上所做的所有更改以及所有页面属性即会全部丢失。

在登陆页面上修改和添加组件

要在登陆页面上修改组件,请双击它们将其打开,并像编辑其他组件那样对它们进行编辑。

要在登陆页面上添加组件,请将组件从“组件”窗格拖放到登陆页面上,然后根据需要进行编辑。

注意:

如果登陆页面上的组件无法编辑,则需要在修改 HTML 文件之后重新导入 zip 文件。这意味着在导入期间,不可编辑的部分不会转换为 AEM 组件。

删除登陆页面

删除登陆页面的过程与删除普通 AEM 页面类似。 

唯一的例外是在删除桌面登陆页面时,也会删除对应的移动登陆页面(如果有),但反之则不然。

发布登陆页面

与发布普通页面一样,您也可以发布登陆页面及其所有依赖项。 

注意:

发布桌面登陆页面的同时,也会发布与其对应的移动版本(如果有)。但发布移动登陆页面,并不会同时发布其桌面版本。 

本产品经 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 许可  Twitter™ 与 Facebook 中的内容不在 Creative Commons 的条款约束之下。

法律声明   |   在线隐私策略