Personalizing JSS app with Sitecore rules and GraphQL

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

8. APIs for extensibility

9. APIs for extensibility

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

15. Client-side personalization
Client-side personalization
demo

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

17. SSR Personalization
SSR personalization demo

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

21. SSG Personalization
SSG personalization demo

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!