Experience League | Image

Create Page Variations for Targeting Using Smart Layout

Table of Contents

Lab Overview

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.

Prerequisites

  • 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

  • Smart Layout demo content package

Lesson 1 - AEM Sites Configurations

Objectives

  1. Add Site Cloud Configurations.

  2. Site Template set up.

  3. Create a new Hero page.

Lesson Context

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 1: Behind The Scenes

Figure: Behind The Scenes

Exercise 1.1

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.

  1. Open http://localhost:4502 in your browser to access the AEM menu. If you open AEM for the first time, you have to enter username and password.
  • Username: admin

  • Password: admin

Figure 2: AEM Log in Screen

Figure: Experience Manager Log in Screen

  1. Examine Adobe Target Cloud Configuration. Start by clicking the AEM Logo.

  2. Click the Tools icon.

  3. Click Cloud Services.

  4. Click Legacy Cloud Services.

Figure 3: Tools Console

Figure: Tools Console

  1. Click on the Adobe Target Show Configuration.

  2. Click on sitesc configuration.

Figure 4: Could Services Legacy Console

Figure: Could Services Legacy Console

  1. Click Edit to see the configuration.

Figure 5: Editing Adobe Target Cloud Configuration

Figure: Editing Adobe Target Cloud Configuration

The configuration should look like this:

Figure 6: Adobe Target Cloud Configuration

Figure: Adobe Target Cloud Configuration

  1. Enter the password terror1521B!T and click Re-Connect to Adobe Target to confirm that the configuration is set up correctly. You should get a Connection successful message.

Figure 7: Adobe Target Sucessfull Connection

Figure: Adobe Target Successful Connection

  1. Examine the Adobe Analytics Cloud Configuration. Start by clicking on Adobe Analytics Show Configurations. Then click on sitesc Analytics Configuration.

Figure 8: Could Services Legacy Console

Figure: Could Services Legacy Console

  1. Click Edit to see the configuration.

Figure 9: Editing Adobe Analytics Cloud Configuration

Figure: Editing Adobe Analytics Cloud Configuration

The configuration should look like this:

Figure 10: Adobe Analytics Cloud Configuration

Figure: Adobe Analytics Cloud Configuration

  1. Enter the shared secret dc47cd7db2a2b4738735ad3dc3b9e4f6 and click Re-Connect to Analytics to confirm that the configuration is set up correctly. You should get a Connection successful message.

Figure: Adobe Analytics Successful Connection

  1. Navigate to Sites Console using http://localhost:4502/aem/start.html. Then click on the Sites icon.

Figure: Navigate to Sites Console

  1. Select the Smart Layout Testing site. Then click on Properties.

Figure: Navigate to Site Properties

  1. Select the Cloud Services tab.

Figure: Navigate to Cloud Services Configuration

  1. Inspect Cloud Configurations at the site level.

Figure: Inspect Cloud Configurations at site level

Exercise 1.2

To use Experience Fragments in the demo site, adjust the allowed page templates.

  1. Click the Advanced Properties tab.

Figure: Navigate to Advanced Properties tab

  1. Add more allowed templates by clicking on the Add button.

Figure: Add more allowed templates

  1. In the new field, add the following path for templates:

    /conf/we-retail/settings/wcm/templates/.*

  2. Save the site properties.

Figure: Save & Close Properties

Exercise 1.3

Now that we have completed the site setup, it’s time to create a new page using the Hero Page Template.

  1. Navigate to http://localhost:4502/sites.html/content/smartlayout/en.

  2. Click the Create button and select the Page option.

    Figure: Navigate to Create Page Wizard

  3. Select Hero Page template.

  4. Click Next.

  5. Fill in the title of the page that is a required field with Smart Layout beta demo.

  6. Click the Create button. You should get a message indicating the page was successfully created.

    Figure: Successful page creation message

  7. Click Open button to navigate to the Page Editor for authoring.

Lesson 2 - Page authoring with Targeted Layout Container

Objectives

  1. Customize page template policies.

  2. Add Targeted Layout Container.

