Experience League | Image

L765 - Integrating Adobe Experience Manager with Microsoft Dynamics

Table of Contents

Lab Overview

Adobe Experience Manager commerce is the hub of authored content, product sales, and marketing. Learn about the possibilities of an Experience Manager commerce integration with Microsoft Dynamics and Adobe’s commerce integration for the cloud platform, provided by Adobe I/O. In this hands-on lab, connect Experience Manager and Dynamics through the cloud, leveraging Experience Manager commerce components to surface inventory and provide search, shopping cart, and personalization capabilities.

Key Takeaways

  • Understand how to use the Cloud Commerce Integration Framework (CCIF) to connect Microsoft Dynamics to AEM.
  • Learn how authors can surface commerce content to create compelling digital experiences within AEM.
  • Learn about using Adobe Target to personalize commerce focused content within AEM.

Prerequisites

  • High-level understanding of the Adobe I/O Runtime Platform.
  • Basic knowledge of catalog and product management in Microsoft Dynamics 365.
  • Basic knowledge of content authoring within AEM.
  • Local instance of AEM 6.4 or greater.

Lesson 1 - Project Setup

Objective

  1. Install sample project.
  2. Configure AEM to connect to Microsoft Dynamics.
  3. Setup sample website.

Lesson Context

First we must install the sample project code into AEM and configure it to talk to Microsoft Dynamics. Our sample project contains the Summit 765 Store experience which we will be working with during today's lab.

Exercise 1.1

Install the Summit 765 Store package on to your local instance of AEM.

  1. Login to your lab machine with the following credentials

    • Username: L765
    • Password: summit2019
  2. AEM should already be running on your machine. If not, start it by double clicking on the cq-quickstart-6.4.0.jar located under a folder labeled author on your desktop.

  3. Open your web browser and navigate to Package Manager.

  4. Login as the administrator when prompted.

    • Username: admin
    • Password: admin
  5. Upload the summit.765-store.all.zip sample code package located in the assets folder on your desktop and install it.

    upload-install-pkg

    • Click the Upload Package button towards the center of the screen.
    • Select the summit.765-store.all.zip
    • When the Summit 765 Store package appears in the package list select it then click the Install button from the list of options below the package title.

Exercise 1.2

Configure AEM to connect to CCIF and Microsoft Dynamics.

  1. Navigate to the AEM start page.

  2. Configure the Commerce Integration Framework settings to connect to the I/O Runtime namespace we will be using for this lab.

    config-cif

    • Open the tools menu by clicking the hammer icon in the upper left corner.
    • Select the Commerce option from the tools menu then click on the Commerce Integration Settings tile.
    • In the Namespace field enter: summit-765
    • Click the Save & Close button located in the upper right corner.

Exercise 1.3

Configure AEM to connect to the Adobe Target workspace we will use for today's lab.

  1. Setup the Cloud Services configuration for Target.

    config-target

    • Open the tools menu by clicking the hammer icon in the upper left corner.

    • Select the Cloud Services option from the tools menu then click the Legacy Cloud Services tile.

    • Select Configure Now under the option for Adobe Target.

    • Enter: summit-765 into the title field and then click the create button.

    • Enter the following connection details:

      • Client Code: To Be Provided
      • Email: To Be Provided
      • Password: ****
      • API Type: REST
    • Click the Connect to Adobe Target button to test the connection.

    • Click the OK button to save the configuration.

  2. Now we need to add a Target framework. The framework identifies the profile parameters that are sent to Adobe Target from AEM. Target uses the parameters to determine the segments that apply.

    config-target-framework

    • Click the + (plus sign) next to Available Frameworks
    • Enter: default for the title and then click the create button.
    • Drag the Profile Data client context component on to the framework.
    • Toggle the share checkboxes for profile.age and profile.gender.
  3. Next we need to configure our Summit 765 experience to use the Target framework we just created.

    site-cloud-config

    • Navigate to the AEM start page. http://localhost:4502/aem/start.html
    • Click on the sites icon.
    • Click on the thumbnail next to the summit-765 site to select it.
    • From the edit menu at the top of the page select Properties.
    • Select the Cloud Services tab.
    • Choose Adobe Target from the Cloud Service Configurations dropdown.
    • Choose our default framework from the Adobe Target dropdown that appears.
    • Click the Save & Close button at the top right of the page.

Exercise 1.4

Now that you've gotten everything setup, take a few minutes to explore the Summit 765 Store experience! Checkout how the pages pull in product information along side experience driven content. Try opening some of the pages for authoring to see how we've structured our components. Try making some changes or moving things around!

In our next lesson we will dive into authoring some new content for our store.

Lesson 2 - Creating a Shoppable Landing Page

Objective

  1. Create a landing page for a special promotion.
  2. Incorporate authored content and information pulled from Dynamics.
  3. Add personalization and segment targeting.

Lesson Context

In this lesson we will be creating a personalized landing page which incorporates authored content as well as commerce functionality to create an engaging, personalized Shoppable experience.

Exercise 2.1

