Install and initialize the Cloud SDK
Before you can start using the Cloud SDK, you have to install and initialize all the SDK packagespackages you want to use, and then import their modulesmodules. For more information, see Initializing the Cloud SDK.
Next.js
In this topic, you install and initialize all SDK packages in a Next.js app. In production, only initialize the packages you need depending on your application requirements and your Sitecore subscriptions.
-
Make sure you're ready to start development with the Cloud SDK.
Browser side
On the browser side, initialize the SDK once, in a centralized place, on app initialization. For example, in a Next.js App Router app, initialize the SDK in an Effect Hook in a component, then add that component to layout.tsx
. This ensures that the initialization runs only once, centrally.
To install and initialize the Cloud SDK on the browser side:
-
In your code editor, in the root folder of your web app, open the terminal and install the
core
package and any other SDK packages you want to use by running the following commands:RequestResponsenpm install @sitecore-cloudsdk/core npm install @sitecore-cloudsdk/events npm install @sitecore-cloudsdk/personalize npm install @sitecore-cloudsdk/search
The
core
package contains the SDK initialization logic. The other packages contain code for setting up Sitecore DXPSitecore DXP capabilities. -
Create a component, for example,
/components/CloudSDK.tsx
. -
Depending on your router type, paste the following code into
CloudSDK.tsx
, then save your changes:-
If using the Pages Router:
RequestResponseimport { 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; };
-
If using the App Router:
RequestResponse"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; };
Replace the placeholder values with the required details you collected when you prepared for development.
This code runs the
CloudSDK
function, which initializes the Cloud SDK using your Context ID and site name, and it sets cookies from the browser side. It also initializes theevents
,personalize
, andsearch
packages, and it enables Sitecore Personalize web personalizations. If you don't want to enable web personalizations, removewebPersonalization: true
.The component is now ready to be used elsewhere in your app.
-
-
Depending on your router type:
-
If using the Pages Router - add the component you just created to
_app.tsx
, in thereturn
statement directly above<Component />
:RequestResponse// ... import CloudSDKComponent from "@/components/CloudSDK"; export default function App({ Component, pageProps }: AppProps) { return ( <> <CloudSDKComponent /> <Component {...pageProps} /> </> ); }
-
If using the App Router - add the component you just created to
layout.tsx
, directly inside the<body>
tag, before{children}
, then save your changes:RequestResponseimport CloudSDKComponent from "../components/CloudSDK"; // ... export default function RootLayout({ children }) { return ( <html> <body> <CloudSDKComponent /> {children} </body> </html> ); }
This code initializes the SDK once, on app initialization. Because this code runs in the app's root layout, the SDK code will be available globally, on all routes of your app.
-
-
Start your app by entering the following command in your terminal:
RequestResponsenpm run dev
-
In your web browser, navigate to your Next.js app, typically at
http://localhost:3000
. -
In your web browser console, enter
window.scCloudSDK
. If an object returns, you have successfully initialized the SDK.TipThis object lists all the packages you have initialized and their version. Use this in any future implementations to quickly verify that the SDK is correctly initialized.
-
Optionally, in your web browser's developer tools, in Cookies, find at least one cookie that starts with
sc_
. This is another way to verify that you've successfully initialized the Cloud SDK.You can now run other browser-side SDK code in the rest of your app. For example, you can start setting up tracking by capturing
VIEW
events.
You've now successfully installed and initialized the Cloud SDK. You are now ready to set up the following Cloud SDK capabilities to ensure that your web app uses the full potential of Sitecore DXP products:
We also recommend that you:
-
Explore the reference documentation for all Cloud SDK packages and modules.
-
Learn about Cloud SDK cookies.
-
Learn more about the SDK initialization process.
The Cloud SDK consists of packages. Each package represents a set of Sitecore DXP capabilities. Cloud SDK packages consist of browser
and server
modules.
Cloud SDK packages consist of browser
and server
modules. Each module contains all the functions required to set up specific Sitecore DXP capabilities. The browser
module is for setting them up on the browser side, and the server
module is for setting them up on the server side.
A suite of SaaS-enabled Sitecore products, each offering rich digital experience capabilities such as tracking, personalization, and search. The Cloud SDK supports the following Sitecore products:
-
Sitecore CDP
-
Sitecore Personalize
-
Sitecore Search