What’s the Difference Between Sitecore Cloud SDK and Engage SDK?

Integrating with Sitecore CDP

Although both the Sitecore Cloud SDK and the Sitecore Engage SDK are tools made to help developers work inside the Sitecore ecosystem, they have different functions and are made for various parts of the platform. Both support the collection and usage of data within Sitecore CDP and both are integral in enabling Sitecore Personalize on a website.

They are also at different stages of their own development so functionality will most likely change in coming months and years. I foresee more updates to Cloud SDK given its closer integration with XM Cloud, than that of Engage. But before we get too far along, let's examine their distinctions, applications, specifications, and constraints.

What Is Sitecore Cloud SDK

With a focus on headless solutions, the Sitecore Cloud SDK is a robust development toolkit created to simplify interfaces with Sitecore's XM Cloud services. With the help of cutting-edge frameworks like Next.js, it enables developers to create, administer, and implement scaled digital experiences with ease. The Cloud SDK streamlines the complexity of headless architecture with integrated support for content delivery, personalization, and smooth integration with cloud-hosted environments like Vercel and Netlify, freeing up teams to concentrate on creating dynamic and captivating user experiences.

Key Features

There are several key features of Cloud SDK that stand out.

• Headless Material Management: This eliminates the requirement for the conventional CMS front-end by allowing developers to retrieve, modify, and distribute material through APIs.
• Integration-Friendly: Made to function flawlessly with contemporary frameworks like React and Next.js.
• Support for Deployment: Facilitates deployment and development processes in cloud-hosted environments such as Netlify and Vercel.
• Localization and Personalization: Provides the ability to customize headless experiences and manage localized content.

Requirements for Use

The requirements to use Cloud SDK are a bit restrictive. You will require:

• Access to an instance of Sitecore XM Cloud.
• Use of Sitecore JSS 21.6 or higher.
• Knowledge of GraphQL for content querying, since the SDK makes extensive use of GraphQL APIs.
• Hosting platforms like Vercel or Netlify that are compatible with Sitecore XM Cloud.
• Familiarity with contemporary JavaScript frameworks such as Next.js.

Key Steps to Implement Personalize Experiences with the Cloud SDK:

Firstly, this is if you want to run them programmatically. You can still run these entirely within Sitecore Personalize Web Experiences.

1. Install the Personalize Package: Ensure that the @sitecore-cloudsdk/personalize package is installed in your project:

    bash
    Copy code
    npm install @sitecore-cloudsdk/personalize
   

2. Initialize the Personalize Module: Import and initialize the personalize module in your application, providing necessary configuration such as your Sitecore Edge Context ID and site name.

    import { init } from '@sitecore-cloudsdk/personalize/browser';
   
    const initPersonalize = async () => {
      await init({
        sitecoreEdgeContextId: '<YOUR_CONTEXT_ID>',
        siteName: '<YOUR_SITE_NAME>',
        enableBrowserCookie: true,
      });
      console.log('Initialized the personalize/browser module.');
    };
   
    initPersonalize();
   

3. Run the Personalize Experience: Utilize the personalize function to execute a specific experience by providing its friendly ID, along with other parameters like channel and currency.

    import { personalize } from '@sitecore-cloudsdk/personalize/browser';
   
    const runPersonalizeExperience = async () => {
      const response = await personalize({
        friendlyId: '<YOUR_EXPERIENCE_FRIENDLY_ID>',
        channel: 'WEB',
        currency: 'USD',
      });
      console.log('Personalize experience response:', response);
      // Implement logic to display personalized content based on the response
    };
   
    runPersonalizeExperience();
   

What is Sitecore Engage SDK

In order to facilitate smooth interaction with customer data and sophisticated personalization capabilities, the Sitecore Engage SDK was created especially for developers working with Sitecore Personalize and the Customer Data Platform (CDP). It gives teams the ability to create intricate client journeys, apply dynamic audience segmentation, and distribute customized content across many touchpoints. With its powerful tools for consumer insights, behavior analytics, and real-time event tracking, the Engage SDK assists companies in developing highly customized experiences that increase engagement and cultivate enduring client loyalty.

Key Features

• Targeting and audience segmentation are made possible by audience management.
• Real-Time Personalization: Provides APIs for suggestions and real-time personalization.
• client Data Integration: Offers resources for combining client information from various media.
• Event tracking: Monitors user behavior and initiates events related to personalization.

Requirements for Use

• Sitecore SaaS services include access to Sitecore Personalize or CDP.
• An awareness of customer journey design and personalization tactics.
• Engage SDK integration with current marketing technology stacks.
• API integration features for synchronizing consumer data and tracking events.

Key Steps to Implement Personalize Experiences with the Engage SDK:

To run an interactive experience or experiment, you can use the Engage.personalize(personalizationData[, timeout]) function provided by the Engage SDK. This function requires the friendlyId of the live experience or experiment you wish to execute. Here’s an example:

import { engage } from "./engage.js";

const runPersonalization = async () => {
  const personalizationData = {
    channel: "WEB",
    currency: "USD",
    pointOfSale: "myretailsite/usa",
    friendlyId: "your_experience_friendly_id",
    // optional attributes
    params: {
      key: "value"
    }
  };

  try {
    const response = await engage.personalize(personalizationData);
    console.log(response);
    // Based on the response data, you can implement additional personalization here
  } catch (error) {
    console.error("Personalization failed:", error);
  }
};

runPersonalization();

Parameters:

• personalizationData: An object containing event and experiment data, including the friendlyId of the experience or experiment.
• timeout (optional): The number of milliseconds before the function times out and returns an error.

Considerations:

• Ensure that the experience or experiment you intend to run is live in Sitecore Personalize.
• The friendlyId can be found in the Sitecore Personalize interface under the experience or experiment details.
• Web experiences and web experiments are automatically run by the Engage SDK. The Engage.personalize() function is specifically for running interactive full-stack experiences or experiments.

Primary Benefit of Using Cloud SDK Over Engage SDK

Unlike Engage SDK, the Sitecore Cloud SDK supports page personalization and component A/B/n testing within JSS Next.js applications hosted on XM Cloud. This functionality is facilitated through the XM Cloud add-on, which integrates Next.js applications with XM Cloud's personalization and testing features.

Key Features:

• Page Personalization: Deliver personalized page variants to different audience segments based on predefined conditions.
• Component A/B/n Testing: Test multiple variants of components to determine which performs best among your audience. I discuss this a bit more in detail, later on.

Implementation Details:

• The XM Cloud add-on utilizes Next.js Middleware to enable personalization and A/B/n testing.
• It leverages the Events package in the Sitecore Cloud SDK to capture page view events in the user's browser.
• The add-on is automatically included in projects created using the starter kit, requiring no manual configuration to enable these features.

Considerations:

• Component A/B/n testing requires JSS version 22.1 or later.
• Ensure that your site has analytics identifiers configured for analytics to function correctly.

By utilizing the Sitecore Cloud SDK in conjunction with the XM Cloud add-on, you can effectively implement page personalization and component A/B/n testing to enhance user engagement and optimize content performance.

But What Is Component A/B/n Testing?

The ability to develop and test several iterations (variants) of individual components on a webpage in order to ascertain which one works best with your audience is known as component A/B/n testing. This approach focuses on smaller, reusable website building parts, including banners, call-to-actions, hero sections, or product cards, rather than testing complete pages. The objective is to minimize development overhead while optimizing particular aspects of the user experience.

How it works:

• In Sitecore XM Cloud Pages, marketers or content creators can immediately generate several variations of a certain component.
• Distinct text, images, layouts, or even completely distinct interactions can be found in each variation.

Targeting and Audience Segmentation:

• Depending on pre-established criteria, such as location, device kind, source of referral, or behavior characteristics, variants can be shown to particular user segments.
• A/B/n testing without segmentation can also use random allocation.

Using Next.js Middleware for rendering:

• The Next.js Middleware, which is integrated with the Sitecore Cloud SDK, uses real-time evaluation to dynamically choose which option to present to the user.
• To guarantee a seamless and easy experience for end users, this takes place server-side prior to the page being served.

Tracking and Gathering Metrics:

• Through the Cloud SDK, user interactions with each variant - such as clicks, conversions, and engagement time - are monitored and transmitted back to Sitecore's analytics platform.
• This makes it possible for developers and marketers to assess each variant's performance impartially.

Analyzing the Results and Making Decisions:

• For every version, Sitecore Analytics offers performance metrics and insights.
• The test can either be iterated with new variants or the winning version can be promoted to the primary experience after a clear winner has been determined.