Supercharge Your Learning Platform with Adobe Learning Manager and AEM Sites

Adobe Learning Manager (ALM) empowers you to build dynamic and engaging learning experiences. When integrated with Adobe Experience Manager (AEM) Sites, you unlock a powerful synergy, enabling you to create bespoke, responsive learning platforms with minimal coding. This integration, facilitated by the Adobe Learning Manager reference site package, allows you to deliver truly customized learning journeys for your users, enhancing engagement and knowledge retention.

Unlock Seamless Integration: Adobe Learning Manager and AEM Sites

The beauty of integrating Adobe Learning Manager with AEM Sites lies in its simplicity and flexibility. The ALM reference site package provides a pre-built foundation, streamlining the process of developing your own branded learning website. This package is rich with AEM Sites web page templates and reusable website components. Imagine effortlessly dragging and dropping elements like learning catalogs, embeddable widgets, calendars, and more, directly onto your website. This integration dramatically reduces development time and effort, allowing you to focus on crafting compelling learning content and experiences rather than wrestling with complex code. By leveraging the ALM reference site package, you can quickly establish a robust and visually appealing learning platform hosted directly within your AEM Sites environment.

Getting Started: Installing the ALM Reference Site Package

Before you can begin building your integrated learning platform, you need to install the Adobe Learning Manager reference site package within your AEM Sites instance. Let’s walk through the prerequisites and installation steps to get you started.

Prerequisites

Ensure you have the following licenses and environments in place before proceeding with the installation:

Licenses: You will need valid licenses for both AEM Sites and Adobe Commerce.
AEM Environment: Your AEM environment must be either AEM on-premise 6.5 or Adobe Experience Manager – Cloud Service.
Adobe Commerce: Ensure you are running Adobe Commerce 2.4.3 or a later compatible version.

Installation Steps

Once you have confirmed the prerequisites, follow these steps to install the ALM reference site package:

Access the GitHub Repository: The ALM reference site package is conveniently hosted on the GitHub repository. Navigate to this repository to download the package.
Download the Package: Locate the ALM reference site package ZIP file (typically named something like alm-reference-site-package-1.0.0.zip) within the GitHub repository’s release section and download it to your local machine.
Install in AEM Package Manager: Log in to your AEM instance as an administrator. Navigate to the Package Manager (usually found under Tools -> Deployment -> Packages).
Upload Package: In the Package Manager, click Upload Package. Select the ZIP file you downloaded from GitHub and upload it to AEM.
Install the Package: Once uploaded, locate the ALM reference site package in the Package Manager list and click Install. Follow the on-screen prompts to complete the installation process.

For more detailed information and potential troubleshooting tips, always refer to the README file included within the downloaded package from the GitHub repository.

Connecting Your Platforms: Configuring Adobe Learning Manager Application

After successfully installing the AEM site package, the next crucial step is to establish a connection between your learning portal and your AEM site. This is achieved by configuring an Adobe Learning Manager application. This configuration is essential for seamless communication and data exchange between ALM and AEM.

This step is specifically relevant when you are using AEM Sites in conjunction with Adobe Learning Manager.

Follow these steps to configure your ALM application:

Access Applications in ALM: Log in to Adobe Learning Manager as an Integration Administrator. On the top navigation bar, click Applications.
Register a New Application: In the Applications page, locate the Register button, usually in the upper-right corner, and click it to create a new application.
Enter Application Details: The “Register a new application” screen will appear. Carefully fill in the following details:
1. Application Name: Provide a descriptive name for your application. This name will help you identify it later. For example, you could name it “AEM Sites Integration” or “[Your Organization Name] AEM Connector”.
2. URL: Enter the base URL of your organization’s website. This is typically your main website domain.
3. Redirect Domains: Specify the hosting domains for your AEM website. This is crucial for security and proper redirection. You can use wildcards (*) to include subdomains if needed. For example, if your AEM site is hosted on www.example.com and sites.example.com, you would enter both.
4. Description: Add a brief description of the application’s purpose. This helps in documenting and understanding the application’s role.
5. Scopes: This section defines the level of access the application will have. For AEM Sites integration, ensure you select Learner role read access and Learner role write access. These scopes grant the necessary permissions for data retrieval and interaction.
6. For this account only?: If you intend to use this application exclusively for your current ALM account, select Yes. Otherwise, select No if you might need to use it across multiple accounts.
Save Application: After entering all the required details, click the Save button to register your application.

