feat: fix experimentation plugin subtree (#446)

solutions/plugins/experimentation/README.md

@@ -54,9 +54,9 @@ window.hlx.plugins.add('experimentation', {
 });
 ```
 
-### Without the plugin system
+### On top of a regular boilerplate project
 
-To properly connect and configure the plugin for your project, you'll need to edit your `scripts.js` in your AEM project and add the following:
+Typically, you'd know you don't have the plugin system if you don't see a reference to `window.hlx.plugins` in your `scripts.js`. In that case, you can still manually instrument this plugin in your project by falling back to a more manual instrumentation. To properly connect and configure the plugin for your project, you'll need to edit your `scripts.js` in your AEM project and add the following:
 
 1. at the start of the file:
     ```js
@@ -151,6 +151,10 @@ runEager.call(document, {
   // short durations of those campaigns/experiments
   rumSamplingRate: 10,
 
+  // the storage type used to persist data between page views
+  // (for instance to remember what variant in an experiment the user was served)
+  storage: window.SessionStorage,
+
   /* Audiences related properties */
   // See more details on the dedicated Audiences page linked below
   audiences: {},

solutions/plugins/experimentation/src/index.js

@@ -451,14 +451,14 @@ export async function runExperiment(document, options, context) {
   }
 
   // Fullpage content experiment
-  document.body.classList.add(`experiment-${experimentConfig.id}`);
+  document.body.classList.add(`experiment-${context.toClassName(experimentConfig.id)}`);
   const result = await replaceInner(pages[index], document.querySelector('main'));
   experimentConfig.servedExperience = result || currentPath;
   if (!result) {
     // eslint-disable-next-line no-console
     console.debug(`failed to serve variant ${window.hlx.experiment.selectedVariant}. Falling back to ${experimentConfig.variantNames[0]}.`);
   }
-  document.body.classList.add(`variant-${result ? experimentConfig.selectedVariant : experimentConfig.variantNames[0]}`);
+  document.body.classList.add(`variant-${context.toClassName(result ? experimentConfig.selectedVariant : experimentConfig.variantNames[0])}`);
   context.sampleRUM('experiment', {
     source: experimentConfig.id,
     target: result ? experimentConfig.selectedVariant : experimentConfig.variantNames[0],
@@ -577,7 +577,7 @@ export async function serveAudience(document, options, context) {
   }
 }
 
-window.hlx.patchBlockConfig.push((config) => {
+window.hlx.patchBlockConfig?.push((config) => {
   const { experiment } = window.hlx;
 
   // No experiment is running

solutions/plugins/experimentation/src/preview.css

@@ -133,6 +133,7 @@
 .hlx-popup h5 {
   font-family: system-ui, sans-serif;
   margin: 0;
+  color: inherit;
 }
 
 .hlx-popup h4 {

solutions/plugins/experimentation/src/preview.js

@@ -175,22 +175,23 @@ async function fetchRumData(experiment, options) {
 
   // the query is a bit slow, so I'm only fetching the results when the popup is opened
   const resultsURL = new URL('https://helix-pages.anywhere.run/helix-services/run-query@v3/rum-experiments');
-  resultsURL.searchParams.set(options.experimentsQueryParameter, experiment);
-  resultsURL.searchParams.set('domainKey', options.domainKey);
   // restrict results to the production host, this also reduces query cost
   if (typeof options.isProd === 'function' && options.isProd()) {
-    resultsURL.searchParams.set('domain', window.location.host);
+    resultsURL.searchParams.set('url', window.location.host);
   } else if (options.prodHost) {
-    resultsURL.searchParams.set('domain', options.prodHost);
+    resultsURL.searchParams.set('url', options.prodHost);
   }
+  resultsURL.searchParams.set('domainkey', options.domainKey);
+  resultsURL.searchParams.set('experiment', experiment);
 
   const response = await fetch(resultsURL.href);
   if (!response.ok) {
     return null;
   }
 
   const { results } = await response.json();
-  if (!results.length) {
+  const { data } = results;
+  if (!data.length) {
     return null;
   }
 
@@ -200,7 +201,7 @@ async function fetchRumData(experiment, options) {
     return o;
   }, {});
 
-  const variantsAsNums = results.map(numberify);
+  const variantsAsNums = data.map(numberify);
   const totals = Object.entries(
     variantsAsNums.reduce((o, v) => {
       Object.entries(v).forEach(([k, val]) => {