support naming feature for page variant

hlxsites · Jul 21, 2024 · d9e9bc7 · d9e9bc7
1 parent c2843aa
commit d9e9bc7
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/plugins/experimentation/src/index.js b/plugins/experimentation/src/index.js
@@ -584,15 +584,19 @@ async function getExperimentConfig(pluginOptions, metadata, overrides) {
  pages: [window.location.pathname],
  label: 'Control',
  };
+ // get the custom labels for the variants names
 
  pages.forEach((page, i) => {
  const vname = `challenger-${i + 1}`;
+ // label with custom name or default
+ const customLabel = labelNames.length > i ? labelNames[i] : `Challenger ${i + 1}`;
+
  variantNames.push(vname);
  variants[vname] = {
  percentageSplit: `${splits[i].toFixed(4)}`,
  pages: [page],
  blocks: [],
- label: `Challenger ${i + 1}`,
+ label: customLabel,
  };
  });
  inferEmptyPercentageSplits(Object.values(variants));

diff --git a/plugins/experimentation/src/preview.js b/plugins/experimentation/src/preview.js
@@ -213,9 +213,9 @@ function createVariant(experiment, variantName, config, options) {
  experimentURL.searchParams.set(options.experimentsQueryParameter, `${experiment}/${variantName}`);
 
  return {
- label: `<code>${variantName}</code>`,
+ label: `<code>${variant.label}</code>`,
  description: `
- <p>${variant.label}</p>
+ <p>${variantName}</p>
  <p class="percentage">(${percentage} split)</p>
  <p class="performance"></p>`,
  actions: [{ label: 'Simulate', href: experimentURL.href }],

diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -41,7 +41,7 @@ window.hlx.plugins.add('rum-conversion', {
 
 window.hlx.plugins.add('experimentation', {
  condition: () => document.head.querySelector('[name^="experiment"],[name^="campaign-"],[name^="audience-"]')
- || document.head.querySelector('[property^="campaign:-"],[property^="audience:-"]')
+ || document.head.querySelector('[property^="campaign:"],[property^="audience:"]')
  || document.querySelector('.section[class*="experiment-"],.section[class*="audience-"],.section[class*="campaign-"]')
  || [...document.querySelectorAll('.section-metadata div')].some((d) => d.textContent.match(/Experiment|Campaign|Audience/i)),
  options: { audiences: AUDIENCES },