Merge commit '6cb58577ef86d974b603c2e6b0834f026bd60cd2' into experime…

…ntation-v2-integration

plugins/experimentation/documentation/experiments.md

@@ -74,6 +74,19 @@ which would essentially disable the control page.
 
 If you need to be really granular, decimal numbers are also supported, like `33.34, 33.33, 33.33`.
 
+#### Custom Variant Labels
+This feature allows authors to specify custom labels for both page and section experiment variants via metadata. While the internal variant IDs remain in a predefined format (e.g., challenger-1, challenger-2), the labels in the overlay pill can be customized to provide more meaningful names.
+
+To customize the labels, add a new entry in the page metadata or section metadata(below takes page metadata as an example):
+
+| Metadata            |                                                              |
+|---------------------|--------------------------------------------------------------|
+| Experiment          | Hero Test                                                    |
+| Experiment Variants | [https://{ref}--{repo}--{org}.hlx.page/my-page-variant-1](), [https://{ref}--{repo}--{org}.hlx.page/my-page-variant-2](), [https://{ref}--{repo}--{org}.hlx.page/my-page-variant-3]() |
+| Experiment Names    |  foo1, foo2, foo3                                                 |
+
+The names defined will match with the corresponding variants in sequence. If the number of names provided is less than the number of variants, the default naming will be applied for the remaining variants.
+
 #### Code-level experiments
 
 Note that the above assumes you have different content variants to serve, but if you want to run a pure code-based A/B Test, this is also achievable via:

plugins/experimentation/src/index.js

@@ -114,7 +114,6 @@ export function getAllMetadata(scope) {
 
     const camelCaseKey = toCamelCase(key);
     res[camelCaseKey] = meta.getAttribute('content');
-
     return res;
   }, value ? { value } : {});
 }
@@ -342,7 +341,8 @@ function createModificationsHandler(
     const url = await getExperienceUrl(ns.config);
     let res;
     if (url && new URL(url, window.location.origin).pathname !== window.location.pathname) {
-      res = await replaceInner(url, el);
+      // eslint-disable-next-line no-await-in-loop
+      res = await replaceInner(new URL(url, window.location.origin).pathname, el);
     } else {
       res = url;
     }
@@ -378,7 +378,7 @@ function depluralizeProps(obj, props = []) {
 async function getManifestEntriesForCurrentPage(urlString) {
   try {
     const url = new URL(urlString, window.location.origin);
-    const response = await fetch(url);
+    const response = await fetch(url.pathname);
     const json = await response.json();
     return json.data
       .map((entry) => Object.keys(entry).reduce((res, k) => {
@@ -435,7 +435,7 @@ function watchMutationsAndApplyFragments(
       let res;
       if (url && new URL(url, window.location.origin).pathname !== window.location.pathname) {
         // eslint-disable-next-line no-await-in-loop
-        res = await replaceInner(url, el, entry.selector);
+        res = await replaceInner(new URL(url, window.location.origin).pathname, el, entry.selector);
       } else {
         res = url;
       }
@@ -597,6 +597,7 @@ async function getExperimentConfig(pluginOptions, metadata, overrides) {
   };
   // get the custom labels for the variants names
 
+  // get the custom labels for the variants names
   const labelNames = stringToArray(metadata.name);
   pages.forEach((page, i) => {
     const vname = `challenger-${i + 1}`;
@@ -623,7 +624,7 @@ async function getExperimentConfig(pluginOptions, metadata, overrides) {
 
   const config = {
     id,
-    label: metadata.name || `Experiment ${metadata.value || metadata.experiment}`,
+    label: `Experiment ${metadata.value || metadata.experiment}`,
     status: metadata.status || 'active',
     audiences,
     endDate,
@@ -666,14 +667,15 @@ async function getExperimentConfig(pluginOptions, metadata, overrides) {
 
   return config;
 }
+
 /**
  * Parses the campaign manifest.
  */
 function parseExperimentManifest(entries) {
   return Object.values(Object.groupBy(
-    entries.map((e) => depluralizeProps(e, ['experiment', 'name', 'split'])),
+    entries.map((e) => depluralizeProps(e, ['experiment', 'variant', 'split', 'name'])),
     ({ experiment }) => experiment,
-  )).map(aggregateEntries('experiment', ['split', 'url', 'name']));
+  )).map(aggregateEntries('experiment', ['split', 'url', 'variant', 'name']));
 }
 
 function getUrlFromExperimentConfig(config) {
@@ -693,6 +695,8 @@ async function runExperiment(document, pluginOptions) {
     (el, config, result) => {
       const { id, selectedVariant, variantNames } = config;
       const variant = result ? selectedVariant : variantNames[0];
+      el.dataset.experiment = id;
+      el.dataset.variant = variant;
       el.classList.add(`experiment-${toClassName(id)}`);
       el.classList.add(`variant-${toClassName(variant)}`);
       window.hlx?.rum?.sampleRUM('experiment', {
@@ -794,10 +798,12 @@ async function runCampaign(document, pluginOptions) {
     (el, config, result) => {
       const { selectedCampaign = 'default' } = config;
       const campaign = result ? toClassName(selectedCampaign) : 'default';
+      el.dataset.audience = selectedCampaign;
+      el.dataset.audiences = Object.keys(pluginOptions.audiences).join(',');
       el.classList.add(`campaign-${campaign}`);
-      window.hlx?.rum?.sampleRUM('campaign', {
-        source: el.className,
-        target: campaign,
+      window.hlx?.rum?.sampleRUM('audience', {
+        source: campaign,
+        target: Object.keys(pluginOptions.audiences).join(':'),
       });
       document.dispatchEvent(new CustomEvent('aem:experimentation', {
         detail: {
@@ -864,6 +870,7 @@ function getUrlFromAudienceConfig(config) {
 }
 
 async function serveAudience(document, pluginOptions) {
+  document.body.dataset.audiences = Object.keys(pluginOptions.audiences).join(',');
   return applyAllModifications(
     pluginOptions.audiencesMetaTagPrefix,
     pluginOptions.audiencesQueryParameter,
@@ -874,10 +881,11 @@ async function serveAudience(document, pluginOptions) {
     (el, config, result) => {
       const { selectedAudience = 'default' } = config;
       const audience = result ? toClassName(selectedAudience) : 'default';
+      el.dataset.audience = audience;
       el.classList.add(`audience-${audience}`);
       window.hlx?.rum?.sampleRUM('audience', {
-        source: el.className,
-        target: audience,
+        source: audience,
+        target: Object.keys(pluginOptions.audiences).join(':'),
       });
       document.dispatchEvent(new CustomEvent('aem:experimentation', {
         detail: {

plugins/experimentation/tests/audiences.test.js

@@ -59,8 +59,8 @@ test.describe('Page-level audiences', () => {
     expect(await page.evaluate(() => window.rumCalls)).toContainEqual([
       'audience',
       expect.objectContaining({
-        source: 'audience-foo',
-        target: 'foo',
+        source: 'foo',
+        target: 'foo:bar',
       }),
     ]);
   });

plugins/experimentation/tests/campaigns.test.js

@@ -67,10 +67,10 @@ test.describe('Page-level campaigns', () => {
     });
     await goToAndRunCampaign(page, '/tests/fixtures/campaigns/page-level?campaign=foo');
     expect(await page.evaluate(() => window.rumCalls)).toContainEqual([
-      'campaign',
+      'audience',
       expect.objectContaining({
-        source: 'campaign-foo',
-        target: 'foo',
+        source: 'foo',
+        target: 'foo:bar',
       }),
     ]);
   });

plugins/experimentation/tests/experiments.test.js

@@ -287,6 +287,7 @@ test.describe('Fragment-level experiments', () => {
             'challenger-1': expect.objectContaining({ percentageSplit: '0.3333' }),
             'challenger-2': expect.objectContaining({ percentageSplit: '0.3333' }),
           },
+          label: expect.stringMatching(/Experiment Baz/),
         }),
         servedExperience: expect.stringMatching(/\/tests\/fixtures\/experiments\/(fragment|section)-level/),
       }),

plugins/experimentation/tests/fixtures/audiences/page-level.html

@@ -2,6 +2,7 @@
 <head>
   <meta name="audience-foo" content="/tests/fixtures/audiences/variant-1"/>
   <meta name="audience-bar" content="/tests/fixtures/audiences/variant-2"/>
+  <meta property="audience:-foo" content="/tests/fixtures/audiences/variant-1"/>
   <script>
     window.AUDIENCES = {
       foo: () => true,

plugins/experimentation/tests/fixtures/campaigns/page-level.html

@@ -3,6 +3,12 @@
   <meta name="campaign-foo" content="/tests/fixtures/campaigns/variant-1"/>
   <meta name="campaign-bar" content="/tests/fixtures/campaigns/variant-2"/>
   <script type="module" src="/tests/fixtures/scripts.js"></script>
+  <script>
+    window.AUDIENCES = {
+      foo: () => true,
+      bar: () => true,
+    }
+  </script>
 </head>
 <body>
   <main>

plugins/experimentation/tests/fixtures/experiments/fragments--alt.json

@@ -4,13 +4,15 @@
           "Pages": "/tests/fixtures/experiments/fragment-level--alt",
           "Experiments": "Baz",
           "Variants": "challenger-1",
+          "Names": "C1",
           "Selectors": ".fragment",
           "Urls": "/tests/fixtures/experiments/section-level-v1"
       },
       {
           "Pages": "/tests/fixtures/experiments/fragment-level--alt",
           "Experiments": "Baz",
           "Variants": "challenger-2",
+          "Names": "C2",
           "Selectors": ".fragment",
           "Urls": "/tests/fixtures/experiments/section-level-v2"
       }

plugins/experimentation/tests/fixtures/experiments/fragments.json

@@ -4,27 +4,31 @@
           "Page": "/tests/fixtures/experiments/fragment-level",
           "Experiment": "Baz",
           "Variant": "challenger-1",
+          "Names": "C1",
           "Selector": ".fragment",
           "Url": "/tests/fixtures/experiments/section-level-v1"
       },
       {
           "Page": "/tests/fixtures/experiments/fragment-level",
           "Experiment": "Baz",
           "Variant": "challenger-2",
+          "Names": "C2",
           "Selector": ".fragment",
           "Url": "/tests/fixtures/experiments/section-level-v2"
       },
       {
           "Page": "/tests/fixtures/experiments/fragment-level--async",
           "Experiment": "Baz",
           "Variant": "challenger-1",
+          "Names": "C1",
           "Selector": ".fragment",
           "Url": "/tests/fixtures/experiments/section-level-v1"
       },
       {
           "Page": "/tests/fixtures/experiments/fragment-level--async",
           "Experiment": "Baz",
           "Variant": "challenger-2",
+          "Names": "C2",
           "Selector": ".fragment",
           "Url": "/tests/fixtures/experiments/section-level-v2"
       }

plugins/experimentation/tests/fixtures/experiments/page-level.html

@@ -2,6 +2,7 @@
 <head>
   <meta name="experiment" content="foo"/>
   <meta name="experiment-variants" content="/tests/fixtures/experiments/page-level-v1,/tests/fixtures/experiments/page-level-v2"/>
+  <meta name="experiment-name" content="V1,V2"/>
   <script type="module" src="/tests/fixtures/scripts.js"></script>
 </head>
 <body>

plugins/experimentation/tests/fixtures/experiments/section-level.html

@@ -15,6 +15,7 @@
             <a href="/tests/fixtures/experiments/section-level-v2">/tests/fixtures/experiments/section-level-v2</a>
           </div>
         </div>
+        <div><div>Experiment Names</div><div>V1,V2</div></div>
       </div>
     </div>
   </main>