Prepare the GitHub Repository

1. Create a public GitHub repository and commit/push your code.

2. Set environment-specific values in the .env file.

3. If you’ve made content or layout changes in your local XM environment, use the Sitecore CLI to publish those changes and verify that the content is available on Experience Edge.

4. In your XM Cloud instance, publish all content and layout changes you want reflected on the live site.

Connect Your GitHub Repository to Vercel

1. Sign in to Vercel at vercel.com.
   
   

   
   
   

2. You can log in using GitHub authentication, or navigate to:
   Profile Icon → Account Settings → Authentication to connect GitHub manually.
   
   

   
   
   

3. It is recommended to install the Vercel GitHub App by visiting: https://github.com/apps/vercel
   
   

   • Click on Configure
     

     
     

   • Select Github Account
     

   • Grant access to your GitHub account and repositories.
     
     
     
     
     

Deployment Setup in Vercel

1. Go to the Vercel Dashboard → Add New → Project
   

2. Click "Continue with GitHub", then select your GitHub account and the desired repository.
   
   

   
   
   

3. Provide a project name.
   
   

   
   
   

4. Choose the framework preset — in our case, select Next.js.
   
   

   
   
   

5. Set the Root Directory to headapps/nextjs-starter.
   
   

   
   
   

6. Add Environment Variables

Manually add the following environment variables as key-value pairs (or import from .env):

PUBLIC_URL  

GRAPH_QL_ENDPOINT  

SITECORE_API_HOST  

SITECORE_SITE_NAME  

SITECORE_API_KEY  

SITECORE_EDGE_CONTEXT_ID  

7. Once done, click "Deploy".

Live Deployment

• Vercel will now show the deployment progress in real-time.
  
  

  
  
  

• It automatically optimizes your Next.js app, including static generation and serverless functions.

• Once deployment completes, Vercel provides an instant preview URL for your live app.
  
  

  
  
  

• You can also configure a custom domain via the "Add Domain" page in the dashboard.
  
  

  
  
  

References

Netlify and Vercel are two cloud-based platforms in the JamStack ecosystem that are officially recommended by Sitecore for deploying frontend (Next.js) applications. These platforms support both Server Side Rendering (SSR) and Static Site Generation (SSG).

In this blog, we’ll walk through the steps to deploy a website integrated with Sitecore XM Cloud using Netlify, which offers first-class support for Next.js.

Prepare the GitHub Repository

1. Create a public GitHub repository and commit/push your code.

2. Set environment-specific values in the .env file.

3. If you’ve made content or layout changes in your local XM environment, use the Sitecore CLI to publish your changes and verify the content is available on the Experience Edge.

4. In your XM Cloud instance, publish all changes you want reflected on your live site.

https://edge.sitecorecloud.io/api/admin/v1/webhooks

Request body:

json

{

  "label": "Netlify Deploy",

  "uri": "<your-netlify-build-hook-url>",

  "method": "POST",

  "headers": {

    "Authorization": "Bearer <edge-authentication-token>",

    "Content-Type": "application/json"

  }

}

Welcome to my new blog where I'll explore the audience segment building in Sitecore XM Cloud embedded personalization. Here, I'll also explore the wide array of pre-defined condition templates available, giving you a variety of targeting options for easy personalization. In my previous blog I explain on how we can create Page Variants and implement personalization in page variants.

Audience Builder in XM Cloud Personalize

Personalize in XM Cloud enables you to define tailored conditions to target specific audiences and deliver personalized experiences. The Audience Builder offers a user-friendly interface with ready-to-use, pre-defined personalization conditions. These help marketers create personalized experiences effortlessly in a low- or no-code environment.

Mode Selector

Build Mode: Allows us to create or edit your audience while designing a page variant.

Preview Mode: Displays the conditions in an easy-to-read format and shows the order of execution.

Condition Editor

Clicking on “Add first condition” opens a list of pre-defined condition templates in the right pane. We can select templates from this list and add them to the Condition Editor to build your target audience.

Condition Template in Audience Builder

4. Pre-Defined Condition Templates

Date and Time (Organization time zone)

Time of day (Organization time zone)

Country

This personalization is triggered when a user visits from a specific country (e.g., India). Multiple countries can be selected.

First Referrer

First Page

This personalization is triggered when the visitor starts their session on a specific page (e.g., a landing page). The page field accepts free-text input with letters, numbers, and special characters. Only one page can be specified.

Number of Page Views

This personalization is triggered when the visitor has viewed a specific page a certain number of times within a defined period (up to 30 days). The page field accepts free-text input with letters, numbers, and special characters. Only one page can be specified. The visit count can be any whole number, including zero.

Page view

New or Returning Visitor

Variables for Condition Templates

After adding a condition template to an audience, we must define its details using input options, also known as variables.