Create a new landing page for our promotion using the default page template.

  1. Navigate to the AEM start page.

  2. Add a new page under the Home Page of our Summit 765 Store experience.

    create-landing-page

    • Click on the sites icon.
    • Drill down into the Summit 765 Store -> Home Page.
    • Click the Create button from the top right of the page and choose Page.
    • Select the Default Page template.
    • Click the Next button from the top right of the page.
    • In the title field enter: Last Day Sale.
    • Click the Create button from the top right of the page. When the success modal appears, click the Open button to launch the page editor.
  3. Now that the our landing page is created we need to modify some additional properties to hide the page from the main navigation and set the off time to when our promotion will end.

    landing-page-properties

    • Choose the Page Information icon from the top left of the page.

    • In the dropdown choose Open Properties.

    • Toggle the checkbox for Hide in Navigation

    • In the Off Time field select a few days in the future to represent the date our promotion will end.

    • Click the Save & Close button the top right corner of the page to save our changes.

Exercise 2.2

Add personalization components which pull information from users profile to personalize the page's copy.

  1. Add the Personalized Banner component to the page. add-personalized-banner

    • Click on the icon at the top left of the page to open the side panel.
    • Click on the middle icon in the side panel to toggle to the Components tab.
    • Find the Personalized Banner component from the list and drag it onto the page just below the site header.
  2. Edit the Personalized Banner* component to create a welcome message for our landing page that includes the current users first name.

    add-personalized-banner-properties

    • Double click on the Personalized Banner component you just added to the page to open it's properties dialog.
    • Add a Personalization Variable and choose givenName from the dropdown.
    • In the Personalized Headline field write a welcome message. Include the givenName variable with ${0}. Example: Hi ${0}. Hope summit was a blast!
    • Click the checkbox at the top right of the dialog to commit your changes.
  3. Test your component by opening the page in Preview mode and toggling between personas using Context Hub.

    add-personalized-banner-properties-test

    • Click the Preview button in the top right corner of the page.
    • The Context Hub should appear across the top of the page. If it is not visible click the 2nd icon of the group of people at the top left of the page to toggle it on.
    • Click the user avatar on the persona field to preview our personalized banner as different users.
    • After testing our the component, click the Edit button to switch back into editing mode.
  4. Now let's add the Page Off Countdown Timer component to tell customers when our promotion will end.

    add-countdown

    • Find the Page Off Countdown component in the Components tab of the side panel. Drag the component onto the page directly under the Personalized Banner we just added.
    • Double click on the component to open its properties dialog.
    • In the Headline field enter: Shop these deals while they last!
    • Click the checkbox at the top right of the dialog to commit your changes.
    • The component will countdown the time remaining until the Page's Off Time.

Exercise 2.3

The remainder of content we add to our page will be driven by commerce components which pull in product details directly from our catalog in Dynamics. We will use Adobe Target in combination with these components to surface different categories of products for our promotion depending on the current user's segment.

For this exercise we have setup 3 audience segments in Adobe Target which we will be using to target our components. These segments in include: Male, Females and Persons Under 30 Years Old.

  1. Let's start by adding our Target component to the page. add-target

    • Find the Target component in the Components tab of the side panel. Drag the component onto the page directly under the Page Off Time Countdown component we just added.
    • Double click on the component to open its properties dialog.
    • In the Location field enter: last-day-sale-featured.
    • Select Adobe Target for the Engine.
    • Click the checkbox at the top right of the dialog to commit your changes.
  2. Launch Targeting Mode and create a new Activity.

    add-target-activity

    • Click the dropdown arrow next to the Edit button at the top right of the page.
    • Choose Targeting from the dropdown list to enter Targeting Mode.
    • Click the + (plus sign) next to the Activity dropdown to create a new Activity.
    • In the name field enter: Last Day Sale Featured
    • For the Targeting Engine select Adobe Target.
    • Click the Create button.
  3. Start Targeting and add our Audience segment.

    add-target-activity-segment

    • Click the Start Targeting button at the top right of the page.
    • The Audiences panel should appear to the right. If it does not appear click the arrow on the right side of the page to expand the panel.
    • Click Add Experience Targeting and select the Over 30 audience segment.
    • Click Ok in the dialog box that appears.
  4. Next we want to author the components that will be presented to our Audience Segment.

    add-target-add-components

    • Select the Over 30 segment from the Audiences panel.
    • Open the side panel and navigate to the Components tab.
    • Find and drag the Section Title component into the target component we added to page previously.
    • Click on the component and then click the Pencil icon from the tools menu to edit the text.
    • Enter the following headline: Juice Up Your Devices in Style.
    • Find and drag the Featured Product CTA component into the target component below the Section Title we just added.
    • Click on the component and then click the Wrench icon from the tools menu to open the properties dialog.
    • In the products field search for and select the following products: QI Wireless Charger, Jolt Premium Power Kit.
    • Click the checkbox at the top right of the dialog to commit your changes.
  5. Finalize the Targeting Activity and save.

    add-target-finalize

    • Click the Next button in the upper right corner of the page.
    • Verify the Over 30 experience and segment align then click Next again.
    • Under Goal Metric choose Engagement* then Page Views.
    • Click the Save button in the upper right corner.

