Sitecore Personalize - Translating Content in Experiences and Experiments

Sergey Baranov on November 8, 2024

Translating Content in Sitecore Personalize Experiences and Experiments

If you're tackling this topic, you're likely dealing with the following:

  • - Your website utilizes Sitecore Personalize,
  • - It's multilingual,
  • - You're tasked with developing an Experiment or Experience,
  • - You aim to present Experiment/Experience results in the appropriate language for each user.

It's common for some to create distinct Experiences for different languages. However, this method scatters the data, which undermines the core purpose of Experiments — collecting valuable metrics, meeting goals, and validating hypotheses; and Experiences — to evaluate their effectiveness. Therefore, creating separate versions for each language isn't ideal.

I'll outline a straightforward method employed in a real-world project, demonstrating how this can be achieved directly within Sitecore Personalize without relying on third-party services.

For ease of understanding, let’s explore how to translate content for a Web Experience (the same steps apply to an Experiment or Interactive Experience). Suppose there's a need for a popup on a webpage that shows text either in English or Arabic based on the site's contextual language:

Sitecore Personalize - Popup in English Sitecore Personalize -  Popup in Arabic

Here's how we handle content translation:

1. Offer Templates

In Sitecore Personalize, an Offer is an entity similar to a standard Sitecore item, and an Offer template is like a Sitecore template. By creating an Offer template with necessary fields, we can produce two Offers from it - one in English and one in Arabic.

Create a new Offer template:

Sitecore Personalize - Create new Offer template

Create a new Offer in English:

Sitecore Personalize - Create english offer

Create a new Offer in Arabic:

Sitecore Personalize  - Create arabian offer

The challenge is connecting these Offers to a Web Experience.

2. Decision Models

A Decision Model will link our offers to a Web Experience. The workflow is as follows:

  • - The Web Experience executes the Decision Model,
  • - The Decision Model identifies the context language and provides the appropriate language Offer,
  • - Values from the Offer substitute into the popup template.

Let's set up a Decision Model - it’s relatively easy:

Sitecore Personalize  - Create decision model

The contextual language in a Decision Model can be identified through many options:

  • - The current session language,
  • - Request parameters,
  • - The segment of current URL (if your site URL consistently has language segments).

After determining the contextual language, we select the corresponding language Offer in Decision table:

Sitecore Personalize  - Decision table

The last step is to configure the Web Experience accordingly.

3. Web Experience

First, we need to connect our Decision Model to the Web Experience:

Sitecore Personalize  - Decision model in Web experience

Next we need to configure Experiment variants. API response of variant should be the following:


{
<#if (offers)??="">
  "decisionOffers": ${toJSON(offers)}
</#if>
}

HTML markup of variant should be the following (field names must be the same as offer field names):


{{#decisionOffers}}
  {{#attributes}}


<div id="pers-modal_overlay">
  <div id="pers-modal_overlay-content" class="pers-modal_content">
    <h3>[[ SubTitle Text | string | {{SubTitle_Text}} | { required: true, group: Title, groupOrder: 2, order: 1 } ]]</h3>
    <h2>[[Title | string | {{Title_Text}} | {required:true, group: Title, order: 1}]]</h2>
   
    <p class="descriptionText">
       [[ Description Text | text | {{Description_Text}} | {required: true, group: Description, groupOrder: 3, order: 1 }]]
    </p>
    <div class="pers-modal_button-wrapper">
      <a href="/{{lang}}/login" class="pers-modal_button">
      [[ Button title | string | {{Button_Text}} | {required:true, group: Button, groupOrder: 4, order: 1 }]]
      </a>
    </div>
   
  </div>
</div>


    {{/attributes}}
{{/decisionOffers}}

And that`s all! If you switch to the preview mode, you should see your experience in following "placeholders" styling:

Sitecore Personalize  - Decision model in Web experience

Conclusion

With globalization, delivering localized content is crucial. Sitecore Personalize`s decision models with offers empower businesses to streamline and refine the translation process, ensuring personalized and culturally relevant user experiences. By utilizing data-driven insights and real-time decisions, businesses can bolster their global presence and forge deeper connections with diverse users.