With the evolution of digital technology, many people are consuming online content on a multitude of environments ranging from desktops to mobiles to wearables. Additionally, there is demand on content creators to work at increasing velocities. In this scenario, an enterprise seeking an online presence needs to be equipped to efficiently engage with their customers across the multiple environments. Creating content that can engage with a customer is a non-trivial task. And once the content is available, it is equally challenging to deliver it in the right manner based on the way it is consumed. Transforming the content in the dynamic online world to its multiple forms, is a time consuming and laborious task.
Furthermore, a KPI driven approach requires the marketer to manually obtain data from Adobe Analytics and analyze it to determine the best order and placement of content. Smart Layout automates the retrieval of KPI data from Adobe Analytics filtered by segments, and uses Artificial Inteligence to optimize the order and placement of the content within a category page.
In this lab, you will learn:
How to leverage KPI data from Adobe Analytics filtered by segments.
How to use Experience Fragments inside a targeting layout.
How to create category page variations that are based on a data at scale.
Adobe Experience Manager 6.4.0
Adobe Experience Manager 6.4 Service Pack 2 (6.4.2.0)
Adobe Experience Manager 6.4 Smart Layout Feature Pack
Add Site Cloud Configurations.
Site Template set up.
Create a new Hero page.
The Smart Layout Feature requires a strong integration of authoring in AEM. It gets the KPI information from Adobe Analytics (KPIs) and the experience is delivered by using Adobe Target, making the functionality a true 1-Adobe Experience feature.
Figure: Behind The Scenes
The Adobe Target and Adobe Analytics Cloud Services need to be configured and applied to the demo site, so you can retrieve Analytics metrics (KPIs) and segmentation and save offers to Adobe Target. The Services are pre-configured on the Lab machines, but we will examine the settings so you are familiar with them.
Username: admin
Password: admin
Figure: Experience Manager Log in Screen
Examine Adobe Target Cloud Configuration. Start by clicking the AEM Logo.
Click the Tools icon.
Click Cloud Services.
Click Legacy Cloud Services.
Figure: Tools Console
Click on the Adobe Target Show Configuration.
Click on sitesc configuration.
Figure: Could Services Legacy Console
Figure: Editing Adobe Target Cloud Configuration
The configuration should look like this:
Figure: Adobe Target Cloud Configuration
Figure: Adobe Target Successful Connection
Figure: Could Services Legacy Console
Figure: Editing Adobe Analytics Cloud Configuration
The configuration should look like this:
Figure: Adobe Analytics Cloud Configuration
Figure: Adobe Analytics Successful Connection
Figure: Navigate to Sites Console
Figure: Navigate to Site Properties
Figure: Navigate to Cloud Services Configuration
Figure: Inspect Cloud Configurations at site level
To use Experience Fragments in the demo site, adjust the allowed page templates.
Figure: Navigate to Advanced Properties tab
Figure: Add more allowed templates
In the new field, add the following path for templates:
/conf/we-retail/settings/wcm/templates/.*
Save the site properties.
Figure: Save & Close Properties
Now that we have completed the site setup, it’s time to create a new page using the Hero Page Template.
Navigate to http://localhost:4502/sites.html/content/smartlayout/en.
Click the Create button and select the Page option.
Figure: Navigate to Create Page Wizard
Select Hero Page template.
Click Next.
Fill in the title of the page that is a required field with Smart Layout beta demo.
Click the Create button. You should get a message indicating the page was successfully created.
Figure: Successful page creation message
Click Open button to navigate to the Page Editor for authoring.
Customize page template policies.
Add Targeted Layout Container.
AEM provides Adobe Target targeting engine that processes page requests and determines the content to display. The Adobe Target targeting engine causes information gathered from page visits to be tracked in Adobe Target. To use this feature on top of our content, we will use the Targeted Layout Container component.
Because we are starting the page authoring, the first thing is to edit its template and allow the components Smart Layout Container and Targeted Layout Container in the policy.
Figure: Edit the template of the page
Figure: Edit template policies
In the Allowed Components tab, search for Smart Layout Container (General group) and Targeted Layout Container (Personalization group) and select their checkboxes.
Click the Save button (this adds the components to the policy).
Figure: Add components to the policy
Now the Smart Layout Container and Targeted Layout Container components are available in the Components Rail, we can add them to our page.
Navigate to http://localhost:4502/editor.html/content/smartlayout/en/smart-layout-beta-demo.html.
Open Side Panel.
Figure: Open Side Panel
Figure: Switch to Components Tab
Figure: Filter Components by layout word
Drag and Drop the Targeted Layout Container component on the page.
Edit properties of the Targeted Layout component by clicking the Tools icon.
Figure: Edit properties of the Targeted Layout Component
Figure: Set-up Targeted Layout Container component
Note: Location field is the Mbox id and it is based by default on the repository path of the component.
Switch to the Targeting mode.
Figure: Switch to Targeting Mode
Create a Smart Layout Delivery Activity.
Add Smart Layout Container.
Populate Smart Layout with Experience Fragments components.
Create category page variations.
In 6.3, Adobe Experience Manager introduced the concept of Experience Fragments to enable users to create reusable experience components that can be used across several pages and channels. With this democratization of experience and content pieces, it is now possible to track every piece of content individually and collate their performance statistics, thus providing the details required to make an algorithmic decision of content experience for achieving a specified goal.
In 6.4, we added intelligence to the experience fragments via the Smart Layout that takes a set of experience fragments to intelligently optimize them towards the selection of an appropriate layout rendition. This is the first implementation of the Content Physics Engine in AEM.
To start targeting, we must create our first activity of type Smart Layout Delivery.
Figure: Add a new activity
Note: When you add an activity, it contains the Default experience.
Note: When targeting, the branding and activity combination is persisted at the user level not at the channel level.
Name - Smart Layout Delivery activity userId
Targeting engine - Adobe Target
Select a Target Configuration - sitesc
Activity type - Smart Layout Delivery
Figure: Smart Layout Delivery Activity
Click the Create button.
You should see your activity already selected in the Activity dropdown.
Figure: Smart Layout Delivery Activity created
You are now able to add the Smart Layout Container component to your page.
Note: The Smart Layout Component is available only when Targeting mode is active.
Note: Because the Target component is a container, it appears as a drop area for other components. In Target mode, the Target component has a blue border, and the drop-target message indicates the targeted nature.
Figure: Smart Layout Container drag & drop
Configure the Smart Layout Container component by selecting it.
Select the Settings icon.
Figure: Smart Layout Container set up
Select Page Views for the KPI to optimize against.
Select month of September 2018 as Date Range for data aggregation.
Click the Save button.
Figure: Smart Layout Container properties
We are ready now to add multiple Experience Fragments into the Smart Layout Container component.
Note: Experience Fragments should have outward links to other pages of the site. If there are more than one link, they all should point to the same destination. These links will be used for retrieving KPI (metric) data related to the pages they point to from Adobe Analytics.
Figure: Switch to Assets rail
Figure: Experience Fragments filtering
In the Path field enter: ``/content/experience-fragments/``Smart_Layout_demo_XFs``.
In the Filter field, enter the following titles one by one and drag and drop the resulting Experience Fragments into the Smart Layout Container on the page.
Vegan or Vegetarian
Citrus school snack
Toasted goodness for children
Flavorful vegetarian pizza
Back to school smoothies
Sugary cerial
Baking for school
Treats for active kids
Back to school blueberry
Vegetarian pasta
Modify the layout of the Experience Fragments by clicking on the Experience Fragment. Next, click the Layout icon.
Figure: Layout Experience Fragments
Modify the width of the Experience Fragment by dragging the marked anchors so that the Experience Fragments have width property per variation set. This helps later for a better layout optimization.
Figure: Modify the width of the Experience Fragment
Repeat steps 3 and 4 for all the Experience Fragments on the page.
Optimize the Smart Layout Container on the page to obtain a default layout. Click the Smart Layout Container component. Then, click the Optimize icon.
Figure: Smart Layout optimization
For each activity, you define one or more experiences that identify the audiences that you are targeting. AEM enables you to control the content that comprises each experience.
Audiences are based on marketing segments that are created in Adobe Target. When a visitor opens a web page, the page logic determines the audience to which they belong and displays the content that you have created for that audience.
Using Targeting Mode, we will now add two different experiences for the audiences that we want to target. And this will result in different category page variations.
Expand the Audiences Side Panel if not yet expended.
Figure: Audiences Side Panel expansion
Click the Add Experience Targeting button.
Select Families with children and Vegetarian.
Figure: Audiences selection
Click the Done button.
Optimize the layout for the Vegetarian audience. Select the audience and then click the Smart Layout Container component. Next, click the Optimize icon.
Figure: Audiences layout
Repeat step 5 for the Families with children audience.
By switching from one audience to another, you should see different layouts for them.
Click the Next button of the wizard.
The Target step of the targeting process involves mapping audiences with the experiences that you worked with in the Create step. The Target page shows the audiences that each experience is targeting.
Figure: Associated experiences
Click the Next button of the wizard.
The Goals & Settings step of the targeting process involves configuring the behavior of the brand activity. Specify when the activity starts and ends, as well as the activity priority. In addition, you also track goals. Specifically you can decide what you want to measure with your activity. In our case, in the Goal Metric area, under My Primary Goal, select Engagement success metric and enter Page Views for measurement. Page Views means counting each unique visit as a conversion.
Figure: Goals & Settings
Simulate a visitor’s experience to verify that the page content appears as expected according to the design of your targeted content. When simulating, load different user profiles and see the targeted content for that user.
The following criteria determine the content that appears when simulating a visitor’s experience:
The data in the user’s session store (via Context Hub).
The Activities that are On.
The rules that define the segments.
The content of the experiences in the Target components.
The configuration of the Targeting engine.
To simulate the visitor’s experience, use Preview mode: Use Context Hub to select the users and locations that satisfy the criteria of the segments that your experiences are based on. When your Context Hub selections change, the targeted content changes accordingly.
Authoring Targeted Content Using Targeting Mode