The landing pages feature allows quick and easy importing of a design and content right into an AEM page. A web developer can prepare the HTML and additional assets that can be imported as a full page or only a part of a page. The functionality is useful to create marketing landing pages that are only active for a limited time and need to be created quickly.

What are Landing Pages?

Landing pages are single or multipage sites that are the "endpoint" of a marketing outreach - for example with email, adwords/banners, social media. A landing page can serve various purposes, but all have one thing in common - the visitor should fulfill a task and that defines the success of a landing page.

The Landing Pages feature in AEM allows marketers to work with web designers at agencies or internal creative teams to create page designs that can be easily be imported into AEM and still be editable by the marketers and published under the same governance as the rest of the AEM-powered sites.

In AEM, you create landing pages by performing the following steps:

Create a page in AEM that contains the landing pages canvas. AEM ships with a sample called Importer Page.

Package the resources into a ZIP file referred to here as the Design Package.

Import the design package on the importer page.

Modify and publish the page.

Desktop Landing Pages

A sample landing page in AEM looks as follows:

Mobile Landing Pages

A landing page can also have a mobile version of the page. To have a separate mobile version of the landing page the import design has to have two html files: index.htm(l) and mobile.index.htm(l).

The landing page import procedure is same as that of a normal landing page, the landing page design has an additional html file corresponding to the mobile landing page. This html file too, must have a canvas div with id=cqcanvas just like the desktop landing page html and it supports all the editable components described for the desktop landing page.

Mobile landing page is created as a child page of the desktop landing page. To open it, navigate to the landing page in Websites and open the child page.

Huomautus:

The mobile landing page gets deleted/deactivated along with the desktop landing page if the desktop landing page is deleted or deactivated.

Landing Page Components

To make parts of the HTML that gets imported editable within AEM, you can map content within the Landing pages HTML to AEM components directly. The design importer understands the following components per default:

Text, for any text

Title, for content in H1-6 tags

Image, for images that should be made exchangeable

Call To Actions:

Clickthrough Link

Graphical Link

CTA Lead-Form, to capture user information

Paragraph System (Parsys), to allow any component to be added, or the above component converted

In addition, it is possible to extend this and support custom components. This section describes the components in detail.

Text

The Text component lets you enter a text block using a WYSIWYG editor. See Text component for more information.

The following is an example of a text component on a landing page:

Title

The title component lets you display a title and configure the size (h1-6). See Title component for more information.

The following is an example of a title component on a landing page:

Image

The image component displays an image that you can either drag and drop from the Content Finder or click to upload. See image component for more information.

The following is an example of an image component on a landing page:

Call to Action (CTA)

A landing page design may have several links - some of these may be intended as "Calls to action."

Call to action (CTA) is used to get the visitor take immediate action on the landing page such as "Subscribe Now," "View this video," "Limited Time Only" and so on.

Click Through Link - Lets you add a text link that when clicked takes the visitor to a target URL.

Graphical Link - Lets you add an image that when clicked takes the visitor to a target URL.

Both CTA components have similar options. The Click Through Link has additional rich text options. The components are described in detail in the following paragraphs.

Click Through Link

This CTA component can be used to add a text link on the landing page. That link can be clicked to take the user to the target URL specified in the component properties. It is a part of "Call to Action" group.

On the Style tab, enter an ID for the component to uniquely identify it.

The following is an example of a click through link:

Graphical Link

This CTA component can be used to add any graphical image with link on the landing page. The image can be a simple button or any graphical image as background. When the image is clicked, the user is taken to the target URL specified in the component properties. It is a part of the Call to Action group.

Label

The text users see in the graphic. You can modify formatting with the rich text editor.

Target URL

Enter the URI you want users to visit if they click the image.

Rendering Options

Describes rendering options. You can select from the following:

Load page in a new browser window

Load page in current window

Load page in the parent frame

Cancel all frames, and load page in full browser window

CSS

On the Style tab, enter a path to your CSS style sheet.

ID

On the Style tab, enter an ID for the component to uniquely identify it.

The following is an example graphical link:

Call to Action (CTA) Lead Form

A lead form is a form that is used to collect a visitor/lead's profile information. This information can be stored and used later to do an effective marketing based on the information. This information generally includes title, name, email, date of birth, address, interest, and so on. It is a part of the CTA Lead form group.

An example CTA lead form looks like this:

CTA lead forms are built up from several different components:

Lead Form
The lead form component defines the beginning and end of a new lead form on a page. Other components can then be placed in between these elements, such as Email Id, First Name, and so on.

Form fields and elements
Form fields and elements can include text boxes, radio buttons, images, and so on. The user often completes an action in a form field, such as typing text. See individual form elements for more information.

Profile Components
Profile components relate to visitor profiles used for social collaboration and other areas where visitor personalization is required.

The preceding shows an example form; it is comprised of the Lead Form component (start and end), with First Name and Email Id fields used for input and a Submit field

From the sidekick, the following components are avaiable for the CTA Lead Form:

Settings common to many lead form components

Although each of the lead form components has a different purpose, many are composed of similar options and parameters.

When configuring any of the form components the following tabs are available in the dialog:

Title and Text
Here you need to specify the basic information, such as the title of the component and any accompanying text. Where appropriate, it also allows you to define other key information such as whether the field is multi-selectable and items available for selection.

Initial Values
Allows you to specify a default value.

Constraints
Here you can specify whether a field is required and place constraints are on that field (for example, must be numeric, and so on).

Styling
Indicates the size and styling of the fields.

Huomautus:

The fields you see vary depending on the individual component.

Not all options are available to all lead form components. See Forms for more information on these common settings.

Lead Form Components

The following section describes the components available to Call-to-Action lead forms.

About

Lets users add About information.

Address Field

Allows users to enter address information. When configuring this component, you must enter the Element Name in the dialog. The Element Name is the name of the form element. This indicates where in the repository the data is stored.

Date of Birth

Users can enter date of birth information.

Email Id

Allows users enter an email address (identification).

First Name

Provides a field for users to enter their first name.

Gender

Users can select their gender from a dropdown list.

Last Name

Users can enter Last Name information.

Lead Form

Add this component to add a lead form to your landing page. A lead form automatically contains a Start of Lead Form and End of Lead Form field. In between, you add the Lead Form components described in this section.

The Lead Form component defines both the start and end of a form using the Form Start and Form End elements. These are always paired to ensure that the form is correctly defined.

After you have added the lead form, you can configure the start of form or end of form by clicking Edit in the corresponding bar.

Start of Lead Form

Two tabs are available for configuration Form and Advanced:

Thank You Page

The page to be referenced to thank visitors for providing their input. If left blank, the form re-displays after submission.

Start Workflow

Determines which workflow is triggered once a lead form is submitted.

Post Options

The following post options are available:

Create Lead

Email Service: Create Subscriber and add to list - Use if you are using a email service provider like ExactTarget.

Email Service: Send auto-responder email - Use if you are using a email service provider like ExactTarget.

Email Service: Unsubscribe user from list - Use if you are using a email service provider like ExactTarget.

Unsubscribe user

Form Identifier

The form identifier uniquely identifies the lead form. Use the form identifier if you have several forms on a single page; make sure they have different identifiers.

Load Path

Is the path to node properties used to load predefined values into the lead form fields.

This is an optional field that specifies the path to a node in the repository. When this node has properties that match the field names, then the appropriate fields on the form are preloaded with the value of those properties. If no match exists, then the field contains the default value.

Client Validation

Indicates whether client validation is required for this form (server validation always occurs). This can be achieved in conjunction with the Forms Captcha component.

Validation Resource Type

Defines the form validation resource type if you want to validate the entire lead form (instead of individual fields).

If you are validating the complete form, also include one of the following:

A script for client validation: /apps/<myApp>/form/<myValidation>/formclientvalidation.jsp

A script for validation on the server side: /apps/<myApp>/form/<myValidation>/formservervalidation.jsp

Action Configuration

Depending on the selection in Post Options, the Action Configuration changes. For example, when you select Create Lead, you can configure what list the lead is added to.

Show Submit Button
Indicates whether a Submit button should be shown or not.

Submit Name
An identifier if you are using multiple submit buttons in a form.

Submit Title
The name that appears on the button, such as Submit or Send.

Show Reset Button
Select check box to make the Reset button visible.

Reset Title
The name that appears on the Reset button.

Description
Information that appears below the button.

Creating a Landing Page

Creating an Importer Page

Before you can import your Landing Page design, you need to create an importer page, for example under a campaign. The Imporer Page template lets you import your full HTML landing page. The page contains a drop box where the landing page design package can be imported by using drag and drop.

Huomautus:

By default, an Importer Page can only be created under campaigns, but you can also overlay this template in order to create a landing page under /content/mysite.

To create a new landing page:

Go to the Websites console.

Select your campaign in the left pane.

Click New to open the Create Page window.

Select the Importer Page template and add a title and optionally, a name, and click Create.

Working with Landing Pages

The design and assets for a landing page are usually created by a designer possibly at an agency in tools that they are used to such as Adobe Photoshop or Adobe Dreamweaver. When the design is complete, the designer sends a zip file with all the assets to marketing. The contact in marketing is then responsible for dropping the zip file into AEM and publishing the content.

In addition, the designer may need to make modifications to the landing page after it is imported by editing or deleting content and configuring the call-to-action components. Last, the marketeer will want to preview the landing page and then activate the campaign to ensure the landing page is published.

Viewing import information

At any time, you can view information about the last import by clicking the blue exclamation mark at the top of the landing page in the classic user interface.

In case the imported design package has some issues, for example, if it refers to images/scripts that do not exist within the package, and so on, then the design importer displays such issues in the form of a list. To view the list of issues, in the classic user interface, click the issues link in the Landing Page toolbar. In the following image, clicking on Issues link opens the Import Issues window.

Resetting a landing page

In case you want to re-import your landing page design package after making some changes to it, you can "clear" the landing page by clicking Clear at the top of the landing page in the classic user interface or click Clear in the settings menu in the touch-optimized user interface. Doing so deletes the imported landing page and creates a blank importer page.

While clearing the landing page, you can remove the content changes. If you click No, then the content changes are preserved, that is, the structure under jcr:content/importer is preserved and only the importer page component and the resources in etc/design are removed. Whereas, if you click Yes, the jcr:content/importer is also removed.

Huomautus:

If you decide to remove the content changes, then all the changes that you made on the imported landing page as well as all page properties are lost when you click Clear.

Modifying and Adding Components on a Landing Page

To modify components on the landing page, double-click them to open them and edit as you would any other component.

To add components on the landing page, drag and drop components to the landing page - either from the sidekick in classic user interface or from the Components pane in the touch-optimized user interface - and edit as appropriate.

Huomautus:

If a component on the landing page cannot be edited, you need to re-import the zip file after modifying the HTML file. It means that during the import, the non-editable parts were not converted into AEM components.

Deleting a landing page

Deleting a landing page is like deleting a normal AEM page.

The only exception is that when you delete a desktop landing page, it also deletes the corresponding mobile landing page (if present) but not vice-versa.

Publishing a landing page

You can publish the landing page and all its dependencies just like publishing a normal page.

Huomautus:

Publishing the desktop landing page also publishes its corresponding mobile version (if any). But publishing a mobile landing page does not publish the desktop version.