Initializing tracking, events, and personalization in the Content SDK

The earlier initialization chained the required functionality using the dot (.) operator. See examples below for browser and server implementations.

'use client';

import { useEffect } from 'react';
import { CloudSDK } from '@sitecore-cloudsdk/core/browser';
import '@sitecore-cloudsdk/events/browser';
import '@sitecore-cloudsdk/personalize/browser';

export default function Home() {
  useEffect(() => {
    CloudSDK({
      sitecoreEdgeContextId: '<YOUR_CONTEXT_ID>',
      siteName: '<YOUR_SITE_NAME>',
      enableBrowserCookie: true,
    })
      .addEvents()
      .addPersonalize({
        enablePersonalizeCookie: true,
        webPersonalization: true,
      })
      .addSearch()
      .initialize();
  }, []);

  return <></>;
}

import type { NextRequest, NextResponse } from 'next/server';
import { CloudSDK } from '@sitecore-cloudsdk/core/server';
import '@sitecore-cloudsdk/events/server';
import '@sitecore-cloudsdk/personalize/server';

export async function middleware(request: NextRequest) {
  const response = NextResponse.next();

  await CloudSDK(request, response, {
    sitecoreEdgeContextId: '<YOUR_CONTEXT_ID>',
    siteName: '<YOUR_SITE_NAME>',
    enableServerCookie: true,
  })
    .addEvents()
    .addPersonalize({ enablePersonalizeCookie: true })
    .addSearch()
    .initialize();

  return response;
}

The new initialization method uses a combination of plugins to determine the functionality and adapters to determine the environment. The initialization function (initContentSdk) accepts a config object (contextId, siteName), and a plugins array, where analytics, events, and personalization are all plugins. Environment differences (browser vs proxy/server) are handled through the chosen adapter. The analyticsPlugin is always present if you use events or personalize.

'use client';

import { useEffect } from 'react';
import { initContentSdk } from '@sitecore-content-sdk/core';
import { analyticsPlugin, analyticsBrowserAdapter } from '@sitecore-content-sdk/analytics-core';
import { eventsPlugin } from '@sitecore-content-sdk/events';
import { personalizeBrowserPlugin, personalizeBrowserAdapter } from '@sitecore-content-sdk/personalize';

export default function Home() {
  useEffect(() => {
    initContentSdk({
      config: {
        contextId: '<YOUR_CONTEXT_ID>',
        siteName: '<YOUR_SITE_NAME>',
      },
      plugins: [
        analyticsPlugin({
          options: { enableCookie: true },
          adapter: analyticsBrowserAdapter(),
        }),
        eventsPlugin(),
        personalizeBrowserPlugin({
          options: { enablePersonalizeCookie: true },
          adapter: personalizeBrowserAdapter(),
        }),
      ],
    });
  }, []);

  return <></>;
}

import type { NextRequest, NextResponse } from 'next/server';
import { initContentSdk } from '@sitecore-content-sdk/core';
import { analyticsPlugin } from '@sitecore-content-sdk/analytics-core';
import { eventsPlugin } from '@sitecore-content-sdk/events';
import { personalizeServerPlugin } from '@sitecore-content-sdk/personalize';
import { analyticsProxyAdapter, personalizeProxyAdapter } from '@sitecore-content-sdk/nextjs';

export async function proxy(request: NextRequest) {
  const response = NextResponse.next();

  await initContentSdk({
    config: {
      contextId: '<YOUR_CONTEXT_ID>',
      siteName: '<YOUR_SITE_NAME>',
    },
    plugins: [
      analyticsPlugin({
        options: { enableCookie: true },
        adapter: analyticsProxyAdapter(request, response),
      }),
      eventsPlugin(),
      personalizeServerPlugin({
        options: { enablePersonalizeCookie: true },
        adapter: personalizeProxyAdapter(request, response),
      }),
    ],
  });

  return response;
}

// Browser 
import { pageView } from '@sitecore-cloudsdk/events/browser'; 
 
// Server 
import { pageView } from '@sitecore-cloudsdk/events/server';

import { pageView } from '@sitecore-content-sdk/events';

Since the Cloud SDK packages have now been integrated into the Content SDK, the following paths have changed:

All packages now use a single entry point with environment-specific behavior controlled through adapters. This allows you to use the base import path instead of using /browser or /server.

import { addToEventQueue, processEventQueue, clearEventQueue } from '@sitecore-content-sdk/events/browser';

Several settings have been simplified by renaming them and moving them into their specific plugins. See the following table for more information:

personalizeBrowserPlugin({
    adapter: personalizeBrowserAdapter(),
    options: { enablePersonalizeCookie: true },
}),

personalizeServerPlugin({
    adapter: personalizeServerAdapter(request as any, response),
    options: { enablePersonalizeCookie: true },
}),

The following cookies have been renamed:

Content SDK injects a global scContentSDK variable into the window object when either of the built-in plugins is used with a browser adapter (server and proxy adapters will not add it). window.scContentSDK provides access to the current analytics configuration, the client ID, and library version for diagnostics and debugging purposes, without requiring you to import or directly access any plugin instances.

This replaces the older window.scCloudSDK['analytics-core'] structure from the Cloud SDK, but gives the same stable debugging surface for analytics without coupling your code to the plugins API. The global variable is also resilient to multiple SDK initializations: any new properties introduced by extra plugins will be added to the properties that already exist in the scContentSDK object.

For example, when the SDK is initialized as shown:

initContentSdk({
  config: {
    contextId: "<YOUR_CONTEXT_ID>",
    siteName: "<YOUR_SITE_NAME>",
  },
  plugins: [
    analyticsPlugin({
      options: { enableCookie: true },
      adapter: analyticsBrowserAdapter(),
    }),
  ],
});

The browser adapter (analyticsBrowserAdapter()) in the analytics plugin creates the global variable during the init phase. It contains an analytics_core property with three members: