Headless JS UG Presentation.pptx
•Download as PPTX, PDF•
0 likes•12 views
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.
Recommended
More Related Content
Similar to Headless JS UG Presentation.pptx
Similar to Headless JS UG Presentation.pptx (20)
Recently uploaded
Recently uploaded (20)
Headless JS UG Presentation.pptx
- 1. Personalizing JSS app with Sitecore rules and GraphQL Let’s build a rules engine and do some personalization!
- 2. Jack Spektor - Working with 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 love Sitecore rules as I do? So easy to use! So customizable! 😍😍😍
- 4. But not supported with JSS and XM Cloud Sad… 😒😔😢
- 5. Can we still use 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 our own 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
- 10. APIs for extensibility - And we’ll publish it to npm to easily use it in NextJS app
- 11. How can we use 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 JSS layout render flow request <Placeholde r/> <HTML/> component-props- factory page-props- factory Render components
- 14. Client-side personalization Client-side personalization render 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
- 16. SSR Personalization SSR personalization render 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
- 18. SSG Personalization SSG personalization build 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 personalization render 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 personalization request 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
- 22. Method comparison Method Pros Cons 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 POC so 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. Thank you!