Personalization with Context Hub and Experience Fragments for Returning Customers
An online bank wants to personalize the homepage for returning customers who have a mortgage. The personalization should show a mortgage refinance offer with a personalized rate based on the customer's segment (e.g., 'gold' or 'silver'). The bank uses AEM Sites with Context Hub for client-side data and Adobe Target for server-side personalization. The marketing team wants to use experience fragments to manage the offer content so it can be reused across multiple pages. The offer includes a call-to-action button that links to a pre-filled form. The bank has a strict requirement that personalization must not degrade performance; the homepage must load within 2 seconds. The customer data is available via an API that returns segment and rate. The bank also wants to A/B test two different offer layouts.
1. What approach would you recommend for implementing the personalized mortgage offer using experience fragments, Context Hub, and Adobe Target, while meeting performance requirements?
Read the worked answer
Use Adobe Target to deliver the personalized experience fragment variation. Create an experience fragment for the mortgage offer with variations for 'gold' and 'silver' segments, and two layout variations for A/B testing. In Target, set up an activity that targets the homepage and uses audience segments based on the customer's segment. The segment data can be passed to Target via the Context Hub or via the mbox parameters. To avoid performance degradation, load Target asynchronously and use server-side rendering where possible. Use the Experience Fragment component in AEM configured to fetch the appropriate variation from Target. For the personalized rate, use a dynamic component that calls the API client-side after page load, or use Target's offers with dynamic data via mbox parameters. Since the rate is customer-specific, it's better to fetch it via a lightweight API call after the offer is displayed, showing a placeholder. Alternatively, use server-side personalization with AEM's personalization engine and Context Hub stores, but that may require more infrastructure. For A/B testing, use Target's auto-allocate or manual split. Ensure that the experience fragment is cached at the dispatcher level with a short TTL or use client-side personalization to avoid caching issues. The key is to minimize blocking calls and use async loading for personalized content.
2. How would you ensure that the personalized content does not get cached and served to the wrong audience, while still maintaining performance?
Read the worked answer
Configure the dispatcher to not cache personalized pages, or use a cache-busting mechanism. Since personalization is client-side via Target, the base page can be cached, and Target modifies the content on the client. However, if using server-side personalization, you need to vary the cache by segment. Use the 'Vary' header or AEM's personalization with a cache key that includes the segment. Alternatively, use a CDN with edge-side includes (ESI) to assemble personalized fragments. For performance, cache the non-personalized parts of the page and only personalize the offer component. Use Target's 'mbox' with a short TTL. Also, ensure that the experience fragment variations are cached on the dispatcher but with the correct targeting parameters. Test with different user segments to ensure no leakage. Use a 'no-cache' header for the personalized component's AJAX call. This balances performance and correctness.