Sitecore XMCloud Personalization and CDP Personalization with SitecoreCloud SDK

-

 Sitecore XMCloud allows us to personalize the content of the pages by using Sitecore Pages.

XMCloud provides a lightweight Sitecore CDP feature which is limited to Page Views. Also, we can view only 30 days of analytics information from the Analytics dashboard. Personalization in XMCloud is happening through SitecoreCloud SDK with Engage module.

Setup personalization in XMCloud and application environment variable configuration:

  • Create page variants from Sitecore Pages with personalized content by making the necessary audience rule.
  • The audience rule template is available out-of-box, customization or the creation of new rules is not possible at the moment.
  • Once the Page variant is created and assigned personalized content, publish it to Edge.
  • Download the repository from GitHub XMCloud Foundation or use the command npx create-sitecore-jss --templates nextjs-personalize
  • Update the .env file with the following environment variables
    • SITECORE_API_KEY (Your experience edge token)
    • JSS_APP_NAME (Your Sitename )
    • GRAPH_QL_ENDPOINT =https://edge.sitecorecloud.io/api/graphql/v1
    • FETCH_WITH=GraphQL
  • The below Environment variables apply to both XMCloud  and Sitecore CDP
    • NEXT_PUBLIC_CDP_TARGET_URL
    • NEXT_PUBLIC_CDP_CLIENT_KEY
    • NEXT_PUBLIC_CDP_POINTOFSALE
  • If using localhost set the cookie to an empty string in \src\sxastarter\src\components\CdpPageView.tsx
  • For getting the XMCloud details to go to the sites Developer Settings tab

  • Point Of Sale(POS) can be created in XMCloud in any of the following ways




  • Enable Personalization on the development environment by updating the file (sxastarter\src\lib\middleware\plugins\personalize.ts) to the below line as personalization is disabled for a development environment.
            disabled: () => process.env.NODE_ENV === 'test',

Process of NextJs middleware and Engage module:
  • When a user lands on the page visits will be tracked with the help of Engage module.
  • Nextjs middleware(PersonalizeMiddleware)  is used to enable personalization at the edge, This middleware will identify the personalized variant of the page, based on the audience rule defined in XMCloud.
  • Once the page variant is identified it then rewrites the path of the page with the identified page variant path.  
  • Nextjs app gets the variant and manipulates the layout and rendering and displays a personalized page to the user.
 Sample request and the response of NextJs  middleware:
  •  Middleware calls experience edge to get the variant information about the page.
  •    

        
  • Once the page variant is available then it calls the CDP endpoint (https://domainname/v2/callFlows) with request information along with user context to find matched page variant.
  • Once a matched variant is found, then URL rewrite happens to get the personalized data for the user based on the variant
  • Example of Url rewrite of the variant path for the home page:         http://domainname/_variantId_{matched variant id}



  • Once the Page view event is triggered by the Engage module it will be found in Sitecore Page's Analyze tab        

  • This GitHub repository has already defined the Page view event in the following path \src\sxastarter\src\components\CdpPageView.tsx



  • Events can also be get captured in Sitecore CDP instead of XMCloud after the necessary update to the environment variable from the Sitecore CDP portal in the nextjs app.
  • We can also use Engage Module to trigger different events for CDP apart from the Pageview event.
  • Example shows the events captured in Sitecore CDP



Happy Programming 😊


Comments

Post a Comment

Popular posts from this blog

Custom Item Url and resolving the item in Sitecore - Buckets

-
Image
I have a situation to update the Item URL to be SEO friendly as my items in content tree looks like below. In the above image in order to resolve the item, Sitecore will find the item from the below URL http://domainname/en/dine/nv/chicken but I need to form a URL that is more SEO friendly like http://domainname/en/chicken In Sitecore by Out of box, we can achieve this by using Aliases , we can create an Aliases under System à Aliases and in the Linked Item field select the target item. But this is very tedious as we need to go to every item in the content tree and create Aliases, instead of that we will be going to do it programmatically using custom pipelines. ·          Link Provider (Provides the custom URL for the item based on the templates) ·          Item Resolver (Resolves the item based on the custom URL generated by CustomLinkProvider , that we going to create later...
Read more

Exploring Sitecore XM Cloud Forms: A Comprehensive Overview

-
Image
  The most awaited news came from Sitecore about the release of XM Cloud Forms.  Previously Sitecore enthusiasts / Marketers used different ways of forms implementation in Sitecore to reach the target customers like WFFM (Web Form For Marketers) Sitecore Forms Embeddable Forms Framework(EFF) XM Cloud Form is the latest addition by Sitecore and especially used to create Forms on XM Cloud pages. It will only work with the latest version of Sitecore JSS (21.6) Note:  I have tried to use XM Cloud Forms in my local docker setup by cloning the starter   repo , but I couldn't see the option of Forms in the XM Cloud dashboard to get started. Lets explore together on the features of Forms. Similar to Sitecore Components, we can navigate to  https://forms.sitecorecloud.io/  to start creating the Forms There are 2 important tabs in creating Sitecore Forms  Forms  Webhook(for triggering the submit action) We can create, modify, delete, and activate the f...
Read more

Sitecore Custom Rule (Action and Condition)

-
Image
I have a situation to create a custom Sitecore rule and action for it. v   Goto /Sitecore/system/Settings/Rules/Definitions/Elements v   Create a new item base on the template “ ElementFolder ” with a name “ Custom Rule ” v   Click on the item and create condition and Actions that are necessary for your requirements Condition Template Item: It has two important sections v   Data ·          Text (This is the condition Text which will use tokens to evaluate the condition and user input which will be in [ ] brackets.The brackets contain four positional parameters separated by commas (“,”). 1. The name of the property that the parameter sets in the .NET class that implements the condition. 2. The name of an item beneath the /Sitecore/System/Settings/Rules/Common/Macros item providing predefined functionality, or an empty string. For example, to activate a user interface allowing the user to select an item fr...
Read more