Download to read offline
Uploaded byJack Spektor
Headless JS UG Presentation.pptx
This document discusses building a rules engine for personalization in a JSS app using Sitecore rules and GraphQL. It proposes parsing Sitecore rules XML on the client-side to run rules conditions and actions without support from XM Cloud or Sitecore. APIs would map Sitecore rules and actions to JavaScript equivalents. The rules engine could be used for personalization, A/B tests, promotions, and more. Examples demonstrate personalization techniques for client-side, SSR, and SSG rendering. While a proof of concept, contributions to support all Sitecore rules are welcomed.
Headless JS UG Presentation.pptx
- 1. Personalizing JSS appwith Sitecore rules and GraphQL Let’s build a rules engine and do some personalization!
- 2. Jack Spektor - Workingwith Sitecore since v6.0 - Mostly work with BE, very little experience with FE - don’t judge harshly! Sitecore Tech Lead @ AKQA NZ
- 3. Do you loveSitecore rules as I do? So easy to use! So customizable! 😍😍😍
- 4. But not supportedwith JSS and XM Cloud Sad… 😒😔😢
- 5. Can we stilluse Sitecore rules though? - XM Cloud still has rules field type - And Sitecore still exposes rules field content on Experience Edge - The only limitation is - it doesn’t execute them
- 6. We’ll build ourown FE rules engine! - We’ll parse rules XML - We’ll run rules conditions on client-side - And execute actions on client- side
- 7. APIs for extensibility -We’ll map all Sitecore rules & actions by their IDs to equivalent in JS - And we’ll make APIs to easily add new rules/actions/operators
- 8.
- 9.
- 10. APIs for extensibility -And we’ll publish it to npm to easily use it in NextJS app
- 11. How can weuse it? - Personalization - A/B tests - Shop promotions - Business decision trees - Etc.
- 12. Use case: Personalization -Let’s make layout personalization using Sitecore rules - We’ll introduce new field in Sitecore for personalization rules and render flags and we’ll use it in JSS
- 13. Client-side personalization Standard JSSlayout render flow request <Placeholde r/> <HTML/> component-props- factory page-props- factory Render components
- 14. Client-side personalization Client-side personalizationrender flow request <PersonalizedPlaceh older/> <HTML/> component-props- factory page-props- factory Render components personalization? Retrieve personalization rules from Edge and run them Modify props yes no
- 15.
- 16. SSR Personalization SSR personalizationrender flow request page-props- factory plugin <HTML/> page-props- factory Render components personalization? Retrieve personalization rules from Edge and run them Modify props yes no
- 17.
- 18. SSG Personalization SSG personalizationbuild flow build Personalize-sitemap plugin <HTML/> sitemap-fetcher Return all paths personalization? Retrieve personalization rules from Edge and parse them Calculate all personalized variations yes _scvariant01, _scvariant01, _scvariant10….
- 19. SSG Personalization SSG personalizationrender flow SSG Identify the applied rules based on the variantId <HTML/> Has variantId? Pre-render default variation no yes _scvariant01 Pre-render variant with rule personalization actions applied
- 20. SSG Personalization SSG personalizationrequest flow request Calculate variantId based on rule execution result <HTML/> Has personalization? Return the default path no yes _scvariant01 Return the path with variantId to render Middleware to run personalization rules for request First Rule Second Rule
- 21.
- 22. Method comparison Method ProsCons Client-Side Fastest response time Flickering on page load SSR No flickering No need for using custom placeholder Needs to be executed on every request SSG Fastest possible server-side personalization Max 4 rules per page possible
- 23. Summary - Only POCso far - Need to cover all Sitecore rules and conditions - Contributions welcome! - More case studies coming (chatbot based on Sitecore rules) https://github.com/JackTheHack/Sitecore.JSS-Rule-Engine
- 24.