The glossary explains many concepts from Sitecore CDP, and I thought it would be the perfect chance to get this expanded with the equivalent concepts from Sitecore XP world.

Do you agree with the parallels in the third column? Let me know your thoughts!

replaceHTML('#main-component');

My original HTML has a div like this:

<div id="main-component">Temporary content</div>

And I was trying to completely replace the whole div with the markup from my Variant

<div id="main-component">
 <h1 class="title">Hello World! - Variant 1</h1>
</div>

While the methods insertHTMLBefore and insertHTMLAfter were working normally, nothing was happening with replaceHTML.

But why?

Debugging the Javascript method, I’ve noticed the error is due to what looks to be a bug in the native replaceHTML function.

function replaceHTML(e) {
 var n = document.querySelector(e)
    , t = "bx-" + variant.ref;
 if (document.getElementById(t))
    document.getElementById(t).innerHTML = variant.assets.compiled.html;
 else {
    var r = document.createElement("div");
    if (r.setAttribute("id", "bx-" + variant.ref),
    r.innerHTML = variant.assets.compiled.html,
    !(n instanceof HTMLElement))
       throw "HTML element not found";
    n.innerHTML(r) // <=== The "bug" is here
 }
}

More specifically in the bottom of the block, the n.innerHTML is being called as a function, when it’s actually a string property.

I’m not sure what this line is really trying to do here, but I’ve managed to fix the “bug” with a corrected version of the replaceHTML function.

The “fix”

To fix the issue I’ve copied the original function to my target page (preferably at the bottom, before the closing body tag).

<script>
 function replaceHTML2(e, variant) {
     var n = document.querySelector(e)
     , t = "bx-" + variant.ref;
     if (document.getElementById(t))
         document.getElementById(t).innerHTML = variant.assets.compiled.html;
     else {
         var r = document.createElement("div");
         if (r.setAttribute("id", "bx-" + variant.ref),
         r.innerHTML = variant.assets.compiled.html,
         !(n instanceof HTMLElement))
             throw "HTML element not found";
         n.outerHTML = r.outerHTML;  // <=== the "fix" is here
     }
 } 
</script>

Now of course you’ll need to call the new function in your Variation Javascript, instead of the original one. Notice that the variant has to be also passed to the new function as a parameter, as the variant context is not accessible from where the function is declared.

replaceHTML2('#main-component',variant);

After these changes, I’m now able to actually replace any markup from the original page with markup from the Web Experience.

Do you have any thoughts on this strange situation? Please leave me a word!

During the exercises, there was a lot of confusion between two functionalities with similar names:

• ExperiENCES

• ExperiMENTS

Not only the names are similar: some sub-items are also named identical, worsening the confusion. In fact, some people created things under “ExperiMENTS” that were supposed to be under “ExperiENCES“, and vice-versa.

After all that confusion, it was a matter of time to hear some criticism about this UX…

Not sure if the CDP/Personalize team is planning to change those names in the future… but just in case, let’s understand the differences between the two.

ExperiENCES

Experiences are content variations that can be offered to different audiences in multiple ways, and their performance can be monitored.

For those who are familiar with Sitecore XP, ExperiENCES can be compared with Personalization.

There are three types of Experiences:

• Web - Experiences that can be added to website pages. They will normally consist of a visual experience, such as a modal window or a sidebar. Variations can be created based on pre-existing templates, or from scratch.
  

  Web Templates that can be used to create Experiences

• Full Stack – API-driven experiences, that can be either Triggered or Interactive:
  1. Triggered – Experiences that will occur when there is a change to data, some event is raised, or some specific conditions are met;
  2. Interactive – Experiences powered by APIs to serve dynamic data for best server-side personalization.

• Flows – Show Offers across multiple channels

ExperiMENTS

Experiences that consist in A/B Tests, capable to display multiple variations to the public, and determine which one is working best.

For those familiar with Sitecore XP, ExperiMENTS can be compared to Multivariate (MV) Tests.

There are two types of Experiences:

• Web - A/B tests that will be executed on your website;
• Full Stack – API-driven A/B tests. Similarly to Full Stack Experiences, they can also be Triggered or Interactive.