Setup Experimentation Rail

DA provides an Experimentation UI to help orchestrate running AEM Experimentation. It does require a few updates to your scripts to enable. You will need to follow the AEM Experimentation setup steps before enabling the UI here.

Step 1 - Update scripts.js

Place the following at the bottom of your scripts.js file:

scripts.js (javascript)

async function loadSidekick() {
  if (document.querySelector('aem-sidekick')) {
    import('./sidekick.js');
    return;
  }

  document.addEventListener('sidekick-ready', () => {
    import('./sidekick.js');
  });
}

(async function loadDa() {
  const { searchParams } = new URL(window.location.href);

  /* eslint-disable import/no-unresolved */
  if (searchParams.get('dapreview')) {
    import('https://da.live/scripts/dapreview.js')
      .then(({ default: daPreview }) => daPreview(loadPage));
  }
  if (searchParams.get('daexperiment')) {
    import('https://da.live/nx/public/plugins/exp/exp.js');
  }
}());

Step 2 - Create sidekick.js

Sidekick.js will allow you a sustainable place to add future plugins.

sidekick.js (javascript)

let expMod;
const DA_EXP = 'https://da.live/nx/public/plugins/exp/exp.js';

async function toggleExp() {
  const exists = document.querySelector('#aem-sidekick-exp');

  // If it doesn't exist, let module side effects run
  if (!exists) {
    expMod = await import(DA_EXP);
    return;
  }

  // Else, cache the module here and toggle it.
  if (!expMod) expMod = await import(DA_EXP);
  expMod.default();
}

(async function sidekick() {
  const sk = document.querySelector('aem-sidekick');
  if (!sk) return;
  sk.addEventListener('custom:experimentation', toggleExp);
}());

Step 3 - Add a plugin to sidekick

sidekick.json (json)

{
  "project": "...",
  "plugins": [
    {
      "id": "experimentation",
      "titleI18n": { "en": "Experimentation" },
      "environments": [ "dev", "preview" ],
      "event": "experimentation"
    }
  ]
}