![Main](/cdp_personalize_in_xmcloud/main.png)
Sitecore CDP & Personalize in Sitecore XM Cloud
Description
CDP and Personalize can be integrated with XM Cloud so you can get information from the users and also personalization on your site. There are 2 ways to get this integration working, the first one is using the instance that comes integrated by default in your XM site. The other option is to integrate a different CDP account into your site by hand. In both of them, you can get almost all the benefits of CDP and Personalize.
Default Account vs Custom Account
Arquitecture
The arquitecture of CDP and Personalize in XM Cloud is really simple. The file which initializes the library needs to be called in all pages. That is way that file is called in a <Scripts />
component. And that script then is called in the layout of your site. This ensures that the engage library is loaded in all the pages of your site.
After you have initialized the engage library you need to expose it so you can use the functions in any part of your code. In order to do this you can just add engage to window or you can also add engage to the context of your app and use it anywhere.
Considerations
You might have some problems here if you use SSG (Static Site Generation). Sometimes the engage events are not triggered correctly. For example, in our site, we have product detail pages, and in all of them we send page views, but when you go through those pages the site never reloads (because of SSG) and this makes that the layout never change so the view event is not triggered any more.
In order to correct this it is necessary to add some logic where you are sending your events to trigger manually them again. In our example, everytime you go to a new product detail page, the URL change, so we created states for the path.
const [path, setPath] = useState("");const [prevPath, setPrevPath] = useState("");
Then with the useEffect hook we trigger the event if the path change.
useEffect(() => { if (pageState !== LayoutServicePageState.Normal || !route?.itemId) { return; } // Update prevPath with the previous path value setPrevPath(router.asPath); // Review if path has changed if (prevPath !== path) { const language = 'EN'; const path = window.location.pathname.toLocaleLowerCase(); const channel = 'WEB'; window.engage.pageView({ channel, currency: 'USD', pointOfSale: process.env.NEXT_PUBLIC_CDP_POINTOFSALE as string, page: path, language, }); setPath(router.asPath); }}, [pageState, route, variantId, site, router.asPath, prevPath, path, state]);
This snippet of code can be added where the engage library is initialized so this problem is solved for all pages.
There is another problem again because of SSG and is related to experiences and experiments in Personalize. Every time the site loads, Personalize triggers the experiences and experiments that need to be shown in your site, but, again, as the layout doesn't reloads, Personalize doesn’t trigger neither the experiences nor experiments.
To solve this problem Engage has a function called triggerExperiences()
which triggers all the experiences and experiments. This can also be added to the last snippet so them are triggered in all pages. In our case, we just have an experiment in the home page, so we validate that to trigger them.
useEffect(() => { if (pageState !== LayoutServicePageState.Normal || !route?.itemId) { return; } // Update prevPath with the previous path value setPrevPath(router.asPath); // Review if path has changed if (prevPath !== path) { // If it is the home page and the library is loaded, trigger experiences if ( path === '/' && window.Engage !== undefined && window.Engage.triggerExperiences !== undefined ) { window.Engage.triggerExperiences(); } const language = 'EN'; const path = window.location.pathname.toLocaleLowerCase(); const channel = 'WEB'; window.engage.pageView({ channel, currency: 'USD', pointOfSale: process.env.NEXT_PUBLIC_CDP_POINTOFSALE as string, page: path, language, }); setPath(router.asPath); }}, [pageState, route, variantId, site, router.asPath, prevPath, path, state]);