Known-user personalization

In Adobe Experience Platform, click Identities from the left navigation. Then click the Create identity namespace button from the top right.

In the Create identity namespace dialog, enter the following:

• Display name: WKND User Id
• Description: User ID or username of the logged-in WKND user
• Select a type: Individual cross-device ID

Click Create to create the identity namespace.

In Adobe Experience Platform, click Schemas from the left navigation, click the Create schema button from the top right. Then select the Manual option and click the Select button.

In the Create Schema wizard, for Schema details step, select the Experience Event option (for time-series data like page views, clicks, and user interactions) and click Next.

For Name and review step, enter the following:

• Schema display name: WKND-RDE-Known-User-Personalization-Behavioral
• Class selected: XDM ExperienceEvent

Update the schema as follows:

• Add field group: AEP Web SDK ExperienceEvent
• Profile: Enable

Click Save to create the schema.

To know if the user is logged in (authenticated) or anonymous, add a custom field to the schema. In this use case, the goal is to personalize the content for known-users who have purchased any Ski adventure. Thus, identifying if the user is logged in (authenticated) or anonymous is important.

• Click the + button next to the schema name.

• In the Field properties section, enter the following:

  • Field name: wkndLoginStatus
  • Display name: WKND Login Status
  • Type: String
  • Assign to: Field group > wknd-user-details

  Scroll down and click the Apply button.

  

The final behavioral data schema should look like this:

In the Create Schema wizard, for Schema details step, select the Individual Profile option (for record-based data like customer attributes, preferences, and purchase history) and click Next.

For Name and review step, enter the following:

• Schema display name: WKND-RDE-Known-User-Personalization-Transactional
• Class selected: XDM Individual Profile

To store a user’s WKND Adventure purchase details, let’s first add a custom field that serves as an identifier for the purchase. Remember, the WKND user ID (wkndUserId) is the common identifier across systems.

• Click the + button next to the schema name.

• In the Field properties section, enter the following:

  • Field name: wkndUserId
  • Display name: WKND User ID
  • Type: String
  • Assign to: Field group > wknd-user-purchase-details

• Scroll down, check Identity, check Primary identity (the main identifier used to stitch data from different sources into a unified profile) and in the Identity namespace dropdown select WKND User Id. Finally, click the Apply button.

After adding the custom primary identity field, the schema should look like this:

Likewise, add the following fields to store additional user and adventure purchase details:

Enable Profile for the schema.

In Adobe Experience Platform, click Datasets from the left navigation, click the Create dataset button from the top right. Then select the Schema-based option and click Next.

For Select schema step, select the WKND-RDE-Known-User-Personalization-Behavioral schema and click Next.

For Configure dataset step, enter the following:

• Name: WKND-RDE-Known-User-Personalization-Behavioral
• Description: Dataset for the behavioral data such as page views with user login status.

Click Finish to create the dataset.

Toggle the Profile switch to enable the dataset for Profile.

Repeat the same steps for the transactional data dataset. The only difference is the schema and dataset name.

• Schema: WKND-RDE-Known-User-Personalization-Transactional
• Dataset: WKND-RDE-Known-User-Personalization-Transactional
• Description: Dataset for the transactional data such as WKND Adventure purchases.
• Profile: Enable

The final transactional data dataset should look like this:

In Adobe Experience Platform, click Datastreams from the left navigation and click Create datastream.

In the New datastream step, enter the following:

• Name: WKND-RDE-Known-User-Personalization-Behavioral
• Description: Datastream to send behavioral data to Experience Platform
• Mapping Schema: WKND-RDE-Known-User-Personalization-Behavioral

Click Save to create the datastream.

Once the Datastream is created, click Add Service.

In the Add Service step, select Adobe Experience Platform from the dropdown and enter the following:

• Event Dataset: WKND-RDE-Known-User-Personalization-Behavioral
• Profile Dataset: WKND-RDE-Known-User-Personalization-Behavioral
• Offer Decisioning: Enable (allows Adobe Target to request and deliver personalized offers in real-time)
• Edge Segmentation: Enable (evaluates audiences in real-time at the edge network for immediate personalization)
• Personalization Destinations: Enable (allows audience sharing with personalization tools like Adobe Target)

Click Save to add the service.

In the Add Service step, select Adobe Target from the dropdown and enter the Target Environment ID. You can find the Target Environment ID in Adobe Target under Administration > Environments. Click Save to add the service.

The final datastream should look like this:

In Adobe Experience Platform, click Tags from the left navigation and click the New Property button.

In the Create Property dialog, enter the following:

• Property Name: WKND-RDE-Known-User-Personalization
• Property Type: Select Web
• Domain: The domain where you deploy the property (for example, adobeaemcloud.com)

Click Save to create the property.

Open the new property, and click Extensions from the left navigation, and click the Catalog tab. Search for Web SDK and click the Install button.

In the Install Extension dialog, select the Datastream you created earlier and click Save.

Click Data Elements from the left navigation and click the Create New Data Element button.

In the Create New Data Element dialog, enter the following:

• Name: Host Name

• Extension: Select Core

• Data Element Type: Select Custom Code

• Open Editor button and enter the following code snippet:

  code language-javascript
  if(window && window.location && window.location.hostname) { return window.location.hostname; }

Likewise, create the following data elements:

• Name: Site Section

• Extension: Select Core

• Data Element Type: Select Custom Code

• Open Editor button and enter the following code snippet:

  code language-javascript

  if(event && event.component && event.component.hasOwnProperty('repo:path')) { let pagePath = event.component['repo:path']; let siteSection = ''; //Check of html String in URL. if (pagePath.indexOf('.html') > -1) { siteSection = pagePath.substring(0, pagePath.lastIndexOf('.html')); //replace slash with colon siteSection = siteSection.replaceAll('/', ':'); //remove `:content` siteSection = siteSection.replaceAll(':content:',''); } return siteSection }

• Name: Page Name

• Extension: Select Core

• Data Element Type: Select Custom Code

• Open Editor button and enter the following code snippet:

  code language-javascript
  if(event && event.component && event.component.hasOwnProperty('dc:title')) { // return value of 'dc:title' from the data layer Page object, which is propogated via 'cmp:show' event return event.component['dc:title']; }

• Name: WKND User ID

• Extension: Select Core

• Data Element Type: Select Custom Code

• Open Editor button and enter the following code snippet:

  code language-javascript
  // Data element for WKND User ID if(event && event.user && event.user.userId) { console.log('UserID:', event.user.userId); return event.user.userId; } else { console.log('UserID:'); return ""; }

• Name: WKND User Status

• Extension: Select Core

• Data Element Type: Select Custom Code

• Open Editor button and enter the following code snippet:

  code language-javascript
  // Data element for user login status if(event && event.user && event.user.status) { console.log('User status:', event.user.status); return event.user.status; } else { console.log('User status:anonymous'); return 'anonymous'; }

Next, create a data element of Identity map type. The Identity Map is a standard XDM structure that stores multiple user identifiers and links them together, enabling identity stitching across systems. This data element is used to store the WKND user ID (if logged in) as part of the Identity Map object.

• Name: IdentityMap-WKND User ID
• Extension: Select Adobe Experience Platform Web SDK
• Data Element Type: Select Identity map

In the right panel,

• Namespace: Select wkndUserId
• ID: Select WKND User ID data element
• Authentication state: Select Authenticated
• Primary: Select true

Click Save to create the data element.

Next, create a data element of Variable type. This data element is populated with the page details before sending it to the Experience Platform.

• Name: XDM-Variable Pageview
• Extension: Select Adobe Experience Platform Web SDK
• Data Element Type: Select Variable

In the right panel,

• Sandbox: Select your sandbox
• Schema: Select the WKND-RDE-Known-User-Personalization schema

Click Save to create the data element.

• The final data elements should look like this:

  

Click Rules from the left navigation and click the Create New Rule button.

In the Create New Rule dialog, enter the following:

• Name: all pages - on load - with user data

• For the Events section, click Add to open the Event Configuration wizard.

  • Extension: Select Core
  • Event Type: Select Custom Code
  • Open Editor button and enter the following code snippet:

  code language-javascript

  var pageShownEventHandler = function(evt) { // defensive coding to avoid a null pointer exception if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) { //trigger Launch Rule and pass event console.debug("cmp:show event: " + evt.eventInfo.path); // Get user data from session storage var userData = getUserDataFromSession(); var event = { //include the path of the component that triggered the event path: evt.eventInfo.path, //get the state of the component that triggered the event component: window.adobeDataLayer.getState(evt.eventInfo.path), //include user data in the event user: userData }; //Trigger the Launch Rule, passing in the new 'event' object trigger(event); } } /** * Get user data from session storage */ function getUserDataFromSession() { var userData = { userId: null, status: 'anonymous' }; try { var cachedUserState = sessionStorage.getItem('wknd_user_state'); if (cachedUserState) { var userState = JSON.parse(cachedUserState); var userInfo = userState.data; // Validate user data structure before transformation if (userInfo && typeof userInfo === 'object' && userInfo.hasOwnProperty('authorizableId')) { // Transform AEM user data to minimal AEP format userData = { userId: userInfo.authorizableId !== 'anonymous' ? userInfo.authorizableId : null, status: userInfo.authorizableId === 'anonymous' ? 'anonymous' : 'authenticated', }; //console.log('User details from session storage:', userData.username || 'Anonymous'); } else { console.warn('Invalid user data structure in session storage'); console.log('Using anonymous user data'); } } else { console.log('No user data in session storage, using anonymous'); } } catch (e) { console.warn('Failed to read user data from session storage:', e); console.log('Using anonymous user data'); } return userData; } //set the namespace to avoid a potential race condition window.adobeDataLayer = window.adobeDataLayer || []; //push the event listener for cmp:show into the data layer window.adobeDataLayer.push(function (dl) { //add event listener for 'cmp:show' and callback to the 'pageShownEventHandler' function dl.addEventListener("cmp:show", pageShownEventHandler); });

  Note that, the getUserDataFromSession function is used to get the user login status and WKND user ID (if logged in) from the session storage. The AEM code is responsible for populating the session storage with the user login status and WKND user ID. In the AEM specific step, you enhanced the WKND site Login functionality to store the user ID in the browser’s session storage.

• For the Conditions section, click Add to open the Condition Configuration wizard.

  • Logic Type: Select Regular
  • Extension: Select Core
  • Condition Type: Select Custom Code
  • Open Editor button and enter the following code snippet:

  code language-javascript
  if(event && event.component && event.component.hasOwnProperty('@type') && event.component.hasOwnProperty('xdm:template')) { console.log('The cmp:show event is from PAGE HANDLE IT'); return true; } else { console.log('The event is NOT from PAGE - IGNORE IT'); return false; }

• For the Actions section, click Add to open the Action Configuration wizard.

  • Extension: Select Adobe Experience Platform Web SDK

  • Action Type: Select Update variable

  • Map the XDM fields to the data elements:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2
    XDM Field	Data Element
    web.webPageDetails.name	Page Name
    web.webPageDetails.server	Host Name
    web.webPageDetails.siteSection	Site Section
    web.webPageDetails.value	1
    identityMap	IdentityMap-WKND User ID
    _$YOUR_NAMESPACE$.wkndLoginStatus	WKND User Status

  

  • Click Keep Changes to save the action configuration.

• Again, click Add to add another action and open the Action Configuration wizard.

  • Extension: Select Adobe Experience Platform Web SDK
  • Action Type: Select Send event
  • In the right panel’s Data section, map the XDM-Variable Pageview data element to the Web Webpagedetails Page Views type.

  

• Also, in the right panel’s Personalization section, check the Render visual personalization decisions option. Then click Keep Changes to save the action.

  

Your rule should look like this:

Click Publishing Flow from the left navigation and click the Add Library button.

In the Add Library dialog, enter the following:

• Name: 1.0
• Environment: Select Development
• Click Add All Changed Resources to select all the resources.

Click Save & Build to Development to create the library.

To publish the library to production, click Approve & Publish to Production. Once the publishing is complete, the property is ready for use in AEM.

In Adobe Experience Platform, click Profiles from the left navigation and click the Merge Policies tab.

In Adobe Experience Platform, click Destinations from the left navigation and click the Catalog tab. Search for Personalization and select (v2) Adobe Target destination.

In the Activate Destinations step, provide a name for the destination and click the Connect to destination button.

In the Destination details section, enter the following:

• Name: WKND-RDE-Known-User-Personalization-Destination
• Description: Destination for the known-user personalization
• Datastream: Select the Datastream that you created earlier
• Workspace: Select your Adobe Target workspace

Click Next and complete the destination configuration.

Navigate to the ui.frontend module and open the ui.frontend/src/main/webpack/components/form/sign-in-buttons/sign-in-buttons.js file. Review the code, after making AJAX call to currentuser.json, it either shows the Sign In or Sign Out button based on the user login status.

Update the code to store the user ID in browser’s session storage and also optimize the code to avoid making multiple AJAX calls to currentuser.json.

import jQuery from "jquery";

jQuery(function($) {
    "use strict";

    (function() {
        const currentUserUrl = $('.wknd-sign-in-buttons').data('current-user-url'),
            signIn = $('[href="#sign-in"]'),
            signOut = $('[href="#sign-out"]'),
            greetingLabel = $('#wkndGreetingLabel'),
            greetingText = greetingLabel.text(),
            body = $('body');

        // Cache configuration
        const CACHE_KEY = 'wknd_user_state';
        const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes in milliseconds

        /**
         * Get cached user state from session storage
         */
        function getCachedUserState() {
            try {
                const cached = sessionStorage.getItem(CACHE_KEY);
                if (cached) {
                    const userState = JSON.parse(cached);
                    const now = Date.now();

                    // Check if cache is still valid
                    if (userState.timestamp && (now - userState.timestamp) < CACHE_DURATION) {
                        return userState.data;
                    } else {
                        // Cache expired, remove it
                        sessionStorage.removeItem(CACHE_KEY);
                    }
                }
            } catch (e) {
                console.warn('Failed to read cached user state:', e);
                sessionStorage.removeItem(CACHE_KEY);
            }
            return null;
        }

        /**
         * Cache user state in session storage
         */
        function cacheUserState(userData) {
            try {
                const userState = {
                    data: userData,
                    timestamp: Date.now()
                };
                sessionStorage.setItem(CACHE_KEY, JSON.stringify(userState));
            } catch (e) {
                console.warn('Failed to cache user state:', e);
            }
        }

        /**
         * Clear cached user state
         */
        function clearCachedUserState() {
            try {
                sessionStorage.removeItem(CACHE_KEY);
            } catch (e) {
                console.warn('Failed to clear cached user state:', e);
            }
        }

        /**
         * Update UI based on user state
         */
        function updateUI(userData) {
            const isAnonymous = 'anonymous' === userData.authorizableId;

            if(isAnonymous) {
                signIn.show();
                signOut.hide();
                greetingLabel.hide();
                body.addClass('anonymous');
            } else {
                signIn.hide();
                signOut.show();
                greetingLabel.text(greetingText + ", " + userData.name);
                greetingLabel.show();
                body.removeClass('anonymous');
            }
        }

        /**
         * Fetch user data from AEM endpoint
         */
        function fetchUserData() {
            return $.getJSON(currentUserUrl + "?nocache=" + new Date().getTime())
                .fail(function(xhr, status, error) {
                    console.error('Failed to fetch user data:', error);
                    updateUI({ authorizableId: 'anonymous' });
                });
        }

        /**
         * Initialize user state (check cache first, then fetch if needed)
         */
        function initializeUserState() {
            const cachedUserState = getCachedUserState();

            if (cachedUserState) {
                updateUI(cachedUserState);
            } else {
                fetchUserData().done(function(currentUser) {
                    updateUI(currentUser);
                    cacheUserState(currentUser);
                });
            }
        }

        // Initialize user state
        initializeUserState();

        // Clear cache on sign-in/sign-out clicks
        $(document).on('click', '[href="#sign-in"], [href="#sign-out"]', function() {
            clearCachedUserState();
        });

        // Clear cache when modal is shown
        $('body').on('wknd-modal-show', function() {
            clearCachedUserState();
        });

        // Clear cache when on dedicated sign-in page
        if (window.location.pathname.includes('/sign-in') || window.location.pathname.includes('/errors/sign-in')) {
            clearCachedUserState();
        }

        // Clear cache when sign-in form is submitted
        $(document).on('submit', 'form[id*="sign-in"], form[action*="login"]', function() {
            clearCachedUserState();
        });

        // Clear cache on successful login redirect
        const urlParams = new URLSearchParams(window.location.search);
        if (urlParams.has('login') || urlParams.has('success') || window.location.hash === '#login-success') {
            clearCachedUserState();
        }

        // Debug function for testing
        window.debugUserState = function() {
            console.log('Cache:', sessionStorage.getItem('wknd_user_state'));
            clearCachedUserState();
            initializeUserState();
        };

    })();
});

Note that the Tags property rule relies on the user ID being stored in the browser’s session storage. The wknd_user_state key is common contract between the AEM code and the Tags property rule for storing and retrieving the user ID.

Verify changes locally by building the project and running it locally.

$ mvn clean install -PautoInstallSinglePackage

Login using asmith/asmith (or any other user you created) credentials, they are included in the aem-guides-wknd project.

In my case, I created a new user with the id teddy for testing.

After confirming the user ID is stored in the browser’s session storage (using the browser’s developer tools), commit and push the changes to the Adobe Cloud Manager remote repository.

$ git add .
$ git commit -m "Enhance the WKND site Login functionality to store the user ID in browser's session storage"
$ git push adobe-origin feature/known-user-personalization

Deploy the changes to the AEM as a Cloud Service environment either using Cloud Manager pipelines or using the AEM RDE command.

In the browser, navigate to the WKND site deployed to your AEM as a Cloud Service environment. Being anonymous, you should see similar data collection requests.

Login using asmith/asmith credentials, you should see similar data collection requests.

In AEM, click Experience Fragments and navigate to the WKND Site Fragments folder. In the desired location, create a new Experience Fragment.

Author the Experience Fragment by adding a Teaser component and customize it with content relevant to upselling the ski equipment.

Export the Experience Fragment to Adobe Target.

In Adobe Experience Platform, click Datasets and open the WKND-RDE-Known-User-Personalization-Behavioral dataset. Make sure that the ingested data stats are valid.

To verify the profiles are created, click Profiles from the left navigation. Then navigate to the Browse tab and filter using the following criteria:

• Merge policy: $YOUR_MERGE_POLICY_NAME
• Identity namespace: ECID (Experience Cloud ID, a unique identifier automatically assigned by Adobe to every visitor’s browser)
• Identity value: Find using the browser’s developer tools or Experience Platform Debugger. It is the AMCV_$NAMESPACE$ cookie value without the MCMID| prefix.

Click, View button.

Click on the profile, you should see the details of the profile.

In my case, I accessed my WKND site from two different browsers, so I have two ECIDs associated with user teddy. The data from both the ECIDs are stitched together to create the profile. You have started realizing the power of identity stitching and how it is used to create a complete customer profile. Soon the transactional data is stitched with the behavioral data to create a complete customer profile.

Click on the Events tab, you should see the events related to the profile.

In Adobe Experience Platform, click Datasets and open the WKND-RDE-Known-User-Personalization-Transactional dataset.

In the right panel, look for the ADD DATA section and drag theski-adventure-purchase-data.json file to it. This file contains the dummy transactional data for the WKND Adventure purchases. In a real world scenario, this data is ingested from the other system (for example, OMS or CRM or MDM) using the batch or streaming ingestion.

Wait for the data processing to complete.

Once the data processing is complete, refresh the dataset page.

Click Profiles from the left navigation. Then navigate to the Browse tab and filter using the following criteria:

• Merge policy: $YOUR_MERGE_POLICY_NAME
• Identity namespace: ECID
• Identity value: Use the same ECID value that you used to filter the behavioral data and associated profile.

Click on the profile, you should see the details of the profile. The transactional data is stitched with the behavioral data to create the complete customer profile.

Click on the Attributes tab, you should see the transactional and behavioral data details associated with the profile.

Click on the View identity graph link to see the identity graph of the profile.

Click Profiles from the left navigation. Then navigate to the Browse tab and filter using the following criteria:

• Merge policy: $YOUR_MERGE_POLICY_NAME
• Identity namespace: WKND User Id
• Identity value: teddy or asmith or any other user ID that you have used.

Click on the profile, you should see the same profile details as the one you saw in the previous step.

In Adobe Experience Platform, click Audiences from the left navigation and click the Create Audience button. Then select the Build-rule option and click the Create button.

In the Create step, enter the following:

• Name: UpSell-Ski-Equipment-To-Authenticated
• Description: Users who are logged in and have purchased any ski adventure
• Evaluation method: Select Edge (evaluates audience membership in real-time as users browse, enabling instant personalization)

Then click the Attributes tab and navigate to the Techmarketingdemos (or your $NAMESPACE$) field group. Drag and drop the Adventure Purchased field to the Start building section. Enter the following details:

Adventure Purchased: Select Contains and enter the value ski.

Then, switch to the Events tab and navigate to the techmarketingdemos (or your $NAMESPACE$) field group. Drag and drop the WKND Login Status field to the Events section. Enter the following details:

WKND Login Status: Select Equals and enter the value authenticated.

Also, select the Today option.

Review the audience and click the Activate to destination button.

In the Activate to destination dialog, select the Adobe Target destination you created earlier and follow the steps to activate the audience. Click Next and complete the destination configuration.

Log in to Adobe Experience Cloud and navigate to Adobe Target from the App Switcher or Quick Access section.

In Adobe Target, click Audiences and verify that the UpSell-Ski-Equipment-To-Authenticated audience is created.

By clicking on the audience, you can see the audience details and verify it’s properly configured.

Click Offers and verify that the AEM exported offer exists. In my case, the offer (or Experience Fragment) is called Must Have Items for Ski.

This validates the integration actions across Adobe Experience Platform, AEM, and Adobe Target.

In Adobe Target, click Activities and click the Create Activity button and select Experience Targeting activity type.

In the Create Experience Targeting Activity dialog, select the Web type and Visual composer option (a WYSIWYG editor that lets you create and test personalized experiences directly on your website), and enter the WKND site home page URL. Click the Create button to create the activity.

In the editor, select the UpSell-Ski-Equipment-To-Authenticated audience and add the Must Have Items for Ski offer in place of the top hero content. Please see the below screenshot for reference.

Click Next and configure the Goals and Settings section with appropriate goals and metrics, then activate it to push the changes live.

Visit the WKND site home page, if you are not logged in, you should see the default hero content.

Login using teddy/teddy (or asmith/asmith) credentials, you should see the personalized hero content.

Open your browser’s developer tools and check the Network tab. Filter by interact to find the Web SDK request. The request/response should show the Web SDK event and Adobe Target decision details.

Request output should look like this:

Response output should look like this: