Initializing the Cloud SDK

Initializing the SDK involves installing all the SDK packagespackages you want to use, and then importing their modulesmodules into your application.

Because all Cloud SDK functionalities are available in packages, you'll install packages depending on which functionalities you want to set up. The core package contains the initialization logic, so you must install core to initialize the SDK. The other packages represent a set of Sitecore digital experience platform (DXP) capabilities you can set up on your site, such as tracking, personalization, and search.

In each package, browser and server modules contain all the functions you need to set up these capabilities on the browser side and on the server side, respectively. For example, to set up browser-side personalization, you'll install the core and the personalize packages and import their browser modules.

In each SDK package, you can use the browser modules to run Cloud SDK code on the browser side, or the server modules to run it on the server side. You can also run some functionality on the browser side, and some other on the server.

"use client";
import { useEffect } from "react";
// Import SDK modules ->
import { CloudSDK } from "@sitecore-cloudsdk/core/browser";
import "@sitecore-cloudsdk/events/browser";
import "@sitecore-cloudsdk/personalize/browser";
import "@sitecore-cloudsdk/search/browser";
// <- Import SDK modules

export default function CloudSDKComponent() {
  useEffect(() => {
    CloudSDK({
      sitecoreEdgeContextId: "<YOUR_SITECORE_EDGE_CONTEXT_ID>",
      siteName: "<YOUR_SITE_NAME>",
      enableBrowserCookie: true
    })
     .addEvents() // Initialize the events package
     .addPersonalize({ enablePersonalizeCookie: true, webPersonalization: true }) // Initialize the personalize package
     .addSearch() // Initialize the search package
     .initialize();  // Run the initialization logic and set cookies
  }, []);

  return null;
};

Depending on your application requirements, you might need to modify the initialization code provided in this documentation. This section explains the initialization process so you can adjust the code to your needs.

Successfully initializing the SDK involves the following steps:

When you start the initialization, you must import the modules of all the SDK packages you want to use:

import { CloudSDK } from "@sitecore-cloudsdk/core/browser";
import "@sitecore-cloudsdk/events/browser";
import "@sitecore-cloudsdk/personalize/browser";
import "@sitecore-cloudsdk/search/browser";

The core import lets you access the CloudSDK function.

The other imports give the CloudSDK function access to the package initialization methods, such as to addEvents, addPersonalize, and addSearch. These are required to initialize the events, personalize, and search packages, respectively.

The CloudSDK function initializes the SDK itself when you run the initialize method. The initialize method runs the initialization logic and sets cookies. The following code example does all this, but it doesn't initialize any other SDK packages on its own:

CloudSDK({ /* Your initialization settings */ })
  .initialize();

To initialize the other SDK packages, you have to chain the package initialization methods, such as addEvents, on the CloudSDK function, before the initialize method. The following code example initializes the SDK and all its packages. After this code runs, you can run other SDK functions available in the packages:

CloudSDK({ /* Your initialization settings */ })
  .addEvents()
  .addPersonalize({ enablePersonalizeCookie: true, webPersonalization: true })
  .addSearch()
  .initialize();

You can initialize any number of SDK packages on the CloudSDK function after you import their corresponding modules. The order in which you run the package initialization methods does not matter, but they must precede the initialize method.

Here's a list of all package initialization methods: