Introducing the Sitecore Discover JS SDK

Introducing the Sitecore Discover JS SDK Presented by: Rob Earlam April 2023 © 2023 Sitecore Corporation A/S. All Rights Reserved.

Rob Earlam Senior Developer Advocate, Sitecore 🌍Developer advocate 💻software developer 📽️movie lover 🎶music listener 🍕pizza eater 🍖meat smoker living in @RobEarlam @rob@robearlam.com RobEarlam https://robearlam.com/ © 2023 Sitecore Corporation A/S.

Agenda 1. What is Sitecore Discover? 2. Sitecore Discover implementation options 3. What is Sitecore Discover JS SDK? 4. Events 5. Components © 2023 Sitecore Corporation A/S. 3

• What is it? Sitecore Discover is a product discovery optimisation engine. It enables intelligent product search powered by AI and can enhance experiences anywhere merchandising information is displayed. It is a headless platform that delivers omnichannel personalisation across mobile, web, email, and in-store. It is designed to optimise a site’s SEO configuration to maximise product discovery. © 2023 Sitecore Corporation A/S. 4

• What is it? Full control over product visibility Split-test rules and widgets for continuous optimization Pin - place product in static location Boost - static or dynamic promotion Automate schedules for business rules Bury - static or dynamic downgrade Generate SEO landing pages Blacklist - remove products altogether © 2023 Sitecore Corporation A/S. 5

• Implementation Options Developer Effort Direct API Integration JavaScript SDK Hosted Pages Feature Availability © 2023 Sitecore Corporation A/S. 6

• JavaScript SDK • Still in Beta • Is designed specifically for React. • Provides total control over user experience design. • Inherently handles anonymous visitor tracking, page views events, widget events and clicks. • Two NPM Libraries • @sitecore-discover/react • @sitecore-discover/ui © 2023 Sitecore Corporation A/S. 7

• Demo Scenario • OSS B2C Commerce Framework based on Next.js • Shows layering Sitecore Discover over an existing storefront. • Shows combining SSG with client-side hydration © 2023 Sitecore Corporation A/S. 8

• Static & Dynamic Rendering Combined HTML / JS / CSS HTML / JS / CSS End Users CDN Checkout Data Code Events Catalog Commerce Data © 2023 Sitecore Corporation A/S. 9

• Events • Implement first to start getting data • Simple to hook into existing React applications using SDK • Some are provided out of the box, and some need to be wired up manually © 2023 Sitecore Corporation A/S. Event interface Event type Automatically dispatched trackAppearEvent Global event Yes by JS SDK for React. trackSearchResultsClickEven t Search results widget event Yes by JS SDK for React. trackSearchResultsFacetClick Search results widget event Event Yes by JS SDK for React. trackRecommendationClick Recommendation widget Yes by JS SDK for React. trackPreviewSearchClick Preview search widget Yes by JS SDK for React. trackPageViewEvent Global event Yes by JS SDK for React. trackAddToCartEvent Funnel event No. Dispatch verbosely. trackOrderConfirmEvent Funnel event No. Dispatch verbosely. trackPDPViewEvent Funnel event No. Dispatch verbosely. trackStatusCartEvent Funnel event No. Dispatch verbosely. trackUserLoginEvent Global event No. Dispatch verbosely. 10

• Components • How can you implement the Components? • Static Components • Dynamic Components (Generic Widgets) • Global Components (Every Page) • What do you get? • Components vs Templates • Storybook • How to create them? • Copy from storybook • CLI © 2023 Sitecore Corporation A/S. 11

• Conclusion • Do as much or as little with Discover as suits your use case • Just as easy to implement Discover over an existing eCommerce site as it is to implement on a greenfield project. • You can get access to JavaScript SDK Beta when you start a project, speak to your Discover Implementation expert. • Lots of support when you choose to use the SDK approach – Storybook & the CLI can make implementations really simple! © 2023 Sitecore Corporation A/S. 14

Thank you FOR DISCUSSION PURPOSES ONLY. © 2023 Sitecore Corporation A/S. All Rights Reserved. Sitecore, the Sitecore logo and Own The Experience are trademarks of Sitecore Corporation A/S and its affiliates. Other names and brands may be claimed as the trademarks of others.