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.
This page describes the following:
- what landing pages look like in AEM including components available
- how to create a landing page and how to import a design package
- how to work with landing pages in AEM
- how to set up mobile landing pages
Preparing the design package for importing is covered in Extending and Configuring the Design Importer . Integrating with Adobe Analytics is covered in Integrating Landing Pages with Adobe Analytics.
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.
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.
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:
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:
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.
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.
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
When you create a landing page, you need to perform three steps:
- Create an importer page.
- Import the design package.
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.
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 .Your new importer page is displayed.
Preparing the HTML for Import
Before importing the design package, the HTML needs to be prepared. See Extending and Configuring the Design Import for more information.
Importing the Design Package
After an importer page has been created, you can import a design package onto it. Details on creating the design package and its recommended structure are explained in Extending and Configuring the Design Import .
Assuming that you have the design package ready, the following steps describe how to import the design package onto an importer page.
- Open the importer page you created earlier . You see a dropbox with text saying Zip .
- Drag and drop the design package onto the dropbox. Notice the arrow changes direction when a package is dragged over it.
- As a result of drag and drop, you see your landing page in place of the importer page. Your HTML landing page has been successfully imported.
If you have trouble importing the design package, see Troubleshooting .
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.
This section describes how to do the following:
- Delete a landing page
- Download the design package
- View import information
- Reset a landing page
- Preview the landing page
- Activate/publish a landing page
When you import the design package, the following toolbar is available at the top of the landing page:
Downloading the imported design package
Downloading the zip file lets you record which zip was imported with a particular landing page. Please note that changes made on a page are not added to the zip.
To download the imported design package, click Download Zip in the Landing Page toolbar.
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.
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.
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.
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.