Experience League | Image

Instore targeting with Adobe Experience Manager and Beacons/IoT

Table of Contents

Lab Overview

In the lab overview, we make the audience understand that Digital Signage goes way beyond digital advertising. With Adobe Experience Manager Screens, our customers can leverage personalization in retail stores.

Key Takeaways

  • Learn how to get started with AEM Screens.
  • Understand the value of cross-device experiences for your customers.
  • Create targeted experiences in-store.

Prerequisites

  • Adobe Experience Manager (latest)
  • AEM Screens Player (Windows or ChromeOS)
  • Link to a web service to collect personalization data
  • Link / QR to app download in AppStore / PlayStore (or provide an enterprise signed one)

Setup

Log In to AEM

  1. Open the Chrome web browser.
  2. Navigate to http://localhost:4502 and log in using:
    • Username admin
    • Password admin

Chapter Solution Packages

Solution packages for each chapter can be found here.

To install a solution package:

  1. Locate the Chapter solution package to install, the naming is in the format:
    • Chapter-#-Solution_l742.zip where # is the chapter to provide the solution for.
  2. Download the package.
  3. Navigate to CRX Package Manager (http://localhost:4502/crx/packmgr).
  4. Upload and install the package.

Lesson 1 - Creating in-store experiences with AEM Screens

Objective

  1. Understanding the setup of AEM Screens.
  2. Learn how to create a static experience.

Lesson Context

In this lesson, you will learn how to get started with AEM Screens and create your first in-store experience. We get started by creating a real-world store structure in AEM. Afterwards assets will be uploaded and used in your first channels. An intelligently planned schedule will support you by creating a changing experience throughout a day or any time of the year.

Exercise 1.1

In this exercise you are going to create an in-store project structure.

  1. Login to your lab machine with the following credentials

    • Username: L742
    • Password: summit2019

  2. On your desktop, open the folder named L742.

  3. Double click on cq-quickstart-6.5.0.jar to get AEM started.

  4. Open your browser and go to http://localhost:4502/ where you can login with the following credentials:

    • Username: admin
    • Password: admin

  5. Navigate to Screens.

    Figure 1.1.1: AEM Navigation

    Figure 1.1.2: AEM Screens Overview

  6. Click the blue Create button so that we can continue setting up a new project.

    Figure 1.1.3: Create project button

  7. Follow the wizard in creation of the new project. Keep the default values and only fill out the title field.

    Figure 1.1.4: Create project. Step 1

    Figure 1.1.5: Create project. Step 2

  8. Click on the project title to navigate the project.

    Figure 1.1.6: Create project. Result

    Figure 1.1.7: New project

  9. Continue to navigate into the locations and afterwards click on create to structure your project. We start by creating a new entity!

    Figure 1.1.8: Locations view

    Figure 1.1.9: Create entity button

  10. Follow the wizard to create a location and enter a title of the location in the second step.

    Figure 1.1.10: Create location. Step 1

    Figure 1.1.11: Create location. Step 2

  11. Open the newly created location and press again create entity to create new display.

    Figure 1.1.12: Create location. Result

    Figure 1.1.13: Create display. Step 1

    Figure 1.1.14: Create display. Step 2

  12. Congratulations! You have created a display for the entrance display of your flagship store. Now let's pull some content on the display in the next exercise.

    Figure 1.1.15: Create display. Result

Exercise 1.2

In this exercise, you are going to create your first in-store experience.

  1. Navigate to Screens and open your previously created project.

    Figure 1.2.1: AEM Navigation

    Figure 1.2.2: AEM Screens Project Overview

  2. Open the Channels folder in your project and create a new entity.

    Figure 1.2.3: Create Channel

  3. Select Sequence Channel and follow the wizard to fill out the title field in the second step.

    Figure 1.2.4: Create Channel. Step 1

    Figure 1.2.5: Create Channel. Step 2

  4. Switch to the Channel tab and enabled Developer mode to allow automatic updates.

    Figure 1.2.6: Create Channel. Step 3

  5. Now open the main navigation of AEM and navigate to Assets -> Files -> Projects.

    Figure 1.2.7: AEM Navigation

    Figure 1.2.8: AEM Navigation Assets

  6. Click on Create and create a new folder.

    Figure 1.2.9: Create Folder

    Figure 1.2.10: Create Folder Dialog

  7. Open the newly created folder.

    Figure 1.2.11: Open Folder

  8. Drag and drop images from your project into the folder.

    Figure 1.2.12: New Upload Processing

    Figure 1.2.13: New Upload

  9. Now open the main navigation of AEM and navigate back to Screens.

    Figure 1.2.14: AEM Navigation

  10. Open your project and navigate down into channels.

    Figure 1.2.15: Channels

  11. Select your previously created channel by clicking on the icon of the entry. The toolbar now reveals a button to edit the channel. Click it and the channel is opened in the editor in a new window.

    Figure 1.2.16: Channel toolbar

  12. On the left side, you see all images available in AEM. Drag in 1 of them into the container of the channel.

    Figure 1.2.17: Editor Assetfinder

    Figure 1.2.18: Editor Drag and Drop Images

  13. You may already preview your result by clicking the Preview button on the right top.

    Figure 1.2.19: Editor Preview

  14. Close the editor and open your project in the Screens admin console and navigate to your previously created display.

    Figure 1.2.20: Displays

  15. By selecting the display, a dashboard button is revealed in the toolbar. Click on it to navigate to its dashboard.

    Figure 1.2.21: Display Toolbar

  16. In the dashboard scroll to the Assigned Channels & Schedules tile. And open the assign channel dialog by clicking the three dots button on the right top of the tile.

    Figure 1.2.22: Display Dashboard

  17. In the dialog, use the channel path picker to select your previously created channel. Further in the "Supported Events" dropdown choose "Idle Screen" and "Initial Load" before saving.

    Figure 1.2.23: Displays

  18. Congratulations! You have created your first in-store experience and assigned it to a display. Click on the three dots in the Display Information tile to preview the display.

    Figure 1.2.24: Displays

Lesson 2 - Connect a player to AEM

Objective

Learn how to connect a (hardware-) player to AEM.

Lesson Context

In this lesson, you will learn how a player is connected and used to retrieve content from AEM.

Exercise 2.1

In this exercise, you are going to register a player on AEM.

  1. Open your browser and go to http://localhost:4502/ where you can login with the following credentials:

    • Username: admin
    • Password: admin

  2. After you successfully logged into AEM, browse to http://localhost:4502/system/console/configMgr.

    Figure 2.1.1: System Console

  3. On the upcoming page, you see a list with AEM configuration options. Search for Apache Sling Referrer Filter and click on the entry.

  4. In the opening dialog, ensure that Allow empty is checked and press Save. By saving this option, you allow AEM Screens players to connect to your server.

    Figure 2.1.2: Referrer Filter

  5. On your desktop, you will find an executable called aem-screens-player-electron.exe, which is the player software for Windows. Normally this software runs on dedicated players connected to a screen. For testing, this may also be excuted on any computer. Click on it to start it.

  6. To exit fullscreen mode press F11 on your keyboard.

  7. Your player is now in an unregistered state. So it's time to register it in your AEM instance. Therefor go back to your computer's browser and navigate to Screens.

    Figure 2.1.3: Unregistered Player

  8. Open your project again and select the Devices folder.

    Figure 2.1.3: AEM Screens Project Overview

  9. In the toolbar, you should see a Device Manager button. Click it to open the device manager.

  10. The device manager shows you all devices known to AEM. In this console, you can review their status or remove it from the system in case it broke or got stolen. To add a new device, click the device registration button on the right top.

    Figure 2.1.4: Devices

  11. Now you should see a list of pending and untrusted devices requesting access to AEM. Your player should be in the list. You can identify your player by the token visible in the list and the admin user interface of the player.

    Figure 2.1.5: Devices

  12. Select your device and click Register device in the toolbar.

    Figure 2.1.6: Device Registration. Step 1

  13. The server will perform a key exchange. You must verify the authenticity of your player by comparing the registration code. If the same code is shown in your browser and your device, click Validate.

  14. In the second step of the wizard, you may enter a title to identify your device later on.

    Figure 2.1.7: Device Registration. Step 2

  15. Click Register to complete the process and further in the completion dialog click Finish.

    Figure 2.1.8: Device Registration. Result

Congratulations! Your device is now registered in AEM. A green checkmark now indicates that your device has been successfully connected and is currently up and running.

Exercise 2.2

In this exercise you are going to make a player available to serve content.

  1. Open your project again and enter the Device Manager through the Devices folder.

  2. In the list you see your device which you registered in the previous exercise. Select it and click Assign Device in the toolbar.

    Figure 2.2.1: New Device

  3. On the first step of the wizard, open the display picker. Within the dialog browse your project, go to Locations > Flagship Store and select Entrance.

    Figure 2.2.2: Assign Device. Step 1

    Figure 2.2.3: Assign Device. Step 2

  4. Click Assign and close the confirmation dialog to complete the assignment of a registered player to a display.

    Figure 2.2.4: Assigned Device

Fantastic! You have setup and registered a new player. Your player is now showing your previously created experience.

Bonus Exercise 2.4

In this exercise, you will learn how get more information about a particular player and how you can control it remotely.

  1. Navigate back to your display dashboard of Entrance.

  2. In the list of assigned devices, click on the deviceId to open the device's dashboard.

  3. On the dashboard you see details about the hardware and its status.

  4. Try to refresh the screenshot to see the current content on the player.

Lesson 3 - Create a targeted experience

Objective

  1. Learn how targeted experiences are built in AEM Screens.

  2. How ContextHub is used to configure segments.

  3. How cross-device communication helps you identifying people around the Screen.

Lesson Context

In this lesson, you will learn how you can leverage a mobile (loyalty) app to trigger targeted experiences on AEM Screens. Furthermore, how you can create and configure targeted experiences in AEM and simulate them with ContextHub.

Exercise 3.0

In order to get started, we will need to setup a personalization project first.

  1. Get the starter kit archive l742-aem-screens-beacon-targeting-starter-kit.zip.

  2. Open http://localhost:4502/crx/packmgr/index.jsp in your browser to open the package manager and click Upload Package.

    Figure 3.0.1: Package Manager

  3. Choose the starter kit and complete the upload.

    Figure 3.0.2: Starter Kit uploaded

  4. To complete the installation click on install and follow the dialog.

    Figure 3.0.3: Starter Kit installed

Exercise 3.1 Configure ContextHub data store

In this exercise, we are going to configure a ContextHub so we can consume the information which profile is currently closest to the beacon.

  1. Open the main menu of AEM.

  2. On the left side activate the Tools tab, choose Sites in the list and click on ContextHub.

    Figure 3.1.1: Tools

  3. Open the L742 configuration container and browse through the folders till you reach a folder with a beacon configuration entry. The ContextHub configuration beacon retrieves data from a remote server to enable the resolution of audience segments.

    Figure 3.1.2: Tools

  4. Click on the title beacon and proceed to the second step in the wizard. You now see a configuration which connects to a public server to retrieve the current targeting data. Change the path property to a uniqe name for your setup. E.g. /MY_NAMESPACE and click save to complete.

    Figure 3.1.3: Tools

Exercise 3.2 Setup Audiences

In this exercise, we are going to setup several audiences to be addressed with targeted content.

  1. Open the main menu again and click on Personalization and then Audiences.

    Figure 3.2.4: AEM Navigation

  2. Open the L742 audience folder to see all existing pre-defined audiences of the starter kit.

    Figure 3.2.4: AEM Audiences

  3. Click create and then Create ContextHub Segment to add another segment. In the dialog enter the title Women.

    Figure 3.2.5: Create audience

  4. Select the newly created audience Women to see the toolbar.

    Figure 3.2.6: Audience selected

  5. Click on Properties in the toolbar and then select the Personalization tab in the form. Open the picker from the ContextHub Path field and select the folder for the following path: /conf/L742/settings/cloudsettings/default/contexthub Complete this step with Save.

    Figure 3.2.7: Configure audience

  6. Select the Women audience and click on Edit to open the segment in a new tab in AEM's editor.

    Figure 3.2.8: Audience editing

  7. In the editor, we can combine complex rules by dragging in comparators from the left sidepanel onto the page. Since we want to create an audience for Women we keep it simple and drop the Comparison: Property - Value component onto the container in the middle.

    Figure 3.2.9: Audience editing. Step 1

  8. Select the newly added rule and in the toolbar click on the wrench icon to configure the rule.

    Figure 3.2.10: Audience editing. Step 2

  9. The property name field of the dialog already detects all fields provided by the remote data store configured with ContextHub.

    Figure 3.2.11: Audience editing. Step 3

  10. Fill out the dialog accordingly to define the rule and click on the checkmark button to save your configuration.

    Figure 3.2.12: Audience editing. Step 4

  11. Depending on if the current value retrieved by ContextHub matches your audience the view will indicate if the configuration would currently trigger an experience to be shown.

    Figure 3.2.13: Audience editing. Unresolved

    Figure 3.2.14: Audience editing. Resolved

Congratulations! Now you setup another Audience to be addressed with targeted experiences.

Exercise 3.3 Start a campaign

It is now time to create a campaign for your targeted experiences.

  1. Open the main menu again and click on Personalization and then Activities.

    Figure 3.3.1: AEM Navigation

  2. Open the L742 activities folder and following the master area. There you find an already predefined campaign. There click on the create button to define your new activity.

    Figure 3.3.2: Activities

  3. In the wizard give your campaign a title and a unique name.

    Figure 3.3.3: Create Activity. Step 1

  4. In the second page click on Add Experience and choose the audiences created in the previous exercise.

    Figure 3.3.4: Create Activity. Step 2

  5. Audiences must be mapped to experiences. For each audience, click on the Add Experience button next to it to define a title and a unique name. These may match the audience name.

    Figure 3.3.5: Create Activity. Step 3

  6. Save your activity on the last step.

    Figure 3.3.6: Create Activity. Step 4

Great! You are now ready to configure your content for your activity.

Exercise 3.4 Target your channel experience

In this exercise the channel's content will be configured to target certain audiences dynamically.

  1. Navigate to your channel and select it. Click Properties to be able to configure the personalization input.

    Figure 3.4.1: Channel toolbar

  2. Open the Personalization tab and make sure the paths match the following configuration before you save.

    Figure 3.4.2: Channel personalization

  3. Open the Personalization tab and make sure the paths match the following configuration before you save.

    Figure 3.4.4: Channel personalization

  4. Afterwards select your channel again and click Edit to open it in the editor.

    Figure 3.4.5: Channel editor

  5. On the right top you can switch the Edit mode into the Targeting mode.

    Figure 3.4.6: Editor modes

  6. Click on the Start Targeting button and select your already added image. The outer left button activates that your image can react on audiences and provide different experiences.

    Figure 3.4.7: Targeting. Step 1

  7. In the right panel you see all your different audiences. Select one to start changing its experience.

    Figure 3.4.8: Targeting. Step 2

  8. Select the audience of your choice and drop a different image on your component. Continue doing that with all audiences you would like to target.

    Figure 3.4.9: Targeting. Step 3

  9. Proceed by clicking next and following the last two steps of the wizard.

    Figure 3.4.10: Targeting. Step 3

    Figure 3.4.11: Targeting. Step 3

That's it! Your channel is now ready to be used. Click on Preview to see already a result.

Next Steps

Use the opportunity in the lab to experience real cross-device experience. Install the loyality demo app from the AppStore/PlayStore and configure your fictional profile. Make sure Bluetooth is turned on and approach one of the beacons in the room to change the segment on your screen.

Appendix