Here at Netcentric, the question of having a landing page arose when we officially announced that we are going to open a new office in Frankfurt in the summer of 2015. Since we are all excited about our sixth location in only three years, we wanted to create something special to give the occasion space and attention it deserves.
Mobile or desktop? Go for both
Being an Adobe Marketing Cloud evangelist we love to play with the features and settings AEM and other products have to offer. Lucky for us, Adobe makes creating landing pages in AEM painless and stress-free.
Using the Adobe Experience Manager campaign function you can easily create landing pages and other campaigns. One can simply create an html page and upload a page as a zip folder into the right campaign of the AEM instance.
Additional features of the landing page function include uploading capabilities and also a mobile version of the page. All you need to do is to create a mobile.index.htm(l) and include it in the zip folder that also contains the index.htm(l) file.
Structuring the folder the right way
In order to be properly rendered by AEM, your folder needs to follow a specific structure. While the index.html needs to be inside the main folder, the CSS, JavaScript, and pictures have to be in their own subfolder. For example, our Frankfurt folder looks like this:
- Frankfurt/index.html
- Frankfurt/css/stylefrankfurt.css
- Frankfurt/js/frankfurtjs.js
- Frankfurt/img/frankfurtpic.jpg
- Frankfurt/img/logo500px.png
Until now you might have wondered, “But what if I need to change the text or other components once I have uploaded them?” Luckily, AEM provides the right tools to provide an easy to use and updated landing page. When creating the html document all you need to keep in mind is that you must include a few additional commands that help AEM interpret the divs as AEM components. For example, with our Frankfurt landing page, all we needed to include was the following code line:
<div data-cq-component="text">Text goes here</div>
This little additional line allows us to modify content directly in the CMS, even if it is just a static html page. In our AEM instance we used it for our career and blog section:
The text component is not the only one that can be inserted directly into the page to make your life easier though. Adobe lists the following commands that can be included in the html file, among others:
Text
Title
Image
Call to Action (CTA)
Click through and graphical link
Getting the page ready for publishing
Once you are satisfied with the look and usability of the page it is ready to be zipped up and uploaded to the campaign. We created a new campaign called “Frankfurt” and once opened the window indicates to drop the zip file into the page. You can either click on the zip folder sign to upload your files or simply drag and drop it from your finder.
Once everything is beautifully uploaded it’s time to edit the properties. AEM allows you to create a Vanity URL that makes it easy to remember and simple to share. After a long debate about the best Vanity URL for our purpose, we stuck to the easiest and most straight forward option: We called it /frankfurt so that it’ll show up as http://netcentric.biz/frankfurt.
Another important setting is enabling analytics on the page as otherwise the performance of the campaign can’t be tracked. If you go to “Cloud Services” under properties you can add any service of the Adobe Marketing Cloud you like.
But what happens if for some reason you still need to change the CSS or JavaScript file after the campaign has already started? Don’t worry, you don’t have to delete the whole campaign and upload a new one. AEM offers capabilities to download the zip file and clear the content of a campaign so that you can modify the page and upload a new one into the same campaign.
Just be careful: AEM doesn’t save your content, so once cleared, the content is gone if you haven’t saved it elsewhere. Another thing to watch out for is that sometimes your CSS can override the top bar (for example when you are using an absolute position for a background picture). In that case, it is easiest to use the browser inspector in order to debug and find out which property is overwriting the design importer bar.
If you are curious to find out more about the landing page feature, Adobe provides a good overview and instructions on how to use it on their website.
No comments:
Post a Comment
If you have any doubts or questions, please let us know.