Take note of the Application credentials displayed on the screen after saving. These credentials, including the Client ID and Client Secret, are vital for configuring the connection in AEM.

Finally, to activate the application, click Approve. This grants the application the permissions you configured.

Authentication and Authorization: Obtaining Tokens

To securely connect AEM Sites and Adobe Learning Manager, you need to obtain specific tokens that authorize communication between the two platforms. These tokens act as digital keys, verifying the identity and permissions of your AEM site when it interacts with ALM.

Navigate to Developer Resources: In your Adobe Learning Manager instance, go to the Developer Resources tab. This is typically found within the Admin interface.
Access Token Generation: Within Developer Resources, click on Access Tokens for Testing and Development. This section provides tools to generate the necessary tokens for integration purposes.
Generate Tokens Step-by-Step: The “Access Tokens for Testing and Development” section provides a series of steps to generate different types of tokens. Follow these steps in order:
1. Get OAuth Code:
  - Enter the Client ID you noted down when creating the ALM application.
  - Modify the scope parameter if needed. For basic integration, the default scope should suffice.
  - Click Submit. This will generate an OAuth code. Copy this code as you’ll need it in the next step.
2. Get Refresh Token:
  - Enter the Client ID and Client Secret from your ALM application credentials.
  - Paste the OAuth code you obtained in the previous step.
  - Click Submit. This will generate a Refresh Token. Copy and securely store this Refresh Token, as it’s crucial for long-term authentication.
3. Get Access Token:
  - Enter the Client ID and Client Secret again.
  - Paste the Refresh Token you just obtained.
  - Click Submit. This will generate an Access Token. Access Tokens are typically short-lived and used for immediate API calls.
4. Get Access Token Details (Optional but Recommended):
  - Enter the Access Token you obtained in the previous step.
  - Click Submit. This will display details about the Access Token in JSON format, including its expiration time, associated user roles, and account ID.

The JSON response from “Get Access Token Details” will provide valuable information, including the refresh token, access token, user role, account ID, user ID, and token expiration time. Crucially, make a note of the Refresh Token. You will reuse this Refresh Token when configuring the ALM account within AEM.

Setting Up the Connection: Configuring ALM Account in AEM

With the ALM reference site package installed and the necessary application and tokens generated, you can now configure the connection within your AEM environment. This configuration step bridges the gap between AEM Sites and Adobe Learning Manager, allowing them to work together seamlessly.

Launch AEM Instance: Open your AEM instance in a web browser and log in as an administrator.
Navigate to Cloud Services: In the AEM main menu, click Settings (the gear icon) and then select Cloud Services.
Select Adobe Learning Manager Configuration: In the Cloud Services dashboard, look for and click on Adobe Learning Manager Configuration.
Create Configuration Folder: Click the Create button, then choose Configuration Folder. Give your configuration folder a meaningful name, such as “ALM Integration” or “[Your Organization Name] Learning Platform”. Click Create to create the folder.
Select Configuration and Create: Navigate to the configuration folder you just created. Within this folder, click Create again. This time, select Adobe Learning Manager Configuration (or similar, depending on your AEM version).
Enter Configuration Details: The “Create Configuration” dialog will appear. Fill in the following details carefully:
1. Adobe Learning Manager mode: Choose the desired mode for your learning experience. This setting typically allows you to define how learning content is accessed by both logged-in and non-logged-in learners. Common options might include “Logged-in users only”, “Non-logged-in users can preview”, or “Public access”.
2. Adobe Learning Manager URL: Enter the base URL of your Adobe Learning Manager instance where your learning services are hosted. This is usually in the format https://[your-company].adobelearningmanager.com.
3. Account ID: Enter the Account ID of your Adobe Learning Manager account. You can find this in your ALM account settings or in the JSON response from the “Get Access Token Details” step.
4. Client ID, Client Secret, and Author Refresh Token: These are the credentials you obtained during the ALM application creation and token generation steps. Enter the Client ID, Client Secret, and the Author Refresh Token you saved earlier.
5. Customization of Widget: This section may offer options to customize the appearance and behavior of embedded Learning Manager widgets. For more advanced customization details, refer to the Integrate with AEM documentation.
Save and Close: After entering all the configuration details, click Save & Close to save your configuration.

AEM + Adobe Learning Manager (logged-in/non-logged-in users)

Adobe Learning Manager now provides the capability to showcase your training offerings to both existing and prospective customers and partners without requiring mandatory account creation or sign-in. This valuable feature helps drive product and training adoption by offering learners a quick and easy preview of your training content. This preview functionality effectively highlights and promotes product features, leading to increased product awareness and interest. The ease of access and broader reachability translate into heightened interest, which, in turn, drives training enrollments and overall learning adoption.

Using this workflow, a learner can seamlessly preview training courses, access detailed training information, or search for relevant training content without needing to log in to Adobe Learning Manager. It’s important to note that this workflow is specifically designed for non-native Learning Manager interfaces, such as AEM Sites and other headless implementations, and is not applicable to the native Learning Manager interface itself.

Configure and enable the learning platform connector

To enable this functionality, you need to configure and enable the Training Data Access connector. This connector is essential for allowing your AEM Sites-based (or other custom headless) user interface to retrieve and display training information to learners, providing a seamless training discovery experience both before and after login.

This connector is only required if you are utilizing AEM Sites-based or other headless interfaces to present your learning platform.

The Training Data Access connector works by exporting training metadata to a data storage and retrieval solution, as well as a search enablement system. This exported metadata allows your AEM Sites interface to retrieve training data, render web pages displaying training information, and provide optimized training search functionality to learners. For example, a non-logged-in AEM Sites interface can utilize this exported metadata to enable learners to search, browse, and access training pages that showcase course details.

Enabling this connector is crucial for building and rendering your AEM Sites-based web pages and delivering customized learning experiences to your learners, regardless of their login status.

When configuring the Training Data Access connector, you will need to provide the following information:

Adobe Learning Manager cdn base URL: Enter the base URL of the data retrieval CDN service path. You can find this URL on the Training Data Access connection page within Adobe Learning Manager.
Admin refresh token: Enter the Admin refresh token that you obtained in the earlier “Obtaining Tokens” section.
Training Metadata base URL: Enter the base URL of the search enablement and search data retrieval service path. This URL is also available on the Training Data Access connection page in ALM.
Adobe Learning Manager Register URL: Enter the self-registration URL generated by the Integration Administrator for your ALM account. This URL is used by learners to enroll in training courses.

AEM + Adobe Learning Manager + Adobe Commerce (logged-in/ non-logged-in users)

Adobe Learning Manager extends its capabilities to provide seamless integration with Adobe Commerce, enabling you to incorporate e-commerce functionalities into your learning platform. This integration allows you to offer paid training courses to your customers and business partners and facilitate easy training purchases directly within both native and non-native Learning Manager interfaces. Similar to the previous scenario, learners can preview training, access course information, and search for training without needing to sign in to Adobe Learning Manager.

If you have already created and approved an AEM application as described earlier, you can reuse that application for Adobe Commerce integration instead of creating a new one.

When configuring the Adobe Commerce connection, you will need to provide the following details:

Adobe Learning Manager cdn base URL: Enter the base URL of the data retrieval CDN service path. You can find this URL on the Adobe Commerce connection page within Adobe Learning Manager.
Adobe Commerce URL: Enter the base URL of your Adobe Commerce instance.
GraphQL proxy path: Client-side Learning Manager components directly access the Adobe Commerce GraphQL endpoint. To prevent potential CORS (Cross-Origin Resource Sharing) errors, it’s recommended to proxy these calls through your AEM endpoint or configure a proxy that adds necessary CORS headers. Specify the proxy path here.
Adobe Commerce store name: Enter the name of your Adobe Commerce store.
Adobe Commerce customer token lifetime (in secs): Define the customer token lifetime in seconds. This value determines the duration of a learner’s login session within the e-commerce context.
Admin refresh token: Enter the Admin refresh token that you obtained in the “Obtaining Tokens” section.

Customize Webpages

The ALM reference site package provides a set of pre-designed webpages that you can easily customize to match your brand and specific learning platform requirements. You can leverage the AEM references site and the available widgets to tailor these webpages.

Launch AEM Instance: Open your AEM instance and log in.
Navigate to Sites and Configuration Page: Click Sites in the AEM main menu. Then, open the configuration page for your learning site project (e.g., “Learning Site”).
Access Language Masters: Within your project’s configuration page, navigate to Learning Site > Language Masters > English. This folder contains the default English webpages included in the reference site package.
Edit a Webpage Template: Select any of the webpage templates listed in the folder and click Edit to open it in the AEM page editor.
Customize Components: On the webpage, identify the component you want to customize. Click the component settings button (usually a wrench or gear icon) associated with that component. This will open a dialog box where you can modify the component’s properties, such as text content, images, colors, layout, and widget configurations.
Preview and Publish: After making your desired changes, you can Preview the page to see how it will look to users. Once you are satisfied, click Publish Page to make your customized webpage live.

Create Webpages

Beyond customizing the provided templates, AEM Sites also allows you to create entirely new webpages from scratch based on the available templates. This gives you full control over the structure and content of your learning platform.

Create New Page: In the AEM main menu, click Create and then select Page.
Choose a Template: A dialog box will appear prompting you to choose a template for your new page. Select the template that best suits your needs from the available options (e.g., “Learning Page Template”, “Content Page Template”). Click Next.
Enter Page Properties: The “Page properties” dialog will appear. Fill in the required properties, such as:
- Title: The title of your webpage (displayed in the browser tab and potentially as the page heading).
- Name: The page name, used in the URL (e.g., “course-catalog”).
- Tags: Relevant tags to categorize your page (optional).
Create Page: Click Create to generate the new webpage based on the selected template and properties.
Edit New Page: Select the newly created page in the AEM Sites interface and click Edit to open it in the page editor.
Insert Learning Manager Components: In the page editor’s sidebar, you will find a list of available components. Filter the components by typing “Learning” or “site” in the filter box to quickly find the Learning Manager components. Drag and drop the desired components onto your page. For example, you might want to insert a Learning – Content component to display a course catalog or featured courses.
Configure Components: Once you have placed components on your page, configure each component by clicking its settings button and adjusting its properties as needed. For example, for a “Learning – Content” component, you might choose specific Catalog filters to control which courses are displayed.

Create Site from Blueprint

For an even faster website creation process, the ALM reference site package includes a “Learning Site Blueprint.” AEM Blueprints enable you to build entire websites directly from pre-configured AEM Sites components, eliminating the need to work with individual templates.

Navigate to Sites: On the AEM start page, click Sites.
Create Site: Click Create and then select Site.
Choose Learning Site Blueprint: In the “Create Site” dialog, locate and click on Learning Site Blueprint.
Click Next: Click Next to proceed to the site properties page.
Enter Site Properties: On the properties page, enter the required metadata for your new site, such as:
- Title: The overall title of your learning website.
- Name: The name for your site (used in URLs).
- Tags: Relevant tags for categorization (optional).
Create Site: Click Create to generate your new learning website based on the Learning Site Blueprint.
Navigate to Home Page: Click the Home hyperlink that appears after site creation to navigate to the home page of your newly created website. From here, you can further customize the widgets and catalog components to tailor the site to your specific needs.

Code Your Website

For developers who require deeper customization and control, the ALM reference site package provides the underlying code, allowing you to build your website programmatically.

The complete codebase is available in the Reference site GitHub repository. You can use this repository as a starting point for your custom development efforts.

The repository is structured into key modules:

core: This Java bundle contains the core functionality of the reference site, including OSGi services, event listeners, schedulers, and component-related Java code such as servlets and request filters.
ui.apps: This module houses the /apps and /etc parts of the project. It includes JavaScript and CSS client libraries, AEM components, and templates that define the structure and presentation of the website.
ui.content: This module provides sample content that demonstrates how to use the components from ui.apps. It’s useful for understanding component usage and getting started quickly.
ui.frontend: This module contains React components, indicating the use of React for front-end development within the reference site.

All the code is readily available in the GitHub repository to help you get your custom website development up and running efficiently.

Import and add learning manager components to existing web-page or template

If you have an existing AEM web project or website and want to incorporate the newly added Learning Manager components from the reference site package, you can easily import them. Installing the ALM reference site package automatically adds these components to your AEM Sites instance. By default, you can directly use these components within the “Learning Site” web project provided out-of-the-box or in websites created using the Learning Site Blueprint. However, to use them in your pre-existing projects, follow this import procedure.

Install ALM Reference Site Package: Ensure you have already installed the ALM reference site package into your AEM instance as described in the “Getting Started” section.
Open Existing Web Project: Open your existing AEM web project and navigate to the HTML file of the webpage or web template where you want to add the Learning Manager components.
Add Code Snippets to HTML: Open the HTML file in the AEM editor. You need to add specific code snippets to the page component to ensure the Learning Manager components render correctly. Add the following code snippets within the <head> section of your HTML page, before any learning components are rendered on the page:
```
<meta property="cq:adobelearningmanager-config-path" content="</path/to/your/alm/configuration>" />
```
Replace </path/to/your/alm/configuration> with the actual path to your Adobe Learning Manager configuration that you created in AEM Cloud Services (e.g., /conf/learning-site/settings/cloudconfigs/adobe-learning-manager).

This code snippet adds a meta tag to the page, mapping the configuration required for the Learning Manager components to function correctly. For more detailed information, refer to the customheaderlibs.html file within the Adobe Learning Manager reference site GitHub repository.
Map Configuration to Web Project: Ensure that you have properly mapped the Adobe Learning Manager configuration to your web project within AEM’s Cloud Services configurations.
Open AEM Sites Template: Open the AEM Sites template where you want to import the Learning Manager components. This is the template from which your webpages are derived.
Navigate to Allowed Components Policy: In the template page editor, navigate to the Allowed Components container (often found in the template structure) and select Policy (usually represented by a policy icon next to the container).
Allow Learning Manager Components: In the Policy page, navigate to the Properties tab, then to Allowed Components. In the component list, locate and select the following Learning Manager components:
- Learning – Content
- Learning – Form
- Learning – Structure
Save Policy: Click Save to save the updated policy for the Allowed Components container.

The next steps ensure that the template and webpages based on it load the necessary client libraries required by the imported Learning Manager components.

Open Page Policy: In the template page editor, click Page Information (usually in the top-right corner) and then select Page Policy.
Add Client Libraries: In the Policy page, navigate to the Properties tab, then to Client Libraries. Add the following client library categories to your template page by typing them in the input field and selecting them from the suggestions:
1. learning.site
2. learning.ui
3. learning.commerce
Save Template Policy: Click Save & Close to save the updated template policy.

After completing these steps and saving the template, you can now add the imported Learning Manager components to any webpage derived from this template.

Conclusion

The Adobe Learning Manager reference site package for AEM Sites offers a streamlined and efficient approach to building customized learning platforms. By leveraging the pre-built templates, components, and widgets, you can significantly reduce development time and effort while creating engaging and branded learning experiences. Whether you choose to customize the provided templates, create your own webpages, utilize the Learning Site Blueprint, or delve into code-level customization, the ALM reference site package empowers you to create a powerful and flexible learning environment tightly integrated with your AEM ecosystem. Explore the possibilities and start building your enhanced learning platform today, driving better training engagement and knowledge adoption with Adobe Learning Manager and AEM Sites.