Behind The Scenes

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.

Exercise 2.1

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.

  1. Click the Page info icon. Next, click the Edit Template link.

Figure: Edit the template of the page

  1. Click on the Layout Container and then click the Policies icon.

Figure: Edit template policies

  1. In the Allowed Components tab, search for Smart Layout Container (General group) and Targeted Layout Container (Personalization group) and select their checkboxes.

  2. Click the Save button (this adds the components to the policy).

Figure: Add components to the policy

Exercise 2.2

Now the Smart Layout Container and Targeted Layout Container components are available in the Components Rail, we can add them to our page.

  1. Navigate to http://localhost:4502/editor.html/content/smartlayout/en/smart-layout-beta-demo.html.

  2. Open Side Panel.

Figure: Open Side Panel

  1. Switch to Components tab.

Figure: Switch to Components Tab

  1. Filter the Components by using layout.

Figure: Filter Components by layout word

  1. Drag and Drop the Targeted Layout Container component on the page.

  2. Edit properties of the Targeted Layout component by clicking the Tools icon.

Figure: Edit properties of the Targeted Layout Component

  1. In the Properties dialog, fill in SLbeta for the Location field and select Adobe Target in the Engine dropdown. Then click the Save button.

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.

  1. Switch to the Targeting mode.

    Figure: Switch to Targeting Mode

Lesson 3 - Creation of Smart Layout variations

Objectives

  1. Create a Smart Layout Delivery Activity.

  2. Add Smart Layout Container.

  3. Populate Smart Layout with Experience Fragments components.

  4. Create category page variations.

Lesson Context

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.

Exercise 3.1

To start targeting, we must create our first activity of type Smart Layout Delivery.

  1. Add a new activity by clicking the add icon.

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.

  1. Set the Smart Layout Delivery Activity values:
  • 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

  1. Click the Create button.

  2. You should see your activity already selected in the Activity dropdown.

Figure: Smart Layout Delivery Activity created

  1. Click Start Targeting button.

Exercise 3.2

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.

  1. From the Components rail, drag and drop the Smart Layout Container component inside the Targeted Layout Container on the page. The result should look like illustrated in the next figure.

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

  1. Configure the Smart Layout Container component by selecting it.

  2. Select the Settings icon.

Figure: Smart Layout Container set up

  1. Select Page Views for the KPI to optimize against.

  2. Select month of September 2018 as Date Range for data aggregation.

  3. Click the Save button.

Figure: Smart Layout Container properties

Exercise 3.3

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.

  1. Switch to the Assets Rail.

Figure: Switch to Assets rail

  1. Drag and drop experience fragments one by one. Select the Experience Fragment asset type. Then adjust the path where the experience fragments are located.

Figure: Experience Fragments filtering

  1. In the Path field enter: ``/content/experience-fragments/``Smart_Layout_demo_XFs``.

  2. 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
    
  1. Modify the layout of the Experience Fragments by clicking on the Experience Fragment. Next, click the Layout icon.

    Figure: Layout Experience Fragments

  2. 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

  1. Repeat steps 3 and 4 for all the Experience Fragments on the page.

  2. 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

Exercise 3.4

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.

  1. Expand the Audiences Side Panel if not yet expended.

    Figure: Audiences Side Panel expansion

  2. Click the Add Experience Targeting button.

  3. Select Families with children and Vegetarian.

    Figure: Audiences selection

  4. Click the Done button.

  5. Optimize the layout for the Vegetarian audience. Select the audience and then click the Smart Layout Container component. Next, click the Optimize icon.

Figure 42: Audiences layout

Figure: Audiences layout

  1. Repeat step 5 for the Families with children audience.

  2. By switching from one audience to another, you should see different layouts for them.

  3. Click the Next button of the wizard.

  4. 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

  1. Click the Next button of the wizard.

  2. 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

  1. Click the Save button.

Next Steps

Simulating an Experience

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.

References

Authoring Targeted Content Using Targeting Mode

Developing for Targeted Content

Managing Activities

Adobe Target Success Metrics