Installation and initialization
The Cloud SDK consists of JavaScript packages (libraries), each representing a set of Sitecore digital experience platform (DXP)Sitecore digital experience platform (DXP) capabilities you can implement on your site, such as site visitor tracking and personalization. In each package, browser and server modules contain all the functions you need to implement these capabilities on the browser side and on the server side.
You start using the Cloud SDK by installing the packages for the features you want to add to your site, then initializing the browser or server module depending on your organization's needs. All your development work with the Cloud SDK takes place in the sxastarter rendering app inside the JSS Next.js app.
Installing packages
Some Cloud SDK packages, for example, the events package, are dependencies of the rendering app. This is because those packages are used internally in the rendering app. To use those packages and to make sure your rendering app works as intended, you need to install all the rendering app dependencies by running the following command:
npm installCloud SDK packages that are not dependencies of the rendering app require manual installation. For example, to use the personalize package, you need to install it by running the following command:
See the reference documentation for installation commands for each package.
Importing and initializing modules
Every Cloud SDK package consists of a browser module containing browser-side functions, and a server module containing server-side functions. You can import browser modules into the browser side of an app and server modules into the server side.
Every module contains an initializer function called init. You must initialize the module before you can run any other functions in it.
Here's an example page.tsx script showing how to import the browser module of the events package.
"use client";
import { useEffect } from "react";
import { init } from "@sitecore-cloudsdk/events/browser";
If you import modules from multiple packages into the same file, use import aliases to distinguish the initializer functions.
Multiple browser modules
Here's an example page.tsx script showing how to import the browser module from multiple packages, using the initBrowserEvents and initBrowserPersonalize import aliases for the initializer functions:
"use client";
import { useEffect } from "react";
import { init as initBrowserEvents } from "@sitecore-cloudsdk/events/browser";
import { init as initBrowserPersonalize } from "@sitecore-cloudsdk/personalize/browser";
After importing the initializer functions, you can initialize the modules.
Use try-catch blocks to handle errors when you're initializing modules.
Here's an example page.tsx script showing how to initialize the browser module of the personalize package using the previously imported initializer function:
"use client";
import { useEffect } from "react";
import { init } from "@sitecore-cloudsdk/personalize/browser";
export default function Home() {
// Initialize the module ->
useEffect(() => {
initPersonalize();
}, []);
const initPersonalize = async () => {
await init({
sitecoreEdgeContextId: "<YOUR_CONTEXT_ID>",
siteName: "<YOUR_SITE_NAME>",
enableBrowserCookie: true,
});
console.log("Initialized the personalize/browser module.");
};
// <- Initialize the module
return (<></>);
};Replace the placeholder values with environment variable values from your XM Cloud instance.
After initializing the modules using their init functions, you can run other functions available in the modules to, for example, collect data using events or personalize content.
See the reference documentation for importing and initialization scripts for all modules.