Exercise 2.4

In this exercise we will add more targeted commerce components but will follow a slightly different authoring flow. This time we will adding some components to serve as the default.

  1. Add the components for our next content section.

    add-additional-targeted

    • Switch back to Edit mode.
    • Drag the Section Title component onto the page below the Target component we added in the previous exercise.
    • Open the properties dialog and in the title field enter: Wear Your Adobe
    • Click the checkbox at the top right of the dialog to commit your changes.
    • Drag the Featured Products Grid onto the page below the Section Title you just added.
    • Open the properties dialog and select the Apparel category.
    • Click the checkbox at the top right of the dialog to commit your changes.
  2. Open Targeting Mode and create an activity.

    • Switch into Targeting Mode
    • Click the + (plus sign) next to the Activity dropdown to create a new Activity.
    • In the name field enter: Last Day Sale Apparel
    • For the Targeting Engine select Adobe Target.
    • Click the Create button.
    • Click the Start Targeting button at the top right of the page.
  3. Enable Targeting on the Featured Products Grid component. add-additional-targeted-grid

    • Scroll down to the Featured Products Grid component and click on it.
    • From the tools menu click the Target icon.
    • Add an audience segments for Females.
    • Open the Featured Products Grid properties dialog and change the category to Apparel -> Women.
    • Add an audience segment for Males.
    • Open the Featured Products Grid properties dialog and change the category to Apparel -> Men.
    • Tab through the audience segments to make sure the correct component configurations appear for each.
    • Click Next from the upper right corner.
    • Verify the experiences and segments align then click Next again.
    • If not already selected, under Goal Metric choose Engagement then Page Views.
    • Click the Save button in the upper right corner.

Exercise 2.5

Now that you've gotten the promotion landing page setup and targeted, take a few minutes to check out your work! Open up the page in Preview Mode and use the Context Hub to toggle between personas. See how the two featured products only appear to users under 30 years old and how the appear product grid switches between mens and women's apparel depending on the gender of the user.

In our next lesson we will learn how to create a targeted campaign to serve calls to action on various pages of the experience which can drive traffic back to our Last Day Sale promotion

Lesson 3 - Creating a Campaign for Our Promotion

Objective

Use Experience Fragments to create a campaign for our landing page.

Lesson Context

In this lesson we will use AEM's Experience Fragment feature to create a campaign marketing our landing page by placing targeted CTAs in our sample site. Experience Fragments allow us to create content which can be reused across different pages and experiences. This is especially useful in the context of promotional campaigns. In addition to being able to place Experience Fragments in your AEM site they can also be used to serve content to third-party platforms such as Facebook and Pinterest.

Exercise 3.1

Create a new Experience Fragment which includes the Promo Call to Action component to promote our Last Day Sale landing page.

  1. Navigate to the AEM start page.

  2. Create a new Experience Fragment for our promo. create-xf

    • Click on the Experience Fragments icon.
    • Click the Create button in the upper right corner of the page.
    • Select Experience Fragment from the dropdown.
    • Choose the Summit Store Experience Fragment template and click Next
    • In the title field enter: Last Day Sale Promo
    • Click the Create button then click the Open button from the dialog to edit the Fragment.
  3. Add and configure the Promo Call to Action component.

    xf-add-promo

    • If not already open, click the icon at the top left of the page to open the Side Panel.
    • Click the third icon to the left of the Side Panel to open the components tab.
    • Drag the Promo Call to Action component onto the page.
    • Open the component's properties dialog.
    • In the Headline field enter: Don't Miss Our Last Day Sale
    • In the Link Text field enter: Shop Now
    • Select our Last Day Sales page for the Link URL field.
    • Select a background image.
    • Click the checkbox at the top right of the dialog to commit your changes.

Exercise 3.2

Add the Last Day Sale Promo Experience Fragment to our example site.

  1. Navigate to the AEM start page.

  2. Open the Home Page for editing and insert our Experience Fragment.

    add-xf-to-homepage

    • Click the Sites Icon
    • Navigate to our Summit 765 Store experience then select the Home Page by clicking the icon next to the page title.
    • From the tools menu, which appears above, click the Edit button.
    • If not already open, click the icon at the top left of the page to open the Side Panel.
    • Click the third icon to the left of the Side Panel to open the components tab.
    • Drag the Experience Fragment component onto the page.
    • Open the component's properties dialog.
    • Open the Path Browser by clicking the check icon next to the Variation Field.
    • Navigate to the Experience Fragment we created in the previous lesson and select it.
    • Click the Select button at the top right of the dialog window.
    • Click the checkbox at the top right of the dialog to commit your changes.

Additional Resources

Commerce Integration Framework Documentation

Integrating Adobe Target

Managing Activities

Authoring Targeted Content

Authoring Experience Fragments