Introduction to Sitecore Discover for Developers Part II: CEC, Widgets, Rules, Recipes, and Integration With a Vue.js Store Site

Welcome to the second part of the “Sitecore Discover for Developers” series! If you haven’t already, I highly recommend checking out the first part before diving into this article.

In this post, I’ll be sharing my hands-on experience and insights after exploring Sitecore’s Commerce Cloud, specifically focusing on the AI-powered search and merchandising product known as Sitecore Discover.

Sitecore Discover Core Capabilities

  1. Product Recommendations: Engage users with personalized product suggestions based on AI-driven recipes and context-defined widget rules.
  2. Catalog Search: Maintain and browse product data with ease, while creating search experiences around attributes like brands, colors, sizes, pricing, and inventory.
  3. Content Service: Craft rich visitor experiences with customizable content widgets, including banners that communicate your merchandising objectives effectively.
  4. Personalized Emails: Target users with tailored email campaigns based on their behavior, recent visits, purchases, and seasonal events.
  5. Reports and Analytics: Gain deep insights into your website’s performance, widget effectiveness, product catalog, data feeds, and other Discover functionalities through intuitive reports and dashboards in the Customer Engagement Console (CEC).

CEC: Pages, Widgets, Recipes, and Rules

Pages

Sitecore Discover widgets are dynamic components that offer various merchandising opportunities. These widgets are used within pages to deliver personalized experiences based on business needs and provide contextual information. The page types include product details pages, product listing pages, and landing pages.

  • Product details pages (PDPs): showcase individual product details and display personalized product suggestions and trending products for new users.
  • Product listing pages (PLPs): present a list of products by category and feature a recommendation widget displaying top products within the category.
  • Landing pages: combine products from multiple categories and can be populated using search results widgets or recommendation widgets with rules.

Widgets

Widgets are integral parts of delivering personalized experiences and come in various types, including preview search widgets, search results widgets, recommendation widgets, email recommendation widgets, banner widgets, HTML block widgets, and SEO widgets. Global widgets serve as the foundation for all widgets and can have multiple variations, with one active at a time.

Widgets can be customized and scheduled, and they track user interactions and performance through key performance indicators and metrics, visible in the Analytics section of the Customer Engagement Console (CEC).

Note: During setup, Sitecore representatives populate the CEC with pages and widgets, configuring them according to specific requirements.

Widget variations

Widget variations are customizable instantiations of widgets that can be scheduled for display on specific pages. Visitors see the active variation of a widget when they visit a page containing it. The widget variation framework provides the following capabilities:

  1. Publish temporary changes and configurations to widgets.
  2. Conduct split tests or A/B tests on different variations of a widget.

Each widget has a default variation that is shown when no other variation is scheduled. The default variation can be changed at any time, and the switch is immediately visible to visitors unless another variation is scheduled.

Widget variations can have different statuses, including:

  • Draft: Unpublished changes to a variation.
  • Unscheduled: Published but not scheduled to be displayed as the default variation.
  • Scheduled: Published and scheduled for display as a non-default variation.
  • Active: Currently displayed on the page.
  • Expired: A non-default variation that has passed its scheduled period.

Note: When changes are published to an active widget variation, they take effect immediately.

Widget variations rules

Widget variation rules are a crucial aspect of the widget variation framework, defining how a variation of a widget appears and behaves. These rules typically encompass context, merchandising, and general widget settings.

Context: Rules can be defined based on site context (where visitors must be on the site for the rule to apply) and visitor context (the segment of visitors to which the rule is applicable). If no context is set, the rule applies to all site areas and visitors.

Recipes: For recommendation and email recommendation widgets, AI-driven algorithms called “recipes” configure how results are generated based on trends, popularity, and conversions. Users can also create custom recipes to meet specific merchandising needs.

Merchandising: Merchandising strategies allow users to customize widget results and their display. Strategies include filtering for attributes and values, filtering for keywords, pinning items or categories to specific widget slots, and adjusting item and category rankings with options like boosting, burying, and blacklisting.

Settings: In the Settings section of a rule, users can further customize widget displays. Examples include defining the layout and user experience for banner and HTML widgets, configuring user interactivity, facets, and sorting options for search results widgets, and displaying trending categories and search ranking options in preview search widgets.

Merchandising Strategies

Merchandising StrategyDescriptionApplicable Widgets
PinningForces a product or category to appear in a specific slot, regardless of its presence in the natural results set for the rule context.Preview Search, Search Results, Recommendation, Email Recommendation, Global Widgets
IncludingForces a list of products or categories to be included in the results, even if they are not part of the natural results for the context. Requires a list-building workflow and targets a specific slot.Recommendation Widgets
BoostingMoves a product or category from a lower rank to a higher rank, making them appear in specific slots as long as they are in the natural results set for the context. Requires a list-building workflow and targets a specific slot.Preview Search, Search Results, Recommendation, Email Recommendation, Global Widgets
BuryingMoves products and categories within the natural results set for a rule context to the bottom of the list. Uses a list-building workflow without the need to target a specific slot.Preview Search, Search Results, Recommendation, Email Recommendation, Global Widgets
BlacklistingPrevents products from appearing in the natural results set for a rule context. Uses a list-building workflow to create a blacklist of products or categories without targeting a specific slot.Preview Search, Search Results, Recommendation, Email Recommendation, Global Widgets

Demo and example in a Vue.js store

Let’s hold on a bit with that much theory and start getting hands-on with a practical example.

In this video, I’m implementing a Search and a Recommendation widget, this last with a pre-defined recipe for persolalized results, while we implement events tracking and we finish by testing out the widget rules. All this running in a Vue.js example store that can be downloaded here in GitHub.

Main Takeaways

The DataProvider

Here is an example (used in the video) of how to query the Discover API by reusing the DataProvider from the NPM Packages:

DataProvider.get({
        context: {
          page: {
            uri: pUrl
          },
          user: {
            uuid: uId
          }
        },
        query: {
          keyphrase: {
            value: [this.searchQuery],
          },
        },
        n_item: 12,
        widget: {
          rfkid: "rfkid_nn"
        },
        content: {
          product: {},
        },
      }).then(response => {
        this.products = response.content.product.value;
      });
    }

CEC Event Monitor

The Event Monitor is a tool that helps verify website events sent to Sitecore Discover in the correct format. It requires a valid UUID and tracks events while interacting with the Discover-enabled e-commerce site. The left section displays received event details, validation errors, and product attribution. On the right, it lists expected events for the chosen experience, like Appear, Click, login, and funnel events. The Event Monitor ensures accurate event tracking and enhances understanding of customer interactions on Discover.

CEC AI Monitor

The AI Monitor, available in the Customer Engagement Console (CEC), is a debugging tool used to analyze how visitor actions on your website are interpreted by the AI in Discover.

To utilize the AI Monitor for monitoring a shopping session, you enter a UUID and interact with your Discover-enabled eCommerce site as a customer. The AI Monitor displays the chronological actions taken and the products shown in response. Additionally, it provides the probability of click conversion for each product in the results.

The AI Monitor also flags products displayed due to specific rules, helping in debugging and explaining inconsistent behaviors caused by rules.

On the right-hand side of the output, the total and partial affinity scores are displayed, which change with every click. This feature allows users to observe how affinities shift as they interact with the site, such as the increase in the green color affinity score when clicking on several green items.

Conclusion

I hope this article has provided you with a helpful introduction to Sitecore Discover. You have learned about the fundamental concepts and taken the first steps in understanding this platform. Additionally, a demo has been presented to guide you through its implementation in non-react applications.

You can find the finished code used during the demo here in this GitHub repo.

References

Leave a comment