Personalization & Optimization
When discussing the personalization and A/B testing of websites, there’s always a debate about how these features affect web performance and user experience.
Personalization and testing involve altering parts of the website at different stages compared to the original content. This process requires requesting personalization options, which involves waiting for the system to check the user, their segment, and then make a decision to return the best offer, followed by rendering the new content and finally informing that user has seen new .
When trying to render personalization content, you also need to ensure there is no flicker. Flicker is when an original content is briefly displayed before the alternative appears during testing/personalization.
For Adobe Products it is recommended to use Adobe Experience Platform Web SDK which supports retrieving personalized content from Adobe personalization solutions, including Adobe Target, Offer/Experience Decisioning and Adobe Journey Optimizer.
This is example of how would that look like when using Adobe Target Edge Decisioning:
Now what are the options of enabling Adobe Personalization on the website built with Edge Delivery Services?
Load WebSDK directly
The following documentation describes how to Configure and load the Adobe Experience Platform WebSDK (aka alloy) directly on Edge Delivery Services project code.
Because it's loaded directly as part of the website you have full control in which phase to initialize the library. The approach leverages the Browser’s MutationObserver API
In the link you can find some information on the impact of adding Adobe Target to overall page speed - it will impact PageSpeed by 0-3 points:
The roundtrip to the Adobe Target backend services to obtain the list of page modifications that need to be applied is done during the eager phase and will impact the overall LCP. Since the instrumentation has an overhead, we recommend only enabling it on selected pages that are meant to be experimented on or personalized.
Problem with this approach
Now this is a nice approach optimized for Web Performance and a great option if you only have Adobe Target and usage of the WebSDK will not be changing often. But usually WebSDK is also there for data collection to products such as Adobe Experience Platform or Adobe Analytics. It is best to make those requests in a later phase after your website has been rendered and made interactive. We also need to integrate our personalization solution with the Consent Management tool and only personalize after the user has given consent. Marketing users also want to be able to configure different rules for data collection and reporting using Tag Manager so the question is - can those two coexist?
Unfortunately, if we add the WebSDK Extension to our Tags so we can use provided Actions (and we want that to leverage the UI and other powerful features) - it will bundle the library together with all the rules - which means WebSDK is loaded twice (once eagerly to apply Personalization and other time later through Tag Manager to collect the data).
Using the Tag Manager
For details on this approach see Integrating the Tag Manager
Hybrid Personalization
Can Hybrid Personalization be an answer for performant personalization, especially if we implement it using Edge workers? Sounds like the best option in terms of performance but it comes with some added complexity ( and cost)