Squashed 'plugins/experimentation/' changes from 09f8a72..638e0db

638e0db fix: fragment content replacement
c61fdaf doc: update instrumentation details for plugin approach

git-subtree-dir: plugins/experimentation
git-subtree-split: 638e0db53a4fa7886ef9713acc853fc7b02c76be

README.md

@@ -97,7 +97,12 @@ const experimentationConfig = {
 };
 
 window.aem.plugins.add('experimentation', { // use window.hlx instead of your project has this
-  condition: () => document.head.querySelector('[name^="experiment"],[name^="campaign-"],[name^="audience-"]')
+  condition: () =>
+    // page level metadata
+    document.head.querySelector('[name^="experiment"],[name^="campaign-"],[name^="audience-"]')
+    // decorated section metadata
+    || document.querySelector('.section[class*=experiment],.section[class*=audience],.section[class*=campaign]')
+    // undecorated section metadata
     || [...document.querySelectorAll('.section-metadata div')].some((d) => d.textContent.match(/Experiment|Campaign|Audience/i)),
   options: experimentationConfig,
   url: '/plugins/experimentation/src/index.js',

src/index.js

@@ -185,7 +185,7 @@ function getAllSectionMeta(block, scope) {
  * @param {HTMLElement} el
  * @return Returns the path that was loaded or null if the loading failed
  */
-async function replaceInner(path, el) {
+async function replaceInner(path, el, selector) {
   try {
     const resp = await fetch(path);
     if (!resp.ok) {
@@ -197,7 +197,13 @@ async function replaceInner(path, el) {
     // parse with DOMParser to guarantee valid HTML, and no script execution(s)
     const dom = new DOMParser().parseFromString(html, 'text/html');
     // eslint-disable-next-line no-param-reassign
-    const newEl = dom.querySelector(el.tagName === 'MAIN' ? 'main' : 'main > div');
+    let newEl;
+    if (selector) {
+      newEl = dom.querySelector(selector);
+    }
+    if (!newEl) {
+      newEl = dom.querySelector(el.tagName === 'MAIN' ? 'main' : 'main > div');
+    }
     el.innerHTML = newEl.innerHTML;
     return path;
   } catch (e) {
@@ -412,7 +418,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);
+        res = await replaceInner(url, el, entry.selector);
       } else {
         res = url;
       }