Introducing the Sitecore Discover JS SDK

A presentation at Sitecore User Group - Columbus in February 2023 in Columbus, OH, USA by Rob Earlam

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.

Rob Earlam
@robearlam

1 / 13

The Sitecore Product Team have been building a new JavaScript SDK for Sitecore Discover, based on React. In this session, Rob will give a brief overview of Sitecore Discover and the different implementation options available. We will then deep dive into the SDK specifically and show you can use it to easily implement Discover on top of an existing eCommerce Storefront.

This session will show how to integrate the SDK into an existing NextJS Commerce site, to first start sending events back into Discover to being training the AI. We will then use this data to create engaging personalized e-commerce experiences, showing just how quickly the SDK enables you to leverage Discover in a phased rollout approach. The SDK is currently available as a Beta release for existing and new Discover customers, so this session will give a preview of new functionality due to be fully released in the coming months.

Introducing the Sitecore Discover JS SDK

Link for this presentation:

HTML code for embedding:

Share